2022-07-29 23:18阅读: 164评论: 0推荐: 0

Web网页音视频通话之Webrtc相关操作（二）

效果图

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕共享</title>
</head>
<body>
<div id="container">
    <video id="video-local" autoplay playsinline></video>
    <button id="showVideo" onclick="startShard()">开始共享屏幕</button>
</div>
</body>
</html>

javaScript

   let videoEle = document.querySelector('video');
    /**
     * 开启屏幕共享
     * @returns {boolean}
     */
    function startShard() {
        if (window.stream != null) {
            alert('你已开启屏幕共享，请勿重复打开哦');
            return false;
        }
        const constraints = {
            audio: true,
            video: true
        };
        try {
            navigator.mediaDevices.getDisplayMedia(constraints).then(gotStream);
        } catch (err) {
            console.error(err)
        }
    }

    /**
     * 获取到流数据
     * @param stream
     */
    function gotStream(stream) {
        window.stream = stream;
        videoEle.srcObject = stream;
        //监听手动点击“停止分享”
        stream.getVideoTracks()[0].onended = () => {
            // 获取流中的所有轨道
            const tracks = stream.getTracks();
            tracks.forEach(function (track) {
                track.stop();
            });
            //监听以后的处理逻辑……
            alert('屏幕共享已关闭')
            videoEle.srcObject = null;
            window.stream = null;
        }

    }