验证windows共享mediasource-优快云博客

本文链接：https://blog.youkuaiyun.com/dualvencsdn/article/details/149577231

本屏共享

新开窗口，或者放投屏里去

停止播放两边都熄了

再开始，两边都亮了

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享媒体源的多视频播放器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }

        .video-container {
            display: inline-block;
            margin: 10px;
            width: 30%;
            min-width: 300px;
        }

        video {
            width: 100%;
            max-width: 500px;
            background-color: #000;
            border-radius: 8px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1>三个视频共享同一个媒体源</h1>

    <button id="startBtn">开始播放</button>
    <button id="stopBtn" disabled>停止播放</button>
    <button id="openNewWindowBtn">新窗口播放</button>

    <div class="video-container">
        <h3>视频 1</h3>
        <video id="video1" autoplay muted></video>
    </div>

    <div class="video-container">
        <h3>视频 2</h3>
        <video id="video2" autoplay muted></video>
    </div>

    <div class="video-container">
        <h3>视频 3</h3>
        <video id="video3" autoplay muted></video>
    </div>

    <script>
        let mediaStream = null;
        let newWindow = null;
        document.getElementById('startBtn').addEventListener('click', async () => {
            try {
                // 获取媒体流（这里使用摄像头作为示例）

                // 在主窗口中定义 mediaStream 为全局变量
                mediaStream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: false
                });

                // 将其挂载到 window 上，以便新窗口访问
                window.mediaStream = mediaStream;
                // 将同一个媒体流设置给三个视频元素
                document.getElementById('video1').srcObject = mediaStream;
                document.getElementById('video2').srcObject = mediaStream;
                document.getElementById('video3').srcObject = mediaStream;

                // 更新按钮状态
                document.getElementById('startBtn').disabled = true;
                document.getElementById('stopBtn').disabled = false;

                newWindow?.postMessage({ type: 'mediaStream', stream: null }, '*');
                newWindow?.document.close();
            } catch (err) {
                console.error('获取媒体流失败:', err);
                alert('无法访问摄像头，请确保已授予权限。');
            }
        });

        document.getElementById('stopBtn').addEventListener('click', () => {
            // 停止所有轨道
            if (mediaStream) {
                mediaStream.getTracks().forEach(track => track.stop());
                mediaStream = null;
            }

            // 清空视频源
            document.getElementById('video1').srcObject = null;
            document.getElementById('video2').srcObject = null;
            document.getElementById('video3').srcObject = null;

            // 更新按钮状态
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
        });

        // 新窗口播放
        document.getElementById('openNewWindowBtn').addEventListener('click', () => {
            if (!mediaStream) {
                alert('请先开始播放以获取媒体流');
                return;
            }

            newWindow = window.open('', '_blank');

            const clonedStream = new MediaStream([...mediaStream.getTracks()]);



            // 创建新窗口的 HTML 内容
            newWindow.document.write(`
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <title>新窗口播放</title>
                <style>
                    body { text-align: center; margin-top: 50px; }
                    video { width: 80%; max-width: 600px; background-color: #000; border-radius: 8px; }
                </style>
            </head>
            <body>
                <h2>新窗口视频播放</h2>
                <video id="newVideo" autoplay muted></video>
                <script>
              // 新窗口中
                const videoElement = document.getElementById('newVideo');

                if (window.opener && window.opener.mediaStream) {
                    videoElement.srcObject = window.opener.mediaStream;
                    videoElement.play().catch(err => console.error('播放失败:', err));
                } else {
                    console.error('无法访问主窗口的 mediaStream');
                }
                    // 监听来自主窗口的消息
                window.addEventListener('message', (event) => { 
                    if (event.data.type === 'mediaStream') {
                       if (window.opener && window.opener.mediaStream) {
                    videoElement.srcObject = window.opener.mediaStream;
                    videoElement.play().catch(err => console.error('播放失败:', err));
                } else {
                    console.error('无法访问主窗口的 mediaStream');
                }
                    }
                }); 
                <\/script>
            </body>
            </html>
        `);
          
        });
    </script>
</body>

</html>

归档

https://gitlab.gbcom.com.cn/blocks/ui/-/blob/master/%E5%85%B1%E4%BA%ABmediasource%E7%9A%84%E5%AE%9E%E9%AA%8C.html

wvp同工程测试与验证

四个流，用同一个源放，只用了一个流的流量

handlePlaySuccess最后加一下

     const dom: any = document.getElementById("container"+i);
           console.log('我来赋值一下个视频流',i,dom.srcObject)
           state.containerRef[i].srcObject = dom.srcObject ;
           state.containerRef[i].play().then(()=>{
             console.log('播放成功')
           }).catch((err)=>{
             console.error('播放失败',err)
           })

console里让它显示一下

document.getElementById("container2").style.zIndex = "1000";

浏览器继续加码

 document.getElementById("container4").srcObject = document.getElementById("container3").srcObject;

document.getElementById("container4").style.zIndex = "1000";