如何在 Blazor WebAssembly 中授予后置摄像头访问权限

Question

我使用 blazor web assembly、asp.net core 和 JavaScript 函数开发了 Web 应用程序，到目前为止我提供了前置摄像头访问权限，现在我也想提供后置摄像头访问权限。

有关 Blazor Web 组件中后置摄像头的代码的步骤。

Answer 1

我使用Android 14进行测试，发现相机权限没有前后区分，所以你可以尝试使用下面的示例代码来检查一下。

我的测试链接（即将删除）

https://blazorapp320240722150954.azurewebsites.net/

我的测试代码

1。在

camera.js

文件夹下创建

wwwroot

。

async function startCamera(facingMode) {
    const constraints = {
        video: {
            facingMode: facingMode
        }
    };

    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.getElementById('video');
        videoElement.srcObject = stream;
        videoElement.play();
    } catch (error) {
        console.error("Error accessing camera: ", error);
    }
}

function startFrontCamera() {
    startCamera("user");
}

function startBackCamera() {
    startCamera("environment");
}

2。将

camera.js

导入

Index.html

。

3.创建一个

Camera.razor

文件。

@page "/camera"

<button @onclick="StartFrontCamera">Front-facing camera</button>
<button @onclick="StartBackCamera">Rear camera</button>

<video id="video" width="600" height="400" autoplay></video>

@code {
    [Inject]
    private IJSRuntime JS { get; set; }

    private async Task StartFrontCamera()
    {
        await JS.InvokeVoidAsync("startFrontCamera");
    }

    private async Task StartBackCamera()
    {
        await JS.InvokeVoidAsync("startBackCamera");
    }
}