Maui Blazor はカメラ実装を使用します

# Maui Blazor はカメラを使用して達成します

Maui Blazor のインターフェースは WebView でレンダリングされるため、Android カメラを使用する場合は取得できませんネイティブカメラはインターフェースコンポーネントにバインドする必要があるため、他の実装方法を探しました WebView 経由でデバイスのカメラを呼び出す js を使用するマルチサポート・プラットフォームの
互換性現時点では Android と PC がテストされていますが、ioc と mac がないためテストできませんが、互換性がある可能性が高く、動的に許可を申請する必要がある可能性があります。

## 1. js メソッドの追加
wwwroot に `helper.js` ファイルを作成し、次の 2 つの js 関数を追加し
、`index.html` に `<script src="helper.js"></script> を追加します。 js

```js

/**
* 要素の src を設定します
* @param {any} CanvasId CanvasId dom id
* @param {any} videoId ビデオ dom id
* @param {any} srcId img dom id
* @param {any} widht setscreenshot width
* @param {any} height スクリーンショットの高さを設定します
*/
function setImgSrc(dest,videoId, srcId, width, height) { let video = document.getElementById(videoId); let Canvas = document.getElementById(canvasId); console.log ( video.clientHeight, video.clientWidth); Canvas.getContext('2d').drawImage(video, 0, 0, width, 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) (ストリーム) { 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(); }; //鏡像

video.style.webkitTransform = "scaleX(-1)";
video.style.transform = "スケールX(-1)";
});
}
}
```

次に各プラットフォームの互換性

アンドロイド：

プラットフォーム/Android/AndroidManifest.xml ファイルの内容

```xml
<?xml version="1.0"coding="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" " />

   
   <uses-feature android:name="android.hardware.location.gps" />

   <クエリ
       > <イン
           テント> <アクション android:name="android.intent.action.VIEW" />
           <データ android:scheme="http"/>
       </intent> <イン
       テント>
           <アクション android:name="android.インテント.アクション.VIEW" />
           <data android:scheme="https"/>
       </intent>
   </queries>
</manifest>
```

Platforms/Android/MainActivity.cs ファイルの内容

```c#
[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 ファイルの内容

```c#
#Android.Webkit を使用した ANDROID の場合
;
Microsoft.AspNetCore.Components.WebView.Maui を使用します。

名前空間 MainSamp;

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(プラットフォームビュー); } }

#endif
```

次のコードを `MauiProgram.cs` に追加します。次のコードがない場合、カメラのアクセス許可がなく、
これはこの [問題](https://github.com/dotnet/maui/issues/3694) に反映されています。

```c#

#if ANDROID
builder.ConfigureMauiHandlers(handlers =>
{ handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>(); }); #endif ```

上記は Android 用の適応コードです PC では追加のコードを設定する必要はありません Ios と Mac は不明です

次にインターフェースを書きます

```razor
@page "/" @*インターフェイスルーティング*@

@inject IJSRuntime JSRuntime @*注入jsRuntime*@

@if(OpenCameraStatus) @*カメラが開いていないときはビデオを表示しません*@ {
< video id="@VideoId" width="@widht" height="@height" /> <canvas class="d-none " id="@CanvasId" width="@widht" height="@height" /> } < button @οnclick="" style="margin:8px">カメラを開く</button> @*カメラを開く必要があるためユーザー手動トリガーインターフェースがスライドして入る場合、カメラを開くメソッドを直接呼び出すことができないため、トリガーするボタンを追加します *@ <button style="margin:8px" >スクリーンショット</button> @*Take aビデオストリームの画像*@

@code{ プライベート文字列 CanvasId; プライベート文字列 ImgId; プライベート文字列ビデオID; private bool OpenCameraStatus; プライベート int 幅 = 320; プライベート int 高さ = 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"); Base.OnInitializedAsync() を待ちます。 }

private async Task Screenshot()
{ await JSRuntime.InvokeAsync<String>("setImgSrc", CanvasId,VideoId, ImgId, width, height); } } ```

次に、プログラムを実行して効果を確認します。

サンプルコード: [gitee](https://gitee.com/hejiale010426/main-sample) [github](https://github.com/239573049/main-sample)

トークンを持ってシェアしに来てください

技術交流グループ：737776595

Maui Blazor はカメラ実装を使用します

おすすめ