网页共享电脑屏幕与播放(带声音)

news2024/12/23 5:30:24

这次项目我们是写的一个课堂辅助软件的网页版，其中有一个功能感觉能作为我们项目的一个亮点，就是直播功能，在之前并没有写过这个东西。虽然现在这个功能还不知道怎么写，但是它的流程终归是利用视频流将本地的视频给共享出去，然后把视频传给后端，后端处理后再返回给用户端，这样就需要前端知道怎么共享屏幕和声音了。
虽然官方文档中有共享屏幕的方法，但是它只有共享屏幕和获取摄像头的权限，并不能把声音给添加上去，只能通过另一种方式来操作，下面就看一下完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <video id="gum-local" autoplay playsinline muted controls></video>
        <button id="startButton" disabled>Start</button>
        <div id="errorMsg"></div>
    </div>
    <script>
        const startButton = document.getElementById('startButton');
        if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {
            console.log('支持');
            startButton.disabled = false;
        } else {
            console.log('不支持');
        }
        startButton.addEventListener('click', () => {
            navigator.mediaDevices.getDisplayMedia({
                video: {
                    mediaSource: 'screen'
                },
                audio: true
            })
                .then(handleSuccess, handleError);
        });

        async function handleSuccess(stream) {
            startButton.disabled = true;
            const video = document.querySelector('video');
            // 获取声音轨道
            const audioTrack = await navigator.mediaDevices.getUserMedia({ audio: true });
            // 添加声音轨道
            stream.addTrack(audioTrack.getAudioTracks()[0]);
            // 将视频在video标签中播放
            video.srcObject = stream;
            // 检测用户已停止共享屏幕
            // 通过浏览器UI共享屏幕。
            stream.getVideoTracks()[0].addEventListener('ended', () => {
                errorMsg('用户已结束共享屏幕');
                startButton.disabled = false;
            });
        }

        function handleError(error) {
            errorMsg(`getDisplayMedia error: ${error.name}`, error);
        }

        function errorMsg(msg, error) {
            const errorElement = document.querySelector('#errorMsg');
            errorElement.innerHTML += `<p>${msg}</p>`;
            if (typeof error !== 'undefined') {
                console.error(error);
            }
        }
    </script>
</body>

</html>

上边的代码是可以在任何浏览器端共享屏幕都有声音的，不过其中有一个方法不用添加音频轨道，浏览器会自动为我们添加，就是火狐浏览器，
上边这个指定共享屏幕类型是没有作用的
在这里插入图片描述
不过在火狐浏览器中使用getUserMedia方法可以生效，并且下边也不用去获取声音轨道并添加声音轨道了，即这两行代码不用写了