浏览器插件可以“mitm”本地网络摄像头吗？

Question

我想创建一个浏览器扩展，允许用户在任何使用 javascript web api 的站点上为他们的视频/音频流添加效果，而无需特殊插件。

谷歌搜索并不是特别有用，所以我开始怀疑这是否可能。

我在这里有两个主要问题：

1. javascript + chrome可以做到这一点吗？

2. 非常感谢任何指向其他资源的链接。

Answer 1

我不太喜欢网络扩展，所以甚至可能有一个更简单的 API 可用，我不会 go 详细介绍实现，但理论上你确实可以做到。

只需覆盖获取 MediaStream 的方法，将原始 MediaStream 绘制到 HTML canvas 即可应用过滤器，然后只需返回由 VideoTrack 制成的新 MediaStream来自 canvas 元素的captureStream()的 MediaStream，以及可能来自原始 MediaStream 的其他轨道。

gUM 的一个非常基本的概念证明实现可能如下所示：

// overrides getUserMedia so it applies an invert filter on the videoTrack
{
  const mediaDevices = navigator.mediaDevices;
  const original_gUM = mediaDevices.getUserMedia.bind(mediaDevices);
  
  mediaDevices.getUserMedia = async (...args) => {
    const original_stream = await original_gUM(...args);

    // no video track, no filter
    if( !original_stream.getVideoTracks().length ) {
      return original_stream;
    }

    // prepare our DOM elements
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const video = document.createElement('video');
    // a flag to know if we should keep drawing on the canvas or not
    let should_draw = true;

    // no need for audio there
    video.muted = true;
    // gUM video tracks can change size
    video.onresize = (evt) => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    };
    // in case users blocks the camera?
    video.onpause = (evt) => {
      should_draw = false;
    };
    video.onplaying = (evt) => {
      should_draw = true;
      drawVideoToCanvas();
    };
    
    video.srcObject = original_stream;
    
    await video.play();

    const canvas_track = canvas.captureStream().getVideoTracks()[0];
    const originalStop = canvas_track.stop.bind(canvas_track);
    // override the #stop method so we can revoke the camera stream
    canvas_track.stop = () => {
      originalStop();
      should_draw = false;
      original_stream.getVideoTracks()[0].stop();
    };

    // merge with audio tracks
    return new MediaStream( original_stream.getAudioTracks().concat( canvas_track ) );
    
    // the drawing loop
    function drawVideoToCanvas() {
      if(!should_draw) {
        return;
      }
      ctx.filter = "none";
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.filter = "invert(100%)";
      ctx.drawImage(video,0,0);
      requestAnimationFrame( drawVideoToCanvas );
    }

  };
}

然后每个调用这个方法的脚本都会收到一个过滤后的 videoTrack。

外包示例，因为 gUM 不是 StackSnippets 的朋友。

现在我不确定如何覆盖网络扩展中的方法，你必须自己学习，并且要注意这个脚本实际上只是一个概念证明，还没有准备好投入生产。 除了演示案例之外，我没有做任何处理。