如果媒体流是您想要的一种方法是覆盖浏览器的 PeerConnection。这是一个例子:
在扩展清单中添加以下内容脚本:
content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["payload/inject.js"],
"all_frames": true,
"match_about_blank": true,
"run_at": "document_start"
}
]
注入.js
var inject = '('+function() {
//overide the browser's default RTCPeerConnection.
var origPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
//make sure it is supported
if (origPeerConnection) {
//our own RTCPeerConnection
var newPeerConnection = function(config, constraints) {
console.log('PeerConnection created with config', config);
//proxy the orginal peer connection
var pc = new origPeerConnection(config, constraints);
//store the old addStream
var oldAddStream = pc.addStream;
//addStream is called when a local stream is added.
//arguments[0] is a local media stream
pc.addStream = function() {
console.log("our add stream called!")
//our mediaStream object
console.dir(arguments[0])
return oldAddStream.apply(this, arguments);
}
//ontrack is called when a remote track is added.
//the media stream(s) are located in event.streams
pc.ontrack = function(event) {
console.log("ontrack got a track")
console.dir(event);
}
window.ourPC = pc;
return pc;
};
['RTCPeerConnection', 'webkitRTCPeerConnection', 'mozRTCPeerConnection'].forEach(function(obj) {
// Override objects if they exist in the window object
if (window.hasOwnProperty(obj)) {
window[obj] = newPeerConnection;
// Copy the static methods
Object.keys(origPeerConnection).forEach(function(x){
window[obj][x] = origPeerConnection[x];
})
window[obj].prototype = origPeerConnection.prototype;
}
});
}
}+')();';
var script = document.createElement('script');
script.textContent = inject;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
我在 google hangouts 中通过语音通话对此进行了测试,发现两个 mediaStream 是通过 pc.addStream 添加的,一个轨道是通过 pc.ontrack 添加的。addStream 似乎是本地媒体流,而 ontrack 中的事件对象是具有流对象的 RTCTrackEvent。我认为这是您正在寻找的。
要从扩展的内容脚本访问这些流,您需要创建音频元素并将“srcObject”属性设置为媒体流:例如
pc.ontrack = function(event) {
//check if our element exists
var elm = document.getElementById("remoteStream");
if(elm == null) {
//create an audio element
elm = document.createElement("audio");
elm.id = "remoteStream";
}
//set the srcObject to our stream. not sure if you need to clone it
elm.srcObject = event.streams[0].clone();
//write the elment to the body
document.body.appendChild(elm);
//fire a custom event so our content script knows the stream is available.
// you could pass the id in the "detail" object. for example:
//CustomEvent("remoteStreamAdded", {"detail":{"id":"audio_element_id"}})
//then access if via e.detail.id in your event listener.
var e = CustomEvent("remoteStreamAdded");
window.dispatchEvent(e);
}
然后在您的内容脚本中,您可以侦听该事件/访问媒体流,如下所示:
window.addEventListener("remoteStreamAdded", function(e) {
elm = document.getElementById("remoteStream");
var stream = elm.captureStream();
})
使用内容脚本可用的捕获流,您几乎可以用它做任何您想做的事情。例如,MediaRecorder 非常适合记录流,或者您可以使用 peer.js 或 binary.js 之类的东西来流式传输到另一个源。
我没有对此进行测试,但也应该可以覆盖本地流。例如,在 inject.js 中,您可以建立一些空白媒体流,覆盖 navigator.mediaDevices.getUserMedia,而不是返回本地媒体流,而是返回您自己的媒体流。
假设您使用扩展程序/应用程序在文档开头加载 inject.js 脚本,此方法应该可以在 firefox 和其他人中使用。在任何目标库之前加载它是完成这项工作的关键。
编辑以获取更多详细信息
编辑以获得更多细节