万维网联盟(W3C)引入的Web RTC。它支持用于语音呼叫,视频聊天和P2P文件共享的浏览器到浏览器应用程序。
如果要尝试一下?适用于Chrome,Opera和Firefox的Web RTC。一个简单的视频聊天应用程序是一个很好的起点,它位于此处。 Web RTC实现了三个API,如下所示-
MediaStream - 可以访问用户的摄像头和麦克风。
RTCPeerConnection - 访问音频或视频呼叫工具。
RTCDataChannel - 获取对等通信。
MediaStream
MediaStream表示同步的媒体流,包含stream.getAudioTracks()和stream.VideoTracks()。 如果没有音轨,它将返回一个空数组,并将检查视频流。如果已连接网络摄像头,stream.getVideoTracks()将返回一个MediaStreamTrack数组,该数组表示来自网络摄像头的流。 一个简单的示例是聊天应用程序,聊天应用程序从网络摄像头,后置摄像头,麦克风中获取信息流。
function gotStream(stream) { window.AudioContext=window.AudioContext || window.webkitAudioContext; var audioContext=new AudioContext();//从流中创建一个 AudioNode var mediaStreamSource=audioContext.createMediaStreamSource(stream);
//将其连接到目的地以听到自己的声音或任何其他节点进行处理! mediaStreamSource.connect(audioContext.destination); } navigator.getUserMedia({audio:true}, gotStream);
屏幕截图
在带有mediaStreamSource的Chrome浏览器中,这也是可能的,并且它需要HTTPS。opera尚不提供此函数。可在此处获得示例演示。
会话控制,媒体信息
Web RTC需要浏览器之间的对等通信。该机制需要信令,网络信息,会话控制和媒体信息。 Web开发人员可以选择不同的机制在浏览器之间进行通信,例如SIP或XMPP或任何两种方式的通信。 XHR的示例示例是此处。
var signalingChannel=createSignalingChannel();
var pc;
var configuration=...;
//运行 start(true) 发起呼叫
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);
</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">isCaller</span><span class="pun">)</span><span class="pln">
pc</span><span class="pun">.</span><span class="pln">createOffer</span><span class="pun">(</span><span class="pln">gotDescription</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">else</span><span class="pln">
pc</span><span class="pun">.</span><span class="pln">createAnswer</span><span class="pun">(</span><span class="pln">pc</span><span class="pun">.</span><span class="pln">remoteDescription</span><span class="pun">,</span><span class="pln"> gotDescription</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> gotDescription</span><span class="pun">(</span><span class="pln">desc</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
pc</span><span class="pun">.</span><span class="pln">setLocalDescription</span><span class="pun">(</span><span class="pln">desc</span><span class="pun">);</span><span class="pln">
signalingChannel</span><span class="pun">.</span><span class="pln">send</span><span class="pun">(</span><span class="pln">JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">({</span><span class="pln"> </span><span class="str">"sdp"</span><span class="pun">:</span><span class="pln"> desc </span><span class="pun">}));</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
}
signalingChannel.onmessage=function (evt) {
if (!pc)
start(false);
var signal=JSON.parse(evt.data);
</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">signal</span><span class="pun">.</span><span class="pln">sdp</span><span class="pun">)</span><span class="pln">
pc</span><span class="pun">.</span><span class="pln">setRemoteRemark</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RTCSessionDescription</span><span class="pun">(</span><span class="pln">signal</span><span class="pun">.</span><span class="pln">sdp</span><span class="pun">));</span><span class="pln">
</span><span class="kwd">else</span><span class="pln">
pc</span><span class="pun">.</span><span class="pln">addIceCandidate</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RTCIceCandidate</span><span class="pun">(</span><span class="pln">signal</span><span class="pun">.</span><span class="pln">candidate</span><span class="pun">));</span><span class="pln">
};