Javascript 铬胶_Javascript_Google Chrome Extension_Webrtc_Getusermedia

Javascript 铬胶

javascript google-chrome-extension webrtc

Javascript 铬胶,javascript,google-chrome-extension,webrtc,getusermedia,Javascript,Google Chrome Extension,Webrtc,Getusermedia,我正在做一个chrome扩展的小项目，它通过getUserMedia API显示本地流首先，由于我试图通过popup.js和background.js访问gum（getUserMedia），所以请求gum时遇到问题。经过一些测试，我让它在content.js中工作，但现在问题是在popup.html中实际显示流。进一步调查建议使用来自chrome的inbuild sendMessage（因为内容脚本无法访问弹出窗口）因此，我的工作流现在是弹出窗口上的onClick侦听器，在用户单击时向我的内

我正在做一个chrome扩展的小项目，它通过getUserMedia API显示本地流

首先，由于我试图通过popup.js和background.js访问gum（getUserMedia），所以请求gum时遇到问题。经过一些测试，我让它在content.js中工作，但现在问题是在popup.html中实际显示流。进一步调查建议使用来自chrome的inbuild sendMessage（因为内容脚本无法访问弹出窗口）

因此，我的工作流现在是弹出窗口上的onClick侦听器，在用户单击时向我的内容脚本发送通知，在那里请求gum，并从接收到的消息中执行回调函数，该消息在我的视频元素上设置流。现在的问题是，我的发送流通过sendMessage函数传输而改变，这导致在我的视频元素上设置流时出错，因为流不再是MediaStream对象

我的方法是试错法，因为我既不是网络开发者，也没有任何chrome扩展的经验。非常感谢您对我如何做到这一点的任何建议或帮助

--popup.js

let startStream = document.getElementById('gum');

function setStream(stream) {
  if(stream != null){
    video = document.getElementById('localStream');

    if("srcObject" in video) {
      console.log("videoelement supports scrObject.")
    }

    console.log('stream: ', stream)
    video.srcObject = stream;
  } else {
    console.log("popup: passed stream is not definded")
  }
}

startStream.onclick = function(element) {
  console.log("popup start stream clicked");
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, tabs => {
    chrome.tabs.sendMessage(
        tabs[0].id,
        {from: 'popup', action: 'startStream'},
        setStream);
  });
};

--popup.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <video controls id=localStream></video>
    <button id="gum">Start</button>
    <script src="popup.js"></script>
  </body>
</html>

--manifest.json

{
    "version": "1.0",
    "name": "Some test",
    "description": "Build an Extension!",
    "manifest_version": 2,
    "permissions": ["declarativeContent", "storage", "activeTab", "tabs"],

    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },

    "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle",
      "all_frames": false
    }],

    "browser_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/icon-off-16.png",
        "32": "images/icon-off-32.png",
        "48": "images/icon-off-48.png",
        "64": "images/icon-off-64.png",
        "128": "images/icon-off-128.png"
      },
      "default_title": "World Domination"
    },

    "icons": {
      "16": "images/icon-off-16.png",
      "32": "images/icon-off-32.png",
      "48": "images/icon-off-48.png",
      "64": "images/icon-off-64.png",
      "128": "images/icon-off-128.png"
    }
  }

{
“版本”：“1.0”，
“名称”：“一些测试”，
“说明”：“生成扩展！”，
“清单版本”：2，
“权限”：[“声明性内容”、“存储”、“活动选项卡”、“选项卡”]，
“背景”：{
“脚本”：[“background.js”]，
“持续”：假
},
“内容脚本”：[{
“匹配项”：[“”]，
“js”：[“content.js”]，
“运行时间”：“文件空闲”，
“所有帧”：false
}],
“浏览器操作”：{
“默认弹出窗口”：“popup.html”，
“默认_图标”：{
“16”：“images/icon-off-16.png”，
“32”：“images/icon-off-32.png”，
“48”：“images/icon-off-48.png”，
“64”：“images/icon-off-64.png”，
“128”：“images/icon-off-128.png”
},
“默认标题”：“世界主宰”
},
“图标”：{
“16”：“images/icon-off-16.png”，
“32”：“images/icon-off-32.png”，
“48”：“images/icon-off-48.png”，
“64”：“images/icon-off-64.png”，
“128”：“images/icon-off-128.png”
}
}

扩展消息只能发送简单的惰性JSON兼容数据，因此无法发送流。我能想到的唯一解决方案是在内容脚本中将数据流提取为

Blob

，调用URL.createObjectURL并将结果URL发送到弹出窗口，在弹出窗口中获取此URL或在DOM视频元素的

src

属性中使用它。或者只将blob作为

数据：

URI发送（应该小于64MB）。感谢您的说明和提示，我将尝试使用blob传输流。@MrNice-您找到解决问题的方法了吗？

{
    "version": "1.0",
    "name": "Some test",
    "description": "Build an Extension!",
    "manifest_version": 2,
    "permissions": ["declarativeContent", "storage", "activeTab", "tabs"],

    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },

    "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle",
      "all_frames": false
    }],

    "browser_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/icon-off-16.png",
        "32": "images/icon-off-32.png",
        "48": "images/icon-off-48.png",
        "64": "images/icon-off-64.png",
        "128": "images/icon-off-128.png"
      },
      "default_title": "World Domination"
    },

    "icons": {
      "16": "images/icon-off-16.png",
      "32": "images/icon-off-32.png",
      "48": "images/icon-off-48.png",
      "64": "images/icon-off-64.png",
      "128": "images/icon-off-128.png"
    }
  }