js 大佬进，如何使用视频流来重写 navigator.mediaDevices.getUserMedia

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1046 天前的主题，其中的信息可能已经有所发展或是发生改变。

想实现的功能，写一个扩展，将 navigator.mediaDevices.getUserMedia 获取摄像头，改为视频流输入，网上找到代码
await page.evaluate(() => {
const video = document.createElement("video");

video.setAttribute('id', 'video-mock');
video.setAttribute("src", 'https://woolyss.com/f/spring-vp9-vorbis.webm');
video.setAttribute("crossorigin", "anonymous");
video.setAttribute("controls", "");

video.Oncanplay= () => {
const stream = video.captureStream();

navigator.mediaDevices.getUserMedia = () => Promise.resolve(stream);
};

document.querySelector("body").appendChild(video);
});

但是没有成功

3 条回复 2023-06-14 16:40:35 +08:00

jifengg

2023 年 6 月 14 日

不清楚具体原理，不过，你的 navigator.mediaDevices.getUserMedia 覆写是在 video canplay 之后，是否这期间其他 js 代码已经调用 navigator.mediaDevices.getUserMedia 了呢？

NouveauNom

2023 年 6 月 14 日

@jifengg 把代码改为
<!DOCTYPE html>
<html>
<head>
<title>摄像头实时预览</title>
<style>
#video-preview {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video id="video-preview" autoplay></video>

<video id="video-preview2" autoplay></video>

<div id="container"></div>
<button Onclick="click2()"> click2</button>
<script>
// 获取视频流
let video;
async function playVideo(url) {

video = document.createElement("video");
video.setAttribute('id', 'video-mock');
video.setAttribute("src", url);
// video.setAttribute("crossorigin", "anonymous");
// video.setAttribute("controls", "");

video.Oncanplay= async () => {

};

video.Onplay= async () => {
const stream = video.captureStream();
navigator.mediaDevices.getUserMedia = () => Promise.resolve(stream);

};

videoCreated = true;
}

// 在页面中创建一个按钮，并绑定点击事件
const playButton = document.createElement('button');
playButton.textCOntent= '点击播放视频';
playButton.addEventListener('click', startVideoPlayback);

// 将按钮添加到页面中的某个元素上
const cOntainer= document.getElementById('container');
container.appendChild(playButton);
playVideo("test.mp4");
// 用户点击按钮后调用此函数
function startVideoPlayback() {
video.play();

}

function click2()
{
// 获取视频流
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream2) {
var videoElement = document.getElementById('video-preview2');
videoElement.srcObject = stream2;
})
.catch(function(error) {
console.error('访问摄像头失败:', error);
});
}
</script>
</body>
</html>

似乎 Chrome ，只是似乎可用，safari 直接报错了

NouveauNom

2023 年 6 月 14 日

已经实现此功能，此贴结束。