webrtc之摄像头加麦克风实战！

用户6280468

发布于 2022-03-21 17:50:44

1.7K0

发布于 2022-03-21 17:50:44

文章被收录于专栏：txp玩Linux

前言：

大家周末好，今天给大家继续分享webrtc的文章，在上周分享的文章里面，介绍了如何打开本地摄像头来实时显示采集画面，不过当时代码是用js写的，不知道大家有没有看明白，感兴趣的朋友可以用vs把代码跑起来看看。

今天主要分享关于如何打开电脑的麦克风并在页面播放捕获到的声音，以及如何去除回音，同时演示视频和音频同时出现，也就是类似于腾讯会议那种实时会议画面，但是暂时还是不会很难！好了，那么直接开始今天的分享吧！

一、打开电脑麦克风：

还是先给出大体逻辑思维：

初始化button、audio控件
绑定“打开麦克风”响应时间onOpenMicrphone
如果打开麦克风则点击“打开麦克风”按钮，然后触发onOpenMicrophone事件的调用
当调用onOpenCamera调用时：
- 1、设置约束条件，也就是接口getUserMedia函数的传参
- 2、getUserMedia有两种情况，一种正常打开，另外一种情况就是打开失败，都有对应的接口实现处理
- 3、当正常打开麦克风时，则将getUserMedia返回的stream对象赋值给audio控件的srcObject就可以实现声音的播放了

下面是具体代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera</title>
    </head>
    <body>
        <audio id="local-audio" autoplay controls>播放麦克风捕获到的声音</audio>
        <button id="playaudio">请打开麦克风</button>
        <p>通过getUserMedia()获取声音</p>

        <script>
            //这个是音频和视频的约束条件，也就是是否要显示
            const constraints={
                audio: true,
                video: false
            };
            //成功打开麦克风接口处理
            function handleSuccess(stream){
                const audio=document.querySelector("#local-audio");
                audio.srcObject=stream;
            }
            //打开失败处理
            function handleError(error){
                console.error("getUserMedia error" + error);
            }
            //麦克风处理事件
            function onOpenMicrophone(e){
                navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
            }
            document.querySelector("#playaudio").addEventListener("click",onOpenMicrophone);
        </script>
    </body>
</html>

最终实现效果：

这个最终的效果，你可以随便说话，但是有很大的回音，体验效果不好，等下我们在和视频显示的时候一起处理！

打开摄像头和麦克风：

这个代码实现逻辑和上面差不多，只是将摄像头和麦克风结合在一起了，具体代码实现如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera</title>
    </head>
    <body>
        <video id="local-video" autoplay playsinline></video>
        <button id="showvideo">打开音视频</button>
        <div id="errorMsg"></div>
        <p>通过 <code>getUserMedia()</code> 获取音视频.</p>

        <script>
            //这个是音频和视频的约束条件，也就是是否要显示
            const constraints=(window.constraints = {
                audio: true,
                video: true
            });
            //成功打开麦克风接口处理
            function handleSuccess(stream){
                const video=document.querySelector("#local-video");
                video.srcObject=stream;
            }
            //打开失败处理
            function handleError(error){
                console.error("getUserMedia error" + error);
            }
            //麦克风处理事件
            async function onOpenAV(e){
                navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
            }
            document.querySelector("#showvideo").addEventListener("click",onOpenAV);
        </script>
    </body>
</html>

显示效果：

这里有回音，我们可以在video里面添加一个新的属性：muted，来把这个回音关闭掉：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera</title>
    </head>
    <body>
        <video id="local-video" autoplay playsinline muted controls></video>
        <button id="showvideo">打开音视频</button>
        <div id="errorMsg"></div>
        <p>通过 <code>getUserMedia()</code> 获取音视频.</p>

        <script>
            //这个是音频和视频的约束条件，也就是是否要显示
            const constraints=(window.constraints = {
                audio: true,
                video: true
            });
            //成功打开麦克风接口处理
            function handleSuccess(stream){
                const video=document.querySelector("#local-video");
                video.srcObject=stream;
            }
            //打开失败处理
            function handleError(error){
                console.error("getUserMedia error" + error);
            }
            //麦克风处理事件
            async function onOpenAV(e){
                navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
            }
            document.querySelector("#showvideo").addEventListener("click",onOpenAV);
        </script>
    </body>
</html>

最终效果如下：