HTML5新特性之WebRTC

心已赠人 2022-06-01 13:30 275阅读 0赞

[https://www.cnblogs.com/jscode/p/3601648.html][https_www.cnblogs.com_jscode_p_3601648.html]

# [HTML5新特性之WebRTC][HTML5_WebRTC] #

# 1、概述 #

WebRTC是“网络实时通信”（Web Real Time Communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。

WebRTC共分三个API。

*  MediaStream（又称getUserMedia）
 *  RTCPeerConnection
 *  RTCDataChannel

getUserMedia主要用于获取视频和音频信息，后两个API用于浏览器之间的数据交换。

# 2、getUserMedia #

## 2.1 简介 ##

首先，检查浏览器是否支持getUserMedia方法。

navigator.getUserMedia || 
        (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia);
    
    if (navigator.getUserMedia) {
        //do something
    } else {
        console.log('your browser not support getUserMedia');
    }

Chrome21、Opera 18和Firefox 17支持该方法，目前IE还不支持，上面代码中的msGetUserMedia只是为了确保将来的兼容。

getUserMedia方法接受三个参数。

getUserMedia(streams, success, error);

含义如下：

*  streams：表示包括哪些多媒体设备的对象
 *  success：回调函数，获取多媒体设备成功时调用
 *  error：回调函数，获取多媒体设备失败时调用

用法如下：

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

上面的代码用来获取摄像头和麦克风的实时信息。

如果网页使用了getUserMedia，浏览器就会询问用户，是否许可提供信息。如果用户拒绝，就调用回调函数onError。

发生错误时，回调函数的参数是一个Error对象，它有一个code参数，取值如下：

*  PERMISSION\_DENIED：用户拒绝提供信息。
 *  NOT\_SUPPORTED\_ERROR：浏览器不支持指定的媒体类型。
 *  MANDATORY\_UNSATISHIED\_ERROR：指定的媒体类型未收到媒体流。

## 2.2 展示摄像头图像 ##

将用户的摄像头拍摄的图像展示在网页上，需要先在网页上放置一个video元素。图像就展示在这个元素中。

然后，用代码获取这个元素。

function onSuccess(stream) {
    
        var video = document.getElementById('webcam');
    
        //more code
    }

最后，将这个元素的src属性绑定数据流，摄像头拍摄的图像就可以显示了。

它的主要用途是让用户使用摄像头为自己拍照。

## 2.3 捕获麦克风声音 ##

通过浏览器捕获声音，相对复杂，需要借助Web Audio API。

function onSuccess(stream) {
    
        //创建一个音频环境对像
        audioContext = window.AudioContext || window.webkitAudioContext;
        context = new audioContext();
    
        //将声音输入这个对像
        audioInput = context.createMediaStreamSources(stream);
        
        //设置音量节点
        volume = context.createGain();
        audioInput.connect(volume);
    
        //创建缓存，用来缓存声音
        var bufferSize = 2048;
    
        // 创建声音的缓存节点，createJavaScriptNode方法的
        // 第二个和第三个参数指的是输入和输出都是双声道。
        recorder = context.createJavaScriptNode(bufferSize, 2, 2);
    
        // 录音过程的回调函数，基本上是将左右两声道的声音
        // 分别放入缓存。
        recorder.onaudioprocess = function(e){
            console.log('recording');
            var left = e.inputBuffer.getChannelData(0);
            var right = e.inputBuffer.getChannelData(1);
            // we clone the samples
            leftchannel.push(new Float32Array(left));
            rightchannel.push(new Float32Array(right));
            recordingLength += bufferSize;
        }
    
        // 将音量节点连上缓存节点，换言之，音量节点是输入
        // 和输出的中间环节。
        volume.connect(recorder);
    
        // 将缓存节点连上输出的目的地，可以是扩音器，也可以
        // 是音频文件。
        recorder.connect(context.destination); 
    
    }

# 3、实时数据交换 #

WebRTC的另外两个API，RTCPeerConnection用于浏览器之间点对点的连接，RTCDataChannel用于点对点的数据通信。

RTCPeerConnection带有浏览器前缀，Chrome浏览器中为webkitRTCPeerConnection，Firefox浏览器中为mozRTCPeerConnection。Google维护一个函数库adapter.js，用来抽像掉浏览器之间的差异。

# 4、参考链接 #

\[1\] Andi Smith, [Get Started with WebRTC][]

\[2\] Thibault Imbert, [From microphone to .WAV with: getUserMedia and Web Audio][From microphone to .WAV with_ getUserMedia and Web Audio]

\[3\] Ian Devlin, [Using the getUserMedia API with the HTML5 video and canvas elements][]

\[4\] Eric Bidelman, [Capturing Audio & Video in HTML5][Capturing Audio _ Video in HTML5]

\[5\] Sam Dutton, [Getting Started with WebRTC][]

\[6\] Dan Ristic, [WebRTC data channels][]

\[7\] Ruanyf, [WebRTC][]

分类: [HTML5][]

标签: [HTML5][HTML5 1], [WebRTC][WebRTC 1]

好文要顶 关注我 收藏该文 ![icon_weibo_24.png][] ![wechat.png][]

[![u389001.png_id_16163716][]][u389001.png_id_16163716 1]

[草根程序猿][u389001.png_id_16163716 1]  
[关注 - 22][- 22]  
[粉丝 - 696][- 696]

荣誉： [推荐博客][Link 1]

\+加关注

[« ][Link 2]上一篇： [HTML5新特性之Mutation Observer][Link 2]  
[» ][Link 3]下一篇： [HTML5 Canvas实战之刮奖效果][Link 3]

[https_www.cnblogs.com_jscode_p_3601648.html]: https://www.cnblogs.com/jscode/p/3601648.html
[HTML5_WebRTC]: http://www.cnblogs.com/jscode/p/3601648.html
[Get Started with WebRTC]: http://www.netmagazine.com/tutorials/get-started-webrtc
[From microphone to .WAV with_ getUserMedia and Web Audio]: http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/
[Using the getUserMedia API with the HTML5 video and canvas elements]: http://html5hub.com/using-the-getusermedia-api-with-the-html5-video-and-canvas-elements/#i.bz41ehmmhd3311
[Capturing Audio _ Video in HTML5]: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
[Getting Started with WebRTC]: http://www.html5rocks.com/en/tutorials/webrtc/basics/
[WebRTC data channels]: http://www.html5rocks.com/en/tutorials/webrtc/datachannels/
[WebRTC]: http://javascript.ruanyifeng.com/bom/webrtc.html
[HTML5]: http://www.cnblogs.com/jscode/category/555821.html
[HTML5 1]: http://www.cnblogs.com/jscode/tag/HTML5/
[WebRTC 1]: http://www.cnblogs.com/jscode/tag/WebRTC/
[icon_weibo_24.png]: https://common.cnblogs.com/images/icon_weibo_24.png
[wechat.png]: /images/20220601/558139f5ef2546538dd88b56080a012d.png
[u389001.png_id_16163716]: /images/20220601/fd43c70f89b246a5857c219c52eaa034.png
[u389001.png_id_16163716 1]: http://home.cnblogs.com/u/jscode/
[- 22]: http://home.cnblogs.com/u/jscode/followees
[- 696]: http://home.cnblogs.com/u/jscode/followers
[Link 1]: http://www.cnblogs.com/expert/
[Link 2]: http://www.cnblogs.com/jscode/p/3600060.html
[Link 3]: http://www.cnblogs.com/jscode/p/3580878.html