HTML5新特性之WebRTC
2016-02-23 22:51
671 查看
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元素。图像就展示在这个元素中。<video id="webcam"></video>
然后,用代码获取这个元素。
function onSuccess(stream) { var video = document.getElementById('webcam'); //more code }
最后,将这个元素的src属性绑定数据流,摄像头拍摄的图像就可以显示了。
function onSuccess(stream) { var video = document.getElementById('webcam'); if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; } video.autoplay = true; //or video.play(); }
它的主要用途是让用户使用摄像头为自己拍照。
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,用来抽像掉浏览器之间的差异。
var dataChannelOptions = { ordered: false, // do not guarantee order maxRetransmitTime: 3000, // in milliseconds }; var peerConnection = new RTCPeerConnection(); // Establish your peer connection using your signaling channel here var dataChannel = peerConnection.createDataChannel("myLabel", dataChannelOptions); dataChannel.onerror = function (error) { console.log("Data Channel Error:", error); }; dataChannel.onmessage = function (event) { console.log("Got Data Channel Message:", event.data); }; dataChannel.onopen = function () { dataChannel.send("Hello World!"); }; dataChannel.onclose = function () { console.log("The Data Channel is Closed"); };
4、参考链接
[1] Andi Smith, Get Started with WebRTC[2] Thibault Imbert, 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
[5] Sam Dutton, Getting Started with WebRTC
[6] Dan Ristic, WebRTC data channels
[7] Ruanyf, WebRTC
相关文章推荐
- 一个最简html5文档来说明html5的新特性和写法
- html5 canvas画图之图形随拖动而复制(有操作指示)
- H5的能力
- 关于 断点续传上传与秒传 你绕不过去的坎 html5+php
- Html5中Select如何设定长度
- HTML5移动开发技术要点总结及各事件含义
- html5页面重置样式(html5.css)
- 基于安卓开发后嵌入一个html5开发的项目碰到的问题
- H5项目常见问题及注意事项
- Html5标签
- 【分享】HTML5的Canvas制作3D动画效果分享
- Html5中Select如何设定长度
- [HTML5权威指南] => 读书笔记(一)
- 三天学会HTML5 ——多媒体元素的使用
- 浅谈:html5和html的区别
- web学习之路—H5(五)
- form表单(h5)
- 新增的h5页面元素
- h5之选项卡
- HTML5