Html 简明教程

HTML - Web RTC

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

Web RTC introduced by World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing.

Web RTC 实现了以下三个 API——

The web RTC implements three API’s as shown below −

  1. MediaStream − get access to the user’s camera and microphone.

  2. RTCPeerConnection − get access to audio or video calling facility.

  3. RTCDataChannel − get access to peer-to-peer communication.

MediaStream

MediaStream 表示媒体的同步流，例如，单击 HTML5 演示部分中的 HTML5 视频播放器或单击 here 。

The MediaStream represents synchronized streams of media, For an example, Click on HTML5 Video player in HTML5 demo section or else click here.

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

The above example contains stream.getAudioTracks() and stream.VideoTracks(). If there is no audio tracks, it returns an empty array and it will check video stream,if webcam connected, stream.getVideoTracks() returns an array of one MediaStreamTrack representing the stream from the webcam. A simple example is chat applications, a chat application gets stream from web camera, rear camera, microphone.

Sample code of 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);

Session Control, Network & Media Information

Web RTC 需要浏览器之间的点对点通信。此机制需要信令、网络信息、会话控制和媒体信息。Web 开发人员可以选择不同的机制在浏览器之间进行通信，例如 SIP 或 XMPP 或任何双向通信。

Web RTC required peer-to-peer communication between browsers. This mechanism required signaling, network information, session control and media information. Web developers can choose different mechanism to communicate between the browsers such as SIP or XMPP or any two way communications.

Sample code of createSignalingChannel()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function 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));
};