iPhone 中的相机在 Blazor WASM 的 Web 浏览器中无法工作

Question

我们在 blazor WASM 中编写了以下代码，我们试图在网络浏览器上捕获用户的图像。

索引.razor

 <div class="v-canvas">
     <video id="videoFeed" width="320" height="240" />
     <canvas class="d-none" id="currentFrame" width="320" height="240" />
 </div>
  <button @onclick="CaptureFrame">
       <span>Capture</span>
   </button>


@code {
 protected override async Task OnInitializedAsync()
 {
     await JSRuntime.InvokeVoidAsync("startVideo", "videoFeed");

 }

 private async Task CaptureFrame()
 {
     await JSRuntime.InvokeAsync<String>("getFrame", "videoFeed", "currentFrame",DotNetObjectReference.Create(this));
 }

}

 [JSInvokable]
 public async Task ProcessImage(string imageString)
 {

    //Some logic

 }

Javascript代码

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.webkitMatchesSelector.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function (e) {
                video.play();
                video.webkitMatchesSelector.play();
                Play(src);
            };

            //mirror image
            video.style.webkitTransform = "scaleX(-1)";
            video.style.transform = "scaleX(-1)";
        });
    }
}


function getFrame(src, dest, dotNetHelper) {
    let video = document.getElementById(src);
    let canvas = document.getElementById(dest);
    canvas.getContext('2d').drawImage(video, 0, 0, 320, 240);

    let dataUrl = canvas.toDataURL("image/jpeg");
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}

以上解决方案已发布在IIS上，并在多设备上进行了测试。

这适用于 iPad、MacBook、Windows 笔记本电脑和 Android 手机。 对于 Safari/Chrome 中的 iPhone，即使授予相机权限后，视频也根本不会在浏览器中加载。

此代码的参考取自 - https://wellsb.com/csharp/aspnet/blazor-webcam-capture

Answer 1

找了好久才找到解决办法。

我必须在js文件的视频标签中添加以下属性。

    let video = document.getElementById(src);
    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');

希望这对其他人有帮助:)