【转】简单的WebRTC⽰例
⽹上关于WebRTC的⽰例⼤多代码较多,以下是参考那些代码简化的⼀个WebRTC⼀对⼀的⽰例,在chrome 37下测试通过。其中iceServer可省略,没有iceServer时在同⼀个局域⽹下仍可通讯。
客户端代码:
<html>
<body>
Local: <br>
<video id="localVideo" autoplay></video><br>
Remote: <br>
<video id="remoteVideo" autoplay></video>
<script>
// 仅仅⽤于控制哪⼀端的浏览器发起offer,#号后⾯有值的⼀⽅发起
var isCaller = window.location.href.split('#')[1];
// 与信令服务器的WebSocket连接
var socket = new WebSocket("ws://127.0.0.1:3000");
// stun和turn服务器
var iceServer = {
"iceServers": [{
"url": "stun:le:19302"
}, {
"url": "turn:numb.viagenie.ca",
"username": "webrtc@live",
"credential": "muazkh"
}]
};
// 创建PeerConnection实例 (参数为null则没有iceserver,即使没有stunserver和turnserver,仍可在局域⽹下通讯)
var pc = new webkitRTCPeerConnection(iceServer);
// 发送ICE候选到其他客户端
if (event.candidate !== null) {
socket.send(JSON.stringify({
"event": "_ice_candidate",
"data": {
"candidate": event.candidate
}
}));
}
};
// 如果检测到媒体流连接到本地,将其绑定到⼀个video标签上输出
};
// 发送offer和answer的函数,发送本地session描述
var sendOfferFn = function(desc){
pc.setLocalDescription(desc);
socket.send(JSON.stringify({
socket.send(JSON.stringify({
"event": "_offer",
"data": {
"sdp": desc
}
}));
},
sendAnswerFn = function(desc){
pc.setLocalDescription(desc);
socket.send(JSON.stringify({
"event": "_answer",
"data": {
"sdp": desc
}
}));
};
// 获取本地⾳频和视频流
navigator.webkitGetUserMedia({
"audio": true,
"video": true
}, function(stream){
/
/绑定本地媒体流到video标签⽤于输出
//向PeerConnection中加⼊需要发送的流
pc.addStream(stream);
//如果是发起⽅则发送⼀个offer信令
if(isCaller){
console.log('Failure callback: ' + error);
});
}
}, function(error){
/
/处理媒体流创建失败错误
console.log('getUserMedia error: ' + error);
});
//处理到来的信令
var json = JSON.parse(event.data);
console.log('onmessage: ', json);
//如果是⼀个ICE的候选,则将其加⼊到PeerConnection中,否则设定对⽅的session描述为传递过来的描述            if( json.event === "_ice_candidate" ){
pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
} else {
pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
// 如果是⼀个offer,那么需要回复⼀个answer
if(json.event === "_offer") {
console.log('Failure callback: ' + error);
});
}
}
webrtc浏览器};
</script>
</body>
</body> </html>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。