查看在Blazor Web Assembly PWA中捕获的图像

@page "/capture-image"

<button @onclick="CaptureImage">Capture Image</button>
<img src="@imageDataUrl" alt="Captured Image" />

@code {
    private string imageDataUrl;

    private async Task CaptureImage()
    {
        var mediaStream = await JSRuntime.InvokeAsync<MediaStream>("navigator.mediaDevices.getUserMedia", new { video = true });
        var videoElement = await JSRuntime.InvokeAsync<ElementReference>("createVideoElement", mediaStream);

        await JSRuntime.InvokeVoidAsync("playVideo", videoElement);

        var canvasElement = await JSRuntime.InvokeAsync<ElementReference>("createCanvasElement");
        var context = await JSRuntime.InvokeAsync<CanvasRenderingContext2D>("getContext2D", canvasElement);

        await JSRuntime.InvokeVoidAsync("drawVideoFrame", videoElement, context);

        imageDataUrl = await JSRuntime.InvokeAsync<string>("getCanvasDataUrl", canvasElement);

        await JSRuntime.InvokeVoidAsync("stopMediaStream", mediaStream);

        StateHasChanged();
    }
}