网站数据没有更新,网站制作过程简介,360极速浏览器网站开发缓存,电商网站开发背景怎么写// 直接设置srcObject减少获取视频流#xff1a;通过 captureStream() 方法从下方视频元素获取视频流。 // 设置 srcObject#xff1a;将获取到的视频流设置为上方视频的 srcObject 减少资源浪费 // 获取到需要复制到的dom元素
const firstVideoElement proxy.$refs.firs… // 直接设置srcObject减少获取视频流通过 captureStream() 方法从下方视频元素获取视频流。 // 设置 srcObject将获取到的视频流设置为上方视频的 srcObject 减少资源浪费 // 获取到需要复制到的dom元素
const firstVideoElement proxy.$refs.firstVideo;
// 获取需要复制的视频流元素
const activeVideoElement proxy.$refs[videoRefs${index}][0];
// 赋值给需要显示的dom
firstVideoElement.srcObject activeVideoElement.captureStream();
onMounted(async () {try {const { data } await getCameraInfo(props.id);if (!data) return;// console.log(视频监控, data);streams.value data;if (streams.value streams.value.length 0) {await nextTick();streams.value.forEach((stream, index) {let videoElement proxy.$refs[videoRefs index][0]; // 通过 ref 获取视频元素const webRtcServer new WebRtcStreamer(videoElement, url);webRtcServer.connect(stream.rtspVideoUrl);webRtcServers.value.push(webRtcServer); // 存储 WebRtcStreamer 实例});// 监听 loadedmetadata 事件proxy.$refs[videoRefs0][0].addEventListener(loadedmetadata, () {const firstVideoElement proxy.$refs.firstVideo;const activeVideoElement proxy.$refs[videoRefs0][playNum.value];firstVideoElement.srcObject activeVideoElement.captureStream();});// nextTick(() {// // 默认加载第一个视频// const firstVideoElement proxy.$refs.firstVideo;// // const firstWebRtcServer new WebRtcStreamer(firstVideoElement, url);// // firstWebRtcServer.connect(streams.value[playNum.value].rtspVideoUrl);// // webRtcServers.value.push(firstWebRtcServer);// const activeVideoElement proxy.$refs[videoRefs${index}][0];// firstVideoElement.srcObject activeVideoElement.captureStream();// });}} catch (error) {console.error(Failed to fetch camera info:, error);}
});
原视频流加载完成后再复制流
