WebRTC

最后更新于:2022-04-01 23:54:38

                        ## WebRTC

WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API。

1、getUserMedia

要播放摄像头的影像,首先需要一个video标签:

<video id="video"></video>

获取摄像头影像主要是通过navigator.getUserMedia这个接口,这个接口的支持情况已经逐渐变好了(点击这里),不过,使用的时候还是要加上前缀的。

兼容代码:

navigator.getUserMedia =  navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

语法:

navigator.getUserMedia(constraints, successCallback, errorCallback);

参数说明:

  • constraints:Object类型,指定了请求使用媒体的类型
  • succeCallback:启用成功时的函数,它传入一个参数,为视频流对象,可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。
  • errorCallback:启动失败时的函数。它传入一个参数,为错误对象(chrome)或错误信息字符串(Firefox),可能值:
    PERMISSION_DENIED:用户拒绝提供信息。
    NOT_SUPPORTED_ERROR:浏览器不支持硬件设备。
    MANDATORY_UNSATISFIED_ERROR:无法发现指定的硬件设备。
    

例如要启用视频设备(摄像头),可这样:

navigator.getUserMedia({
  video: true
});

如果要同时启用视频设备和音频设备,可这样:

navigator.getUserMedia({
  video: true,
  audio: true
});

1.1 获取摄像头完整实例



    
        <meta charset="UTF-8">
        <title></title>
    
    
        <video id="video" width="400" height="300"></video>
        <button id="live">直播</button>
    <script>
        var video = document.getElementById('video');

        function liveVideo(){
          // 获取到window.URL对象
          var URL = window.URL || window.webkitURL;
          navigator.getUserMedia({
            video: true
          }, function(stream){
            video.src = URL.createObjectURL(stream);
            video.play();
          }, function(error){
            console.log(error.name || error);
          });
        }
        document.getElementById("live").addEventListener('click',function(){
            liveVideo();
        })
    </script>
    

当点击直播按钮时,电脑会提升用户是否允许使用摄像头,允许之后,网页上就可以实时显示摄像头影像了。如果不允许,就会触发错误事件。

1.1.1 截图

除了实时直播外,我们还可以做实时截图效果,这时我们需要利用<canvas>元素来画图,代码如下:




    
        <meta charset="UTF-8">
        <title></title>
        <style>
            #canvas,#video{
                float:left;
                margin-right:10px;
                background:#fff;
            }
            .box{
                overflow:hidden;
                margin-bottom:10px;
            }
        </style>
    

    
        <div class="box">
            <video id="video" width="400" height="300"></video>
            <canvas id="canvas" width="0" height="0"></canvas>
        </div>
        <button id="live">直播</button>
        <button id="snap">截图</button>
    <script>
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width = video.width;
        var height = video.height;
        canvas.width = width;
        canvas.height = height;
        function liveVideo(){
          // 获取到window.URL对象
          var URL = window.URL || window.webkitURL;
          navigator.getUserMedia({
            video: true
          }, function(stream){
            video.src = URL.createObjectURL(stream);
            video.play();
            //点击截图
            document.getElementById("snap").addEventListener('click',function(){
                ctx.drawImage(video, 0, 0, width, height);
            });
          }, function(error){
            console.log(error.name || error);
          });
        }
        //开始直播
        document.getElementById("live").addEventListener('click',function(){
            liveVideo();
        })
    </script>
    

1.1.2 保存图片

当然,截图后,你也可以保存下来:

<a download="snap.png" id="download">下载图片</a>

var url = canvas.toDataURL('image/png');
document.getElementById('download').src = url;

1.2 捕获麦克风声音

要通过浏览器捕获声音,需要借助Web Audio API。

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var context = new AudioContext();

function onSuccess(stream){
  var audioInput = context.createMediaStreamSource(stream);
    audioInput.connect(context.destination);
}

navigator.getUserMedia({audio: true} ,onSuccess);
                </canvas>
';