如何从 Blazor 调用 javascript 函数并取回数据网络摄像头应用视频流并保存屏幕截图？

问题描述

如何从 Blazor 调用 javascript 函数并取回数据（网络摄像头-应用视频流并保存屏幕截图）？

嗨，我研究过使用 Blazor 和网络摄像头（目标 -> 来自浏览器中的 Cam 的视频流 // 截取流的屏幕截图 // 将屏幕截图保存为高清）。 My Source to start was this tutorial

我转到流开始工作，并添加了从视频流中截取屏幕截图的代码，这也可以，但前提是通过“js”按钮调用。从使用的 Javascript 内部：


    startbutton.addEventListener('click',function (ev) {
        takePic();
        ev.preventDefault();
    },false);

我想不通的地方是：

1. 我想通过 Blazor 的 JS-Interop 而不是通过 JavaScript 内部的 Eventlistener 调用 js 函数。但是我无法获得适合该呼叫的代码！？也许答案是超级简单和单线。我对 Javascript 的了解为零（这就是为什么我（必须）使用 Blazor :) ）

2. 如何从 js 获取图像数据发送回 Blazor 到一个字节[]。

我的代码 Blazor/RazorPage：


    @page "/"
    @*https://www.youtube.com/watch?v=5Uth1wXRil4*@

    @using Data

    @inject IJSRuntime JSRuntime
    <h1>Fun Blazor Web Camera Application</h1>
    <div>
        <canvas id="@options.CanvasID"
                style="background-color:lightgray;"
                width="@options.Width"
                height="360">
        </canvas>
    </div>
    <div>
        <button @onclick="Start">Start</button>
    </div>
    
    <div>
        <video id="@options.VideoID"
               style="background-color:white ; visibility:hidden;"
               width="@options.Width">
            Video stream not available.
        </video>
    </div>
    
    <div class="output"> 
        <img id="photo" alt="The screen capture will appear in this Box.">
    </div>
    
    <canvas id="canvasPic"></canvas>
    
    @*JS Button*@
    <button id="startbutton" class="btn btn-primary">TakePic JS Event</button>
    
    @*Blazor Button*@
    <button class="btn btn-primary" @onclick="TakePicBzBtn">TakePic BZ Btn</button>
    
    @code{
        WebCamOptions options = new WebCamOptions()
        {
            CanvasID = "canvas",VideoID = "video"
        };
    
        protected override void OnInitialized()
        {
            options.Filter = "contrast(1.4) sepia(0.2) blur(0px) saturate(100%) hue- 
        rotate(0deg)";
            options.Width = 480;
        }
    
        public async Task Start()
        {
            await JSRuntime.InvokeVoidAsync("WebCamFunctions.start",options);
        }
    
        public async Task TakePicBzBtn()
        {
            await JSRuntime.InvokeVoidAsync("takePic");
        }
    }

我得到的错误

公共异步任务 TakePicBzBtn()

在浏览器控制台中：

blazor.server.js:21 [2021-06-04T15:44:42.954Z] 错误：Microsoft.JSInterop.JSException：找不到“takePic”（“takePic”未定义）。错误：找不到“takePic”（“takePic”未定义）。

我几乎复制/粘贴代码 JS：


    let video = null;
    let canvas = null; 
    let context = null;
    let streaming = false;
    let width = 100;    // We will scale the photo width to this.
    let height = 0;     // This will be computed based on the input stream
    let filter = 'sepia(1)';
    let photo = null;
    let startbutton = null;
    
    function onStart(options) {
        video = document.getElementById(options.videoID);
        canvas = document.getElementById(options.canvasID);
        startbutton = document.getElementById('startbutton');
        photo = document.getElementById('photo');
        context = canvas.getContext('2d');
        width = options.width;
        filter = options.filter;
     
        navigator.mediaDevices.getUserMedia({ video: true,audio: false })
            .then(function (stream) {
                video.srcObject = stream;
                video.play();
            })
            .catch(function (err) {
                console.log("An error occurred: " + err);
            });
        video.addEventListener('canplay',function () {
            if (!streaming) {
                height = video.videoHeight / (video.videoWidth / width);
                if (isNaN(height)) {
                    height = width / (4 / 3);
                }
                video.setAttribute('width',width);
                video.setAttribute('height',height);
                canvas.setAttribute('width',width);
                canvas.setAttribute('height',height);
                streaming = true;
            }
        },false);
        video.addEventListener("play",function () {
            console.log('play');
            timercallback();
        },false);
        startbutton.addEventListener('click',function (ev) {
            takePic();
            ev.preventDefault();
        },false);
        clearphoto();
    }
    function timercallback() {
        if (video.paused || video.ended) {
            return;
        }
        computeFrame();
        setTimeout(function () {
            timercallback();
        },0);
    }
    function computeFrame() {
        context.drawImage(video,width,height);
        context.filter = filter;
    }
    
    function takePic() {
        var context = canvas.getContext('2d');
        if (width && height) {
            canvas.width = width;
            canvas.height = height;
            context.drawImage(video,height);
    
            var data = canvas.toDataURL('image/png');
            photo.setAttribute('src',data);
        } else {
            clearphoto();
        }
    }
    
    function clearphoto() {
        var context = canvas.getContext('2d');
        context.fillStyle = "#AAA";
        context.fillRect(0,canvas.width,canvas.height);
    
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src',data);
    }
    
    window.WebCamFunctions = {
        start: (options) => { onStart(options); }
    };

对不起代码墙

解决方法

试试这个：

1：在 ../wwwroot/js 中创建新的 JavaScript 文件（我们称之为 webcam.js）

In your Project

2：不要忘记在 ../wwwroot/index.html 中添加指向 JavaScript 文件的链接。

In your index.html file

请记住：标记 <script src="_framework/blazor.webassembly.js"></script> 之前的脚本文件

blazor blazor-jsinterop webcam