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

Question

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

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

我去工作流，我添加了从视频流中截取屏幕截图的代码，这也有效，但只有通过“js”按钮调用。 从使用的 Javascript 内部：

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

我想不通的地方是：

1。 我想通过 Blazor 的 JS-Interop 调用 js 函数，而不是通过 JavaScript 内部的 Eventlistener。但我无法为该调用获取正确的代码！？也许答案非常简单，而且是单行的。我对 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, 0, 0, width, height);
        context.filter = filter;
    }
    
    function takePic() {
        var context = canvas.getContext('2d');
        if (width && height) {
            canvas.width = width;
            canvas.height = height;
            context.drawImage(video, 0, 0, width, 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, 0, canvas.width, canvas.height);
    
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
    }
    
    window.WebCamFunctions = {
        start: (options) => { onStart(options); }
    };

对不起，代码墙

Answer 1

试试这个：

• 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>之前