由于maui blazor中界面是由webview渲染，所以再使用android的摄像头时无法去获取，因为原生的摄像头需要绑定界面组件
所以我找到了其他的实现方式，通过webview使用js调用设备摄像头 支持多平台兼容目前测试了android 和pc 由于没有ioc和mac无法测试 大概率是兼容可能需要动态申请权限
1. 添加js方法
我们再wwwroot中创建一个helper.js的文件并且添加以下俩个js函数
再index.html中添加引入js
/**
* 设置元素的src
* @param {any} canvasid canvasid的dom id
* @param {any} videoid video的dom id
* @param {any} srcid img的dom id
* @param {any} widht 设置截图宽度
* @param {any} height 设置截图高度
*/
function setimgsrc(dest,videoid, srcid, widht, height) {
let video = document.getelementbyid(videoid);
let canvas = document.getelementbyid(canvasid);
console.log(video.clientheight, video.clientwidth);
canvas.getcontext('2d').drawimage(video, 0, 0, widht, height);
canvas.toblob(function (blob) {
var src = document.getelementbyid(srcid);
src.setattribute("height", height)
src.setattribute("width", widht);
src.setattribute("src", url.createobject)
}, "image/jpeg", 0.95);
}
/**
* 初始化摄像头
* @param {any} src
*/
function startvideo(src) {
if (navigator.mediadevices && navigator.mediadevices.getusermedia) {
navigator.mediadevices.getusermedia({ video: true }).then(function (stream) {
let video = document.getelementbyid(src);
if ("srcobject" in video) {
video.srcobject = stream;
} else {
video.src = window.url.createobject;
}
video.onloadedmetadata = function (e) {
video.play();
};
//mirror image
video.style.webkittransform = "scalex(-1)";
video.style.transform = "scalex(-1)";
});
}
}
然后各个平台的兼容
android：
platforms/android/androidmanifest.xml文件内容
platforms/android/mainactivity.cs文件内容
[activity(theme = "@style/maui.splashtheme", mainlauncher = true, configurationchanges = configchanges.screensize | configchanges.orientation | configchanges.uimode | configchanges.screenlayout | configchanges.smallestscreensize | configchanges.density)]
public class mainactivity : mauiappcompatactivity
{
protected override void oncreate(bundle savedinstancestate)
{
base.oncreate(savedinstancestate);
platform.init(this, savedinstancestate);
// 申请所需权限 也可以再使用的时候去申请
activitycompat.requestpermissions(this, new[] { manifest.permission.camera, manifest.permission.recordaudio, manifest.permission.modifyaudiosettings }, 0);
}
}
mauiwebchromeclient.cs文件内容
#if android
using android.webkit;
using microsoft.aspnetcore.components.webview.maui;
namespace mainsample;
public class mauiwebchromeclient : webchromeclient
{
public override void onpermissionrequest(permissionrequest request)
{
request.grant(request.getresources());
}
}
public class mauiblazorwebviewhandler : blazorwebviewhandler
{
protected override void connecthandler(android.webkit.webview platformview)
{
platformview.setwebchromeclient(new mauiwebchromeclient());
base.connecthandler(platformview);
}
}
#endif
在mauiprogram.cs中添加以下代码；如果没有下面代码会出现没有摄像头权限
具体在这个 体现
#if android
builder.configuremauihandlers(handlers =>
{
handlers.addhandler();
});
#endif
以上是android的适配代码 pc不需要设置额外代码 ios和mac不清楚
然后编写界面
@page "/" @*界面路由*@
@inject ijsruntime jsruntime @*注入jsruntime*@
@if(opencamerastatus) @*在摄像头没有被打开的情况不显示video*@
{
然后可以运行程序就可以看到我们的效果了
示例代码：
