Html 画布屏幕共享答案

【问题标题】：Html canvas screensharingHtml 画布屏幕共享
【发布时间】：2021-11-18 00:29:33
【问题描述】：

我有这段代码在视频标签和画布中播放我的相机视图，我如何编辑它以使其将我的屏幕（而不是我的相机视图）共享到该画布中。

这是我的 html 文件：

<html>
<head>
    <meta charset="UTF-8">
    <title>With canvas</title>
</head>
<body>
    <div class="booth">
        <video id="video" width="400" height="300" autoplay></video>
        <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
    </div>
    <script src="video.js"></script>
</body>

这里是js文件：

(function() {
var canvas= document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia ||
                     navigator.msGetUserMedia;

navigator.getMedia ({
    video: true,
    audio: false
}, function(stream) {
    //video.src = vendorUrl.createObjectURL(stream);
    if ('srcObject' in video) {
        video.srcObject = stream;
      } else {
        video.src = vendorUrl.createObjectURL(stream);
      }
    video.play();
}, function(error) {
    // An error occured
    //error.code
});


video.addEventListener('play', function() {
    setInterval(() => {
    draw(this, context, 400, 300);
    }, 100);

}, false );
function draw(video, context, width, height) {
    context.drawImage(video, 0, 0, width, height);
}

}) ();

请帮忙！

【问题讨论】：

标签： javascript html html5-canvas html5-video

【解决方案1】：

您必须多次绘制图像才能模拟视频，而不是一次。所以尝试添加setInterval 以每100ms

绘制帧

video.addEventListener('play', function() {
    draw(this, context, 400, 300);
}, false );

到

video.addEventListener('play', function() {
    setInterval(() => {
        draw(this, context, 400, 300);
    }, 100);
}, false );

【讨论】：

非常感谢@TAHER El Mehdi，你能看到问题编辑吗！
我接受了。你能帮我完成我所做的新编辑吗？ @TAHER El Mehdi
对不起，我不知道如何共享屏幕！