webrtc学习笔记2

音视频采集和播放

打开摄像头并将画面显示到页面

复制代码
1. 初始化button、video控件
2. 绑定"打开摄像头"响应事件onOpenCamera
3. 如果要打开摄像头则点击 "打开摄像头"按钮,以触发onOpenCamera事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件,即是getUserMedia函数的入参
b. getUserMedia有两种情况,一种是正常打开摄像头,使用handleSuccess处理;一种是打开摄像头失败,使
用handleError处理
c. 当正常打开摄像头时,则将getUserMedia返回的stream对象赋值给video控件的srcObject即可将视频显示出
来
js 复制代码
<!DOCTYPE html>
<html >
    <body >
        <video id="local-video" autoplay playsinline></video>
        <button id="showVideo" >打开摄像头</button>
        <p>通过getUserMedia()获取视频</p>
    </body>
    <script >
        const constraints = {
            audio: false,
            video: true
        };

        // 处理打开摄像头成功
        function handleSuccess(stream) {
            const video = document.querySelector("#local-video");
            video.srcObject = stream;
        }

        // 异常处理
        function handleError(error) {
            console.error("getUserMedia error: " + error);
        }

        function onOpenCamera(e) {
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }
        document.querySelector("#showVideo").addEventListener("click", onOpenCamera);
    </script>
</html>

打开麦克风并在页面播放捕获的声音

复制代码
1. 初始化button、audio控件
2. 绑定"打开麦克风"响应事件onOpenMicrophone
3. 如果要打开麦克风则点击 "打开麦克风"按钮,以触发onOpenMicrophone事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件,即是getUserMedia函数的入参
b. getUserMedia有两种情况,一种是正常打开麦克风,使用handleSuccess处理;一种是打开麦克风失败,使
用handleError处理
c. 当正常打开麦克风时,则将getUserMedia返回的stream对象赋值给audio控件的srcObject即可将声音播放出
来
js 复制代码
<!DOCTYPE html>

<html>
    <body>
        <audio id="local‐audio" autoplay controls>播放麦克风捕获的声音</audio>
        <button id="playAudio">打开麦克风</button>
        <p>通过getUserMedia()获取音频</p>


    </body>  
    <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 onOpenMicro(e) {
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }
        document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone);
    </script>  

</html>

打开摄像头和麦克风

主要区别是

js 复制代码
const constraints = (window.constraints = {
                audio: true,
                video: true
            });
js 复制代码
<!DOCTYPE html>
<html>
    <body>
        //muted消除回声
        <video id="local‐video" autoplay playsinline muted></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>
相关推荐
逆小舟1 天前
【C/C++】指针
c语言·c++·笔记·学习
武文斌771 天前
项目学习总结:LVGL图形参数动态变化、开发板的GDB调试、sqlite3移植、MQTT协议、心跳包
linux·开发语言·网络·arm开发·数据库·嵌入式硬件·学习
递归不收敛1 天前
吴恩达机器学习课程(PyTorch适配)学习笔记:1.3 特征工程与模型优化
pytorch·学习·机器学习
kunge1v51 天前
学习爬虫第四天:多任务爬虫
爬虫·python·学习·beautifulsoup
哲Zheᗜe༘1 天前
了解学习MySQL数据库基础
数据库·学习·mysql
peter67681 天前
pandas学习小结
学习·pandas
机器视觉知识推荐、就业指导1 天前
STM32 外设驱动模块【含代码】:SG90 舵机模块
stm32·单片机·嵌入式硬件·学习
暴富奥利奥1 天前
完成docker方式的ros环境配置
linux·学习·docker·容器
总有刁民想爱朕ha1 天前
AI大模型学习(17)python-flask AI大模型和图片处理工具的从一张图到多平台适配的简单方法
人工智能·python·学习·电商图片处理
Cathy Bryant1 天前
球极平面投影
经验分享·笔记·数学建模