Web RTC(Web RTC)
优质
小牛编辑
129浏览
2023-12-01
万维网联盟(W3C)推出的Web RTC。 它支持用于语音呼叫,视频聊天和P2P文件共享的浏览器到浏览器应用程序。
如果你想试试? 适用于Chrome,Opera和Firefox的网络RTC。 一个好的起点是这里简单的视频聊天应用程序。 Web RTC实现了三个API,如下所示 -
MediaStream - 访问用户的摄像头和麦克风。
RTCPeerConnection - 访问音频或视频通话设施。
RTCDataChannel - 访问对等通信。
MediaStream (MediaStream)
MediaStream表示同步的媒体流,例如,单击HTML5演示部分中的HTML5视频播放器,或者单击here 。
上面的示例包含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。 歌剧中尚未提供此功能。 示例演示可在here
会话控制,网络和媒体信息
Web RTC需要浏览器之间的对等通信。 该机制需要信令,网络信息,会话控制和媒体信息。 Web开发人员可以选择不同的机制在SIP或XMPP等浏览器之间进行通信,或者进行任何双向通信。 XHR的示例就here 。
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));
};