文章摘要
这篇文章介绍了在Maui Blazor中使用摄像头的实现方法。由于Maui Blazor的界面由WebView渲染，直接使用原生摄像头功能不可行。为此，作者通过在WebView中使用JavaScript调用设备摄像头功能，并支持多平台（如Android和PC）的兼容性测试。文章详细描述了实现步骤，包括创建JavaScript函数、设置视频画布、启动摄像头以及处理权限请求。测试结果表明，该方法在Android和PC上工作良好，但在mac和Ioc环境中可能存在问题。文章还提供了一份完整的实现代码，供参考。
由于Maui Blazor中界面是由WebView渲染，所以再使用Android的摄像头时无法去获取，因为原生的摄像头需要绑定界面组件
所以我找到了其他的实现方式，通过WebView使用js调用设备摄像头 支持多平台兼容目前测试了Android 和PC 由于没有ioc和mac无法测试 大概率是兼容可能需要动态申请权限我们再wwwroot中创建一个的文件并且添加以下俩个js函数
再中添加引入jsfunction 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=https://www.jb51.net/article/document.getElementById(srcId);
src.setAttribute(“height”, height)
src.setAttribute(“width”, widht);
src.setAttribute(“src”, URL.createObjectURL(blob))
}, “image/jpeg”, 0.95);
}
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=https://www.jb51.net/article/window.URL.createObjectURL(stream);
}
video.onloadedmetadata=function (e) {
video.play();
};
//mirror image
video.style.webkitTransform=”scaleX(-1)”;
video.style.transform=”scaleX(-1)”;
});
}
}
然后各个平台的兼容
android：
Platforms/Android/AndroidManifest.xml文件内容
<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”>
<application android:allowBackup=”true” android:supportsRtl=”true”></application>
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.INTERNET” />
<!–相机权限–>
<uses-permission android:name=”android.permission.CAMERA” android:required=”false”/>
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<!–相机功能–>
<uses-feature android:name=”android.hardware.camera” />
<!–音频录制权限–>
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<!–位置权限–>
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<!– Needed only if your app targets Android 5.0 (API level 21) or higher. –>
<uses-feature android:name=”android.hardware.location.gps” />
<queries>
<intent>
<action android:name=”android.intent.action.VIEW” />
<data android:scheme=”http”/>
</intent>
<intent>
<action android:name=”android.intent.action.VIEW” />
<data android:scheme=”https”/>
</intent>
</queries>
</manifest>
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
在中添加以下代码；如果没有下面代码会出现没有摄像头权限
具体在这个 issue体现#if ANDROID
builder.ConfigureMauiHandlers(handlers=>
{
handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>();
});
#endif
以上是android的适配代码 pc不需要设置额外代码 ios和mac不清楚
然后编写界面
@page “/” @*界面路由*@
@inject IJSRuntime JSRuntime @*注入jsRuntime*@
@if(OpenCameraStatus) @*在摄像头没有被打开的情况不显示video*@
{
<video id=”@VideoId” width=”@widht” height=”@height” />
<canvas class=”d-none” id=”@CanvasId” width=”@widht” height=”@height” />
}
<button @onclick=”” style=”margin:8px”>打开摄像头</button>
@*因为摄像头必须是用户手动触发如果界面是滑动进入无法直接调用方法打开摄像头所以添加按钮触发*@
<button style=”margin:8px”>截图</button> @*对视频流截取一张图*@
<img id=”@ImgId” />
@code{
private string CanvasId;
private string ImgId;
private string VideoId;
private bool OpenCameraStatus;
private int widht=320;
private int height=500;
private async Task OpenCamera()
{
if (!OpenCameraStatus)
{
// 由于打开摄像头的条件必须是用户手动触发如果滑动切换到界面是无法触发的
await JSRuntime.InvokeVoidAsync(“startVideo”, “videoFeed”);
OpenCameraStatus=true;
StateHasChanged();
}
}
protected override async Task OnInitializedAsync()
{
// 初始化id
ImgId=Guid.NewGuid().ToString(“N”);
CanvasId=Guid.NewGuid().ToString(“N”);
VideoId=Guid.NewGuid().ToString(“N”);
await base.OnInitializedAsync();
}
private async Task Screenshot()
{
await JSRuntime.InvokeAsync<String>(“setImgSrc”, CanvasId,VideoId, ImgId, widht, height);
}
}
然后可以运行程序就可以看到我们的效果了
示例代码：gitee github
到此这篇关于Maui Blazor 使用摄像头实现的文章就介绍到这了,更多相关Maui Blazor 摄像头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:在MAUI中使用Masa?Blazor的方法