WebRTC 从零学习笔记②-网页开启摄像头、麦克风

最新推荐文章于 2024-08-15 09:24:22 发布

揽昕

最新推荐文章于 2024-08-15 09:24:22 发布

阅读量405

点赞数 9

文章标签： websocket vue.js javascript 前端 node.js

本文链接：https://blog.csdn.net/m0_56772756/article/details/140817020

版权

WebRTC获取音视频代码流程：

初始化button、video控件
绑定"打开摄像头"响应事件onOpenCamera
如果要打开摄像头则点击“打开摄像头"按钮，以触发onOpenCamera事件的调用
当触发onOpenCamera调用时
1. 设置约束条件，即是getUserMedia函数的入参
2. getUserMedia有两种情况，一种是正常打开摄像头，使用handleSuccess处理;一种是打开摄像头失败，使用handleError 处理
3. 当正常打开摄像头时，则将getUserMedia返回的stream对象赋值给video控件的srcObject即可将视频显示出来

打开摄像头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- playsinline：只在这个vedio范围内出现视频，不会全屏展示    muted：不会出现自己的回音    -->
    <video src="" id="locaL-video" autoplay playsinline muted></video>
    <button id="showView"> 打开摄像头</button>
    <p>通过getUserMedia()获取视频</p>


    <script>
        const constraints = {
            audio:false,
            video:true
        }
        // 处理打开摄像头成功
        function handleSuccess(stream){
            const video = document.querySelector('#locaL-video')
            vedio.srcObject = stream
        }
        // 异常处理
        function handleError(error){
            console.log('getUserMedia error:' + error)
        }
        function onOpenCamera(e){
            navigator.mediaDevices.getUserMedia(constraints)
                .then(handleSuccess)
                .catch(handleError)
        }
        document.querySelector('#showView').addEventListener('click',onOpenCamera)
    </script>
</body>
</html>

打开麦克风

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <audio src="" id="local-audio" autoplay controls></audio>
    <button id="playAudio">打开麦克风</button>

    <p>通过getUserMedia()获取音频</p>

    <script>

        // 约束条件
        const constrains = {
            audio:true,
            veido:false
        }

        // 异常处理
        function handleError(error){
            console.log('getUserMedia error：'+error)
        }

        // 打开麦克风成功
        function handleSuccess(stream){
            const audio=document.querySelector('#local-audio')
            audio.srcObject=stream
        }

        function onOpenMicrophone(e){
            navigator.mediaDevices.getUserMedia(constrains).then(handleSuccess).catch(handleError)
        }

        document.querySelector('#playAudio').addEventListener('click',onOpenMicrophone)
    </script>
</body>
</html>

打开摄像头和麦克风

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- playsinline：只在这个vedio范围内出现视频，不会全屏展示    muted：不会出现自己的回音    -->
    <video src="" id="locaL-video" autoplay playsinline muted></video>
    <button id="showView"> 打开摄像头</button>
    <p>通过getUserMedia()获取音视频</p>


    <script>
        const constraints = {
            audio:true,
            // video:true
            // 修改视频窗口大小
            vedio:{width:320,height:240}
        }
        // 处理打开摄像头成功
        function handleSuccess(stream){
            const video = document.querySelector('#locaL-video')
            vedio.srcObject = stream
        }
        // 异常处理
        function handleError(error){
            console.log('getUserMedia error:' + error)
        }
        function onOpenCamera(e){
            navigator.mediaDevices.getUserMedia(constraints)
                .then(handleSuccess)
                .catch(handleError)
        }
        document.querySelector('#showView').addEventListener('click',onOpenCamera)
    </script>
</body>
</html>

揽昕

关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫