HTML5 - Web RTC

HTML5 Web RTC - 通过简单简单的步骤学习HTML 5，其中包含2D画布，音频，视频，新语义元素，地理位置，持久本地存储，Web存储，Web SQL，Forms 2.0，微数据和拖放，IndexedDB，Web消息传递，CORS，Web RTC，画布绘制矩形，Web存储，服务器发送事件，Web画布，Web工作者，幻灯片。

万维网联盟(W3C)推出的Web RTC.它支持用于语音呼叫，视频聊天和P2P文件共享的浏览器到浏览器应用程序.

如果你想试试？适用于Chrome，Opera和Firefox的网络RTC.一个好的起点是此处上的简单视频聊天应用程序. Web RTC实现三个API，如下所示 :

MediaStream : 可以访问用户的摄像头和麦克风.
RTCPeerConnection : 访问音频或视频通话设施.
RTCDataChannel : 获得对等通信的访问权.

MediaStream

MediaStream表示同步流例如，单击HTML5演示部分中的HTML5视频播放器.

上面的例子包含stream.getAudioTracks()和stream.VideoTracks().如果没有音轨，则返回一个空数组并检查视频流，如果连接了网络摄像头，则stream.getVideoTracks()返回一个MediaStreamTrack数组，表示来自网络摄像头的流.一个简单的例子是聊天应用程序，聊天应用程序从网络摄像头，后置摄像头，麦克风获取流.

MediaStream的示例代码

function gotStream(stream) {   window.AudioContext = window.AudioContext || window.webkitAudioContext;   var audioContext = new AudioContext();      // Create an AudioNode from the stream   var mediaStreamSource = audioContext.createMediaStreamSource(stream);      // Connect it to destination to hear yourself   // or any other node for processing!   mediaStreamSource.connect(audioContext.destination);}navigator.getUserMedia({audio:true}, gotStream);

屏幕截图

在Chrome浏览器中也可以使用mediaStreamSource，它需要HTTPS.歌剧中尚未提供此功能.样本演示可在此处获取

会话控制，网络&媒体信息

Web RTC需要浏览器之间的对等通信.该机制需要信令，网络信息，会话控制和媒体信息. Web开发人员可以选择不同的机制来在诸如SIP或XMPP之类的浏览器之间进行通信，或者进行任何双向通信. XHR的示例示例是此处.

createSignalingChannel()的示例代码

var signalingChannel = createSignalingChannel();var pc;var configuration = ...;// run start(true) to initiate a callfunction start(isCaller) {   pc = new RTCPeerConnection(configuration);      // send any ice candidates to the other peer   pc.onicecandidate = function (evt) {      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));   };      // once remote stream arrives, show it in the remote video element   pc.onaddstream = function (evt) {      remoteView.src = URL.createObjectURL(evt.stream);   };      // get the local stream, show it in the local video element and send it   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {      selfView.src = URL.createObjectURL(stream);      pc.addStream(stream);            if (isCaller)         pc.createOffer(gotDescription);            else         pc.createAnswer(pc.remoteDescription, gotDescription);                  function gotDescription(desc) {            pc.setLocalDescription(desc);            signalingChannel.send(JSON.stringify({ "sdp": desc }));         }      });   }      signalingChannel.onmessage = function (evt) {      if (!pc)         start(false);         var signal = JSON.parse(evt.data);            if (signal.sdp)         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));            else         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));};