iPhone浏览器中Blazor WASM摄像头视频无法加载问题求助

问题描述 #

我们基于Blazor WASM开发了网页端图像捕获功能，代码包含Index.razor和JavaScript逻辑，已部署至IIS。在iPad、MacBook、Windows笔记本及安卓手机上均运行正常，但在iPhone的Safari/Chrome浏览器中，即使授予摄像头权限，视频完全无法加载。

问题根源 #

iPhone的WebKit内核（包括Safari和基于它的Chrome）有严格的媒体播放限制：

1. 媒体设备访问与视频播放必须由用户主动交互触发（不能在页面初始化时自动执行）
2. 原代码中存在错误的API调用（video.webkitMatchesSelector是选择器匹配方法，被错误当作元素属性使用）
3. 缺少适配iOS设备的视频约束配置
4. 无错误处理逻辑，无法定位具体失败原因

修复代码 #

调整后的Index.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="StartCamera">启动摄像头</button>
<button @onclick="CaptureFrame" disabled="@(!isCameraActive)">
    <span>捕获图像</span>
</button>

@code {
    private bool isCameraActive = false;

    private async Task StartCamera()
    {
        await JSRuntime.InvokeVoidAsync("startVideo", "videoFeed");
        isCameraActive = true;
    }

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

    [JSInvokable]
    public async Task ProcessImage(string imageString)
    {
        // 你的业务逻辑
    }
}

修复后的JavaScript代码 #

async function startVideo(src) {
    try {
        if (!navigator.mediaDevices?.getUserMedia) {
            throw new Error("当前浏览器不支持摄像头访问");
        }

        // 配置适配iOS的视频约束
        const constraints = {
            video: {
                facingMode: "user", // 使用前置摄像头
                width: { ideal: 320 },
                height: { ideal: 240 }
            }
        };

        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const video = document.getElementById(src);
        
        // 优先使用标准的srcObject属性
        video.srcObject = stream;
        
        video.onloadedmetadata = async () => {
            try {
                // iOS需要明确调用play，且需处理异步返回
                await video.play();
            } catch (playErr) {
                console.error("视频播放失败:", playErr);
                alert("无法启动视频预览，请检查摄像头权限");
            }
        };

        // 保持镜像效果
        video.style.webkitTransform = "scaleX(-1)";
        video.style.transform = "scaleX(-1)";
    } catch (initErr) {
        console.error("摄像头初始化失败:", initErr);
        alert("摄像头访问失败：" + initErr.message);
    }
}

function getFrame(src, dest, dotNetHelper) {
    const video = document.getElementById(src);
    const canvas = document.getElementById(dest);
    const ctx = canvas.getContext('2d');
    
    // 确保视频已完全加载再捕获帧
    if (video.readyState === 4) {
        ctx.drawImage(video, 0, 0, 320, 240);
        const dataUrl = canvas.toDataURL("image/jpeg");
        dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
    } else {
        console.warn("视频未准备完成，无法捕获图像");
    }
}

额外注意事项 #

• HTTPS要求：iOS要求媒体设备访问必须在HTTPS环境下（localhost调试除外），部署IIS时需配置SSL证书
• 权限监听：可通过navigator.permissions.query({ name: 'camera' })监听权限状态变化，处理用户后续修改权限的情况
• Chrome for iOS适配：该浏览器基于WebKit内核，与Safari限制一致，无需额外适配

内容的提问来源于stack exchange，提问作者raw_hitt