时间戳

首页 > 解决方案 > Html 画布屏幕共享

javascript - Html 画布屏幕共享

问题描述

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

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

}) ();

请帮忙！

标签： javascripthtmlhtml5-canvashtml5-video

解决方案

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

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

至

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

推荐阅读