如何解决记录并停止已经运行的网络摄像头/媒体流
我创建了一个最小的WebRTC测试站点,该站点能够请求用户的网络摄像头/音频流,对其进行记录并在停止后回放该记录。
演示:https://output.jsbin.com/tabosipefo/
编辑 1 :https://jsbin.com/tabosipefo/edit?html,output
由于这一切都发生在一个Promise navigator.mediaDevices.getUserMedia()
中,所以我想知道,是否真的有可能检测到正在进行的流并(a)记录它,以及(b)停止并保存它。
1 由于某种原因,WebRTC在编辑视图中无法在jsbin中工作...
解决方法
如果您不使用框架,而是想使用普通JS,则最好的步骤是将流对象附加到全局窗口。
预览流
const showWebcamStream = () => {
navigator.mediaDevices
.getUserMedia({ audio: true,video: true })
.then(stream => {
window.localStream = stream; // ⭠ tack it to the window object
// grab the <video> object
const video = document.querySelector("#video-preview");
video.srcObject = stream;
// Display stream
video.onloadedmetadata = () => video.play();
})
.catch(err => console.log(err.name,err.message));
};
现在,视频将显示在video
元素(id:#videp-preview
)中。
停止流
const hideWebcamStream = () => localStream.getTracks().forEach(track => track.stop());
您应该将mediaRecorder放在窗口对象中,以便稍后将其停止。
记录流
const startWebcamRecorder = () => {
// check if localStream is in window and if it is active
if ("localStream" in window && localStream.active) {
// save the mediaRecorder also to Window in order independently stop it
window.mediaRecorder = new MediaRecorder(localStream);
window.dataChunks = [];
mediaRecorder.start();
console.log(mediaRecorder.state);
mediaRecorder.ondataavailable = e => dataChunks.push(e.data);
}
};
停止记录并预览记录
您需要另一个视频元素来播放录制的#video-playback
const stopWebcamRecorder = () => {
if ("mediaRecorder" in window && mediaRecorder.state === "recording") {
mediaRecorder.stop();
console.log(mediaRecorder.state);
mediaRecorder.onstop = () => {
let blob = new Blob(dataChunks,{ type: "video/mp4;" });
dataChunks = [];
let videoURL = window.URL.createObjectURL(blob);
const videoPlayback = document.getElementById("video-playback");
videoPlayback.src = videoURL;
};
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。