Html canvas 屏幕共享

Question

我有这段代码可以在视频标签中播放我的相机视图，也可以播放到 canvas，我如何编辑它以使其在 [=25] 中共享我的屏幕（而不是我的相机视图） =].

这是我的 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);
}

}) ();

求求你帮忙！

Answer 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 );

Html canvas 屏幕共享

Html canvas screensharing

html

javascript

html5-video

html5-canvas