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

// 直接设置srcObject减少获取视频流:通过 captureStream() 方法从下方视频元素获取视频流。

// 设置 srcObject:将获取到的视频流设置为上方视频的 srcObject 减少资源浪费

javascript 复制代码
// 获取到需要复制到的dom元素   
const firstVideoElement = proxy.$refs.firstVideo;
// 获取需要复制的视频流元素
const activeVideoElement = proxy.$refs[`videoRefs${index}`][0];
// 赋值给需要显示的dom
firstVideoElement.srcObject = activeVideoElement.captureStream();
javascript 复制代码
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);
    }
});

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

相关推荐
掘金安东尼5 分钟前
🧭前端周刊第437期(2025年10月20日–10月26日)
前端·javascript·github
浩男孩10 分钟前
🍀【总结】使用 TS 封装几条开发过程中常使用的工具函数
前端
Mintopia16 分钟前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
晓得迷路了19 分钟前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
Mintopia20 分钟前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
GISer_Jing26 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞41 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多1 小时前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪1 小时前
CSS基础语法
前端
冰暮流星1 小时前
css之box-sizing属性
前端·javascript·css