向MediaStream添加水印图像

Question

是否有可能将图像添加到MediaStream对象，该对象将通过摄像头的视频流？但不是作为另一个层，而是像嵌入到流一样，所以如果我将流对象传递给某个对等点，它也会有那个嵌入的图像。

var constraints = { audio: true, video: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    var video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
}).catch(function(err) { console.log(err.name + ": " + err.message); });

如上所述，我只是将mediaStream直接传递给视频元素，但我是否可以操作流来添加一些文本或图像？

Answer 1

您必须使用画布操作视频流。

如果你的浏览器支持requestVideoFrameCallback，它应该是这样的：

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    let hiddenVideo = document.querySelector('video.hidden') // A video that is not displayed to the user 
    hiddenVideo.srcObject = mediaStream // Play the stream on the hidden video
    
    let canvas = document.querySelector('canvas'); // Get a canvas element, by creating or querying it (it may be hidden using 'display:none')
    let ctx = canvas.getContext('2d');
    let rVFC = () => {
        ctx.drawImage(hiddenVideo, 0, 0, hiddenVideo.videoWidth, hiddenVideo.videoHeight); // Draw the video image on your canvas
        // ... Manipulate your canvas here ...
        hiddenVideo.requestVideoFrameCallback(rVFC)
    }
    hiddenVideo.requestVideoFrameCallback(rVFC)
    
    var video = document.querySelector('video.shown');
    video.srcObject = canvas.captureStream(); // Display the canvas edit on the video
}).catch(function(err) { console.log(err.name + ": " + err.message); });

使用像这样的html

<video class="hidden" style="display:none" controls autoplay></video>
<video class="shown" controls autoplay></video>
<canvas style="display:none"></canvas>

备注

• 如果您不需要视频控件，则video元素无用，并且您只能使用经过处理的canvas来显示流。
• 如果您的浏览器不支持requestVideoFrameCallback，请使用requestAnimationFrame。有关requestVideoFrameCallback

的更多信息，请参见https://web.dev/requestvideoframecallback-rvfc/

要将编辑后的流发送给对等体，只需使用canvas.captureStream()创建的MediaStream

pc.addTrack(capturedStream.getVideoTracks()[0])