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

原创已于 2023-02-14 09:10:08 修改 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webrtc #javascript

于 2022-09-29 16:35:42 首次发布

这篇博客介绍了如何使用HTML和JavaScript实现屏幕共享功能。通过在网页中添加视频元素和按钮，当用户点击按钮时，调用`startShard()`函数获取屏幕流。如果屏幕共享已开启，将显示提示，否则使用`navigator.mediaDevices.getDisplayMedia()`获取媒体流，并将流数据设置到视频元素。当屏幕共享结束时，会触发`onended`事件，停止所有相关轨道并清理资源。

效果图

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;
        }

    }