vue video重复视频 设置 srcObject 视频流不占用资源 减少资源浪费

 // 直接设置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);}
});

原视频流加载完成后，再复制流