如何在Blazor WebAssembly中配置后置摄像头权限？附步骤与代码

步骤1：编写JavaScript互操作函数 #

在wwwroot/js目录下创建camera.js文件，实现调用浏览器MediaDevices API获取后置摄像头流的逻辑：

window.cameraFunctions = {
    getRearCameraStream: async (videoElementId) => {
        try {
            // 配置约束，强制使用后置摄像头
            const constraints = {
                video: {
                    facingMode: { exact: 'environment' }
                }
            };
            // 请求摄像头权限并获取流
            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            const videoElement = document.getElementById(videoElementId);
            if (videoElement) {
                videoElement.srcObject = stream;
                await videoElement.play();
            }
            return true;
        } catch (error) {
            console.error('后置摄像头访问失败:', error);
            return false;
        }
    },
    stopCameraStream: (videoElementId) => {
        // 停止摄像头流并释放资源
        const videoElement = document.getElementById(videoElementId);
        if (videoElement && videoElement.srcObject) {
            const stream = videoElement.srcObject;
            stream.getTracks().forEach(track => track.stop());
            videoElement.srcObject = null;
        }
    }
};

步骤2：在Blazor组件中调用JS函数 #

创建或修改Blazor组件（例如RearCamera.razor），注入IJSRuntime来调用上述JS函数，并处理摄像头的启动/停止逻辑：

@page "/rearcamera"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<h3>后置摄像头预览</h3>

<video id="rearCameraVideo" width="640" height="480" autoplay playsinline></video>

<div style="margin-top:1rem;">
    <button @onclick="StartRearCamera" disabled="@isCameraActive">启动后置摄像头</button>
    <button @onclick="StopRearCamera" disabled="@!isCameraActive" style="margin-left:0.5rem;">停止摄像头</button>
</div>

<p style="color:red;" @if(string.IsNullOrEmpty(statusMessage)){ style="display:none;" }>@statusMessage</p>

@code {
    private bool isCameraActive;
    private string statusMessage = string.Empty;
    private const string VideoElementId = "rearCameraVideo";

    private async Task StartRearCamera()
    {
        isCameraActive = true;
        statusMessage = string.Empty;
        try
        {
            var success = await JSRuntime.InvokeAsync<bool>("cameraFunctions.getRearCameraStream", VideoElementId);
            statusMessage = success ? "后置摄像头已启动" : "无法访问后置摄像头，请检查设备权限或是否支持";
            if (!success) isCameraActive = false;
        }
        catch (Exception ex)
        {
            statusMessage = $"启动失败: {ex.Message}";
            isCameraActive = false;
        }
    }

    private async Task StopRearCamera()
    {
        await JSRuntime.InvokeVoidAsync("cameraFunctions.stopCameraStream", VideoElementId);
        isCameraActive = false;
        statusMessage = "后置摄像头已停止";
    }

    // 组件销毁时自动停止摄像头
    public async ValueTask DisposeAsync()
    {
        if (isCameraActive) await StopRearCamera();
    }
}

步骤3：引入JavaScript文件 #

在wwwroot/index.html的<body>标签末尾添加对camera.js的引用：

<script src="js/camera.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

关键注意事项 #

• 安全上下文要求：浏览器的getUserMedia API仅允许在HTTPS环境（localhost开发环境例外）下调用，部署时需确保站点使用HTTPS。
• 设备兼容性：部分设备可能没有后置摄像头，此时facingMode: { exact: 'environment' }会触发错误，若需要兼容无后置摄像头的设备，可将约束改为facingMode: 'environment'（无exact），此时浏览器会自动 fallback 到可用摄像头。
• 移动端优化：视频元素添加playsinline属性可避免在iOS等移动端设备上自动全屏播放。

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