猴子在WebExtension中打补丁getUserMedia？

Question

我想做的事情。

第一个问题，抱歉有任何错误。

基本上我想做的是为摄像头实现过滤器，这样如果你打开了摄像头，和你一起参加视频会议的所有人都能看到。我的第一个想法是使用CSS滤镜，事后看来这是愚蠢的，因为它不会被所有人看到。

然后我做了一些研究(比如google)，发现了一个类似的WebExtension，ZomboCam，(我在crxviewer上看到了它的源头)，它基本上截取了 mediaStream，对其进行编辑，并将编辑的 mediaStream 作为你的摄像头的来源。我看了看它 源头并发现，它猴子补丁（或者是猴子补丁）的。getUserMedia() 功能。在源头。

var originalMediaDevicesGetUserMedia = navigator.mediaDevices.getUserMedia;
if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia = function getUserMedia(constraints) {
          return new Promise(function (resolve, reject) {
            originalMediaDevicesGetUserMedia.bind(navigator.mediaDevices)(constraints).then(function (stream) {
              return resolve(enhance(stream));
            }).catch(reject);
          });
        };
      }

该 enhance() 函数的工作原理是 mediaStream 作为参数传递给它。

我尝试了什么。

我做了猴子补丁的代码在 content script 的WebExtension，如果这有帮助的话。

我试着像这样在一个有一个 video 元素来显示网络摄像头。它达到了 Video devices found!但不能再进一步了。

change() 将我的函数工作在mediaStream上(有什么有用的提示吗?)，但它现在什么也没做。

const OGgum =  navigator.mediaDevices.getUserMedia;
    if(navigator.mediaDevices.getUserMedia){
        console.log('Video devices found!');
        navigator.mediaDevices.getUserMedia = (constraints) => {
            OGgum(constraints).then((stream)=> {
              console.log('gum Patched🎉');
              video.srcObject = change(stream);
            })
            .catch((error)=>{
              console.log('This Went wrong: '+error);
            })
          }
    }
    const change = (st) => {
      return st;
    }

在失望之余，我试着打了一个小补丁。console.log() 在 content script 的webextension，在每条日志前添加一些文本，就像这样。

const OGlog = console.log;
console.log = (params) => {
  OGlog('🥳 PATCHING: '+params);
}

console.log('Testing');

Outputs:

🥳 PATCHING: Testing

这工作，但只有 console.log() 在内容脚本的内部。我如何让它在每个页面都能工作？意思是，假设我做了一个 console.log()我希望它有 🥳 PATCHING 在前面。

我想如果我设法让 console.log() 的工作，我大概可以在 getUserMedia() 自己。

相关阅读

我在这里遗漏了什么？另外，如果你有其他的方法来完成这个任务，请分享一下。谢谢！我想做什么？

Answer 1

在Firefox中，你应该使用 wrappedJSObject 访问页面上下文和 exportFunction 将您的代码暴露在页面上下文中。更多关于MDN的信息。与页面脚本共享对象.

const pWindow = window.wrappedJSObject;
const pMediaDevices = pWindow.navigator.mediaDevices;
const pGUM = pMediaDevices.getUserMedia;
const myGUM = (...args) =>
  pGUM.apply(pMediaDevices, args).then(stream => {
    // .........
    return stream;
  });
pMediaDevices.getUserMedia = exportFunction(myGUM, pWindow);

如果你认为这很复杂，在ChromeChromium浏览器中，它是。更糟.