Chrome 无法在后台脚本和内容脚本中使用tabCapture API

bqjvbblv 于 2023-03-21 发布在 Go

关注(0)|答案(1)|浏览(161)

我正在构建一个chrome扩展来捕捉屏幕记录并编辑它们，我尝试使用chrome标签捕捉API来获取内容脚本或后台脚本中的视频流，但我收到了一个未定义的错误。我使用的是manifest版本3，我在manifest中设置了标签捕捉权限。这里是一个尝试在内容脚本中运行的示例。我还尝试将消息发送到popup.js，但一旦弹出窗口关闭，记录停止并返回错误：-

content-script.js
var recordButton = document.createElement("button");
    recordButton.innerHTML = "Record";
    chrome.runtime.sendMessage({message: "access_tabCapture_API"});
    
    // Add an event listener to the record button to start recording
    recordButton.addEventListener("click", function() {
      

      chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        if(request.message === "stream_object") {
          // Use the stream object received from the background script
          //var stream = request.stream;
          if(request.stream != undefined || request.stream != null) {
            console.log('yes, its working')
          } else {
            console.log('nothing there')
          }
         
        }
      });

background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.message === "access_tabCapture_API") {
      chrome.tabCapture.capture({audio: true, video: true}, function(stream) {
        // Once the tabCapture API is accessed, send the stream object back to the content script
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {message: "stream_object", stream: stream});
        });
      });
    }
  });

我收到错误：-事件处理程序中的错误：TypeError：无法读取chrome中未定义的属性（阅读“capture”）-......

google-chrome

来源：https://stackoverflow.com/questions/75754085/not-able-to-use-tabcapture-api-in-the-background-script-and-content-script

1条答案

按热度按时间

yvgpqqbh1#

下面是一个使用chrome.tabCapture.getMediaStreamId的示例。
manifest.json

{
  "name": "chrome.tabCapture",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "tabCapture"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "matches.js"
      ]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<html>
<body>
  <video id="video" src="" autoplay controls></video><br>
  <button id="stop">stop</button><br>
  <button id="play">play</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

let tabId;

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  tabId = tabs[0].id;

  chrome.tabCapture.getCapturedTabs((ci) => {
    if (!ci.some(e => e.tabId == tabId)) {
      chrome.tabCapture.getMediaStreamId({ consumerTabId: tabId }, (streamId) => {
        chrome.tabs.sendMessage(tabId, { command: "start", streamId: streamId });
      });
    }
  });
});

document.getElementById("stop").onclick = () => {
  chrome.tabs.sendMessage(tabId, { command: "stop" });
}

document.getElementById("play").onclick = () => {
  chrome.tabs.sendMessage(tabId, { command: "play" }, (url) => {
    document.getElementById("video").src = url;
  });
}

matches.js

let recorder;
let chunks;
let url;

const start = (streamId) => {
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: streamId
      }
    }
  })
    .then((stream) => {
      recorder = new MediaRecorder(stream);
      chunks = [];
      recorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
      recorder.onstop = (e) => {
        const blob = new Blob(chunks, { type: "video/ogg; codecs=opus" });
        url = URL.createObjectURL(blob);
      }
      recorder.start();
    });
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch (message.command) {
    case "start":
      start(message.streamId);
      break;
    case "stop":
      recorder.stop();
      break;
    case "play":
      sendResponse(url)
      break;
  }

  return true;
});

赞(0）回复(0）举报 2023-03-21

我来回答

Chrome 无法在后台脚本和内容脚本中使用tabCapture API

1条答案

相关问题

热门标签

最新问答