本文由網友投稿。
作者：dotnet-simple
原文標題：Maui Blazor 使用攝影機實現
原文連結：https://www.cnblogs.com/hejiale010426/p/17045707.html
由於 Maui Blazor 中的介面是由 WebView 渲染，所以在使用 Android 的攝影機時無法直接取得：因為原生的攝影機需要綁定介面元件。我找到了其他實作方式，透過 WebView 使用 js 呼叫設備攝影機，支援多平台相容，目前測試了 Android 和 PC，由於沒有 iOS 和 macOS 無法測試，大概率是相容的，可能需要動態申請權限。
- 新增 js 方法
我們在 wwwroot 中建立一個 helper.js 的檔案，並新增以下兩個 js 函式。
在 index.html 中加入 <script src="helper.js"></script> 引入 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.createObjectURL(blob));
},
"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.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
在 MauiProgram.cs 中加入以下程式碼；如果沒有下面程式碼會出現沒有攝影機權限，具體在這個 issue 體現
#if ANDROID
builder.ConfigureMauiHandlers(handlers =>
{
handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>();
});
#endif
以上是 android 的適配程式碼，pc 不需要設定額外程式碼，ios 和 macOS 不清楚。
然後編寫介面
@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：https://gitee.com/hejiale010426/main-sample
- github：https://github.com/239573049/main-sample
來自 token 的分享
技術交流群：737776595