HTML - WebRTC

WebRTC 由万维网联盟 (W3C) 引入，支持浏览器到浏览器的应用程序，例如语音通话、视频聊天和点对点文件共享。

WebRTC 实现如下所示的三个 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);

会话控制、网络和媒体信息

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

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));
};