HTML5 – Web RTC

HTML5 – Web RTC

Web RTC是由万维网联盟(W3C)推出的技术,支持浏览器之间的语音通话、视频聊天和P2P文件共享应用。

如果您想尝试一下Web RTC,可以在Chrome、Opera和Firefox中使用。一个好的开始是简单的视频聊天应用程序, 在这里 。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。这个特性operathe目前还不可用。其中有一个示例演示可用于 在这里

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

Web RTC需要浏览器之间的点对点通信。这种机制需要信令、网络信息、会话控制和媒体信息。Web开发人员可以选择不同的机制来在浏览器之间进行通信,例如SIP或XMPP或任何两种方式的通信。XHR的示例代码: 在这里

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程