120⾏代码实现浏览器WebRTC视频聊天
本例⼦是参考做的。
这个教程应该主要是去宣传ScaleDrone的sdk, 他们的服务是收费的，但是免费的也可以⽤，就是有些次数限制。
1 准备
使⽤最新版⾕歌浏览器（62版）
视频聊天中 ⼀个是windows, ⼀个是mac
stun服务器使⽤⾕歌的，trun使⽤的sdk，这样我就不⽤管服务端了。
2 先上效果图
3 再上在线例⼦
4 源码分析
// 产⽣随机数
if (!location.hash) {
location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
// 获取房间号
var roomHash = location.hash.substring(1);
// 放置你⾃⼰的频道id, 这是我注册了ScaleDrone 官⽹后，创建的channel
// 你也可以⾃⼰创建
var drone = new ScaleDrone('87fYv4ncOoa0Cjne');
// 房间名必须以 'observable-'开头
var roomName = 'observable-' + roomHash;
var configuration = {
iceServers: [{
urls: 'stun:le:19302'// 使⽤⾕歌的stun服务
}]
};
var room;
浏览web是什么意思var pc;
function onSuccess() {}
function onError(error) {
<(error);
}
<('open', function(error){
if (error) { (error);}
room = drone.subscribe(roomName);
<('open', function(error){
<('open', function(error){
if (error) {onError(error);}
});
// 已经链接到房间后，就会收到⼀个 members 数组，代表房间⾥的成员
// 这时候信令服务已经就绪
<('members', function(members){
console.log('MEMBERS', members);
/
/ 如果你是第⼆个链接到房间的⼈，就会创建offer
var isOfferer = members.length === 2;
startWebRTC(isOfferer);
});
});
// 通过Scaledrone发送信令消息
function sendMessage(message) {
drone.publish({
room: roomName,
message
});
}
function startWebRTC(isOfferer) {
pc = new RTCPeerConnection(configuration);
// 当本地ICE Agent需要通过信号服务器发送信息到其他端时
// 会触发icecandidate事件回调
if (event.candidate) {
sendMessage({ 'candidate': event.candidate });
}
};
// 如果⽤户是第⼆个进⼊的⼈，就在negotiationneeded 事件后创建sdp
if (isOfferer) {
// onnegotiationneeded 在要求sesssion协商时发⽣
// 创建本地sdp描述 SDP (Session Description Protocol) session描述协议            pc.createOffer().then(localDescCreated).catch(onError);
};
}
// 当远程数据流到达时，将数据流装载到video中
remoteVideo.srcObject = event.stream;
};
// 获取本地媒体流
audio: true,
video: true,
}).then( function(stream) {
// 将本地捕获的视频流装载到本地video中
localVideo.srcObject = stream;
// 将本地流加⼊RTCPeerConnection 实例中发送到其他端
pc.addStream(stream);
}, onError);
// 从Scaledrone监听信令数据
<('data', function(message, client){
/
/ 消息是我⾃⼰发送的，则不处理
if (client.id === drone.clientId) {
return;
return;
}
if (message.sdp) {
// 设置远程sdp, 在offer 或者 answer后
pc.setRemoteDescription(new RTCSessionDescription(message.sdp), function(){
// 当收到offer 后就接听
if (pe === 'offer') {
}
}, onError);
}
else if (message.candidate) {
// 增加新的 ICE canidatet 到本地的链接中
pc.addIceCandidate(
new RTCIceCandidate(message.candidate), onSuccess, onError
);
}
});
}
function localDescCreated(desc) {
pc.setLocalDescription(desc, function(){
sendMessage({ 'sdp': pc.localDescription });
},onError);
}
5 WebRTC简介
5.1 介绍
WebRTC 是⼀个开源项⽬，⽤于Web浏览器之间进⾏实时⾳频视频通讯，数据传递。
WebRTC有⼏个JavaScript APIS。 点击链接去查看demo。
[getUserMedia(): 捕获⾳频视频]()
[MediaRecorder: 记录⾳频视频]()
[RTCPeerConnection: 在⽤户之间传递⾳频流和视频流]()
[RTCDataChannel: 在⽤户之间传递⽂件流]()
5.2 在哪⾥使⽤WebRTC?
Chrome
FireFox
Opera
Android
iOS
5.3 什么是信令
WebRTC使⽤RTCPeerConnection在浏览器之间传递流数据, 但是也需要⼀种机制去协调收发控制信息，这就是信令。信令的⽅法和协议并不是在WebRTC中明⽂规定的。 在codelad中⽤的是Node，也有许多其他的⽅法。
5.4 什么是STUN和TURN和ICE?
WebRTC被设计⽤于点对点之间⼯作，因此⽤户可以通过最直接的途径连接。然⽽，WebRTC的构建是为了应付现实中的⽹络: 客户端应⽤程序需要穿越NAT⽹关和防⽕墙，并且对等⽹络需要在直接连接失败的情况下进⾏回调。 作为这个过程的⼀部分，WebRTC api使⽤STUN服务器来获取计算机的IP地址，并将服务器作为中继服务器运⾏，以防⽌对等通信失败。(现实世界中的WebRTC更详细地解释了
这⼀点。)
5.5 WebRTC是否安全?
WebRTC组件是强制要求加密的，并且它的JavaScript APIS只能在安全的域下使⽤(HTTPS 或者 localhost)。信令机制并没有被WebRTC标准定义，所以是否使⽤安全的协议就取决于你⾃⼰了。
6 WebRTC 参考资料

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