RTCMultiConnection源码分析及示例

RTCMultiConnection是运行在RTCPeerConnection API之上的WebRTC JavaScript包装库,可以实现基于WebRTC的点对点多人会话,点对点文件分享,以及视频聊天等功能。 下面对RTCMultiConnection的部分源代码(基于 v2.2.5)进行简单分析。

 var iceServers = [];
iceServers.push({
url: 'stun:stun.l.google.com:19302'
});
iceServers.push({
url: 'stun:stun.anyfirewall.com:3478'
});
iceServers.push({
url: 'turn:turn.bistri.com:80',
credential: 'homeo',
username: 'homeo'
});
iceServers.push({
url: 'turn:turn.anyfirewall.com:443?transport=tcp',
credential: 'webrtc',
username: 'webrtc'
});
connection.iceServers = iceServers;

上述源代码配置了STUN和TURN服务器,使用时可以用新的配置覆盖。这个地址列出了可用的 STUN server list

 // resources used in RTCMultiConnection
connection.resources = {
RecordRTC: 'https://cdn.webrtc-experiment.com/RecordRTC.js',
PreRecordedMediaStreamer: 'https://cdn.webrtc-experiment.com/PreRecordedMediaStreamer.js',
customGetUserMediaBar: 'https://cdn.webrtc-experiment.com/navigator.customGetUserMediaBar.js',
html2canvas: 'https://cdn.webrtc-experiment.com/screenshot.js',
hark: 'https://cdn.webrtc-experiment.com/hark.js',
firebase: 'https://cdn.webrtc-experiment.com/firebase.js',
firebaseio: 'https://chat.firebaseIO.com/',
muted: 'https://cdn.webrtc-experiment.com/images/muted.png',
getConnectionStats: 'https://cdn.webrtc-experiment.com/getConnectionStats.js',
FileBufferReader: 'https://cdn.webrtc-experiment.com/FileBufferReader.js'
};
// www.RTCMultiConnection.org/docs/body/
connection.body = document.body || document.documentElement;
// www.RTCMultiConnection.org/docs/peers/
connection.peers = {};
// www.RTCMultiConnection.org/docs/firebase/
connection.firebase = 'chat';
 // www.RTCMultiConnection.org/docs/openSignalingChannel/
// http://goo.gl/uvoIcZ
connection.openSignalingChannel = function(config) {
// make sure firebase.js is loaded
if (!window.Firebase) {
return loadScript(connection.resources.firebase, function() {
connection.openSignalingChannel(config);
});
}
var channel = config.channel || connection.channel;
if (connection.firebase) {
// for custom firebase instances
connection.resources.firebaseio = connection.resources.firebaseio.replace('//chat.', '//' + connection.firebase + '.');
}
var firebase = new window.Firebase(connection.resources.firebaseio + channel);
firebase.channel = channel;
firebase.on('child_added', function(data) {
config.onmessage(data.val());
});
firebase.send = function(data) {
// a quick dirty workaround to make sure firebase
// shouldn't fail for NULL values.
for (var prop in data) {
if (isNull(data[prop]) || typeof data[prop] === 'function') {
data[prop] = false;
}
}
this.push(data);
};
if (!connection.socket) {
connection.socket = firebase;
}
firebase.onDisconnect().remove();
setTimeout(function() {
config.callback(firebase);
}, 1);
};
connection.Plugin = Plugin;
};

RTCMultiConnection默认使用了 https://chat.firebaseIO.com/ 信号服务,使用时可修改为自己的firebase地址 connection.firebase = 'yourname'; 也可使用其他服务端信号实现,在客户端重载openSignalingChannel函数,详见 https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md的介绍。

完整示例:







  
  利用RTCMultiConnection进行基于WebRTC的实时多人点对点文字聊天和文件分享
  
  
  



  
## Open Data Channel or join:
## Share Files

new RTCMultiConnection('channel-id');创建一个信道,参数为空时默认信道名为完整URL。 connection.open('session-id'); 在当前信道创建一个会话,可理解为一个房间。一个信道可以有多个房间。 connection.connect('session-id');连接新的socket或使用已有socket,等待onNewSession事件,然后默认connection.join(session);

RTCMultiConnection官方网站及文档和示例:http://www.rtcmulticonnection.org/ firebaseAPI:https://www.firebase.com/docs/web/api/


其他基于WebRTC的JavaScript类库

  1. PeerJS简化WebRTC点对点数据、音视频通话。同样需要PeerServer来协商会话双方,可使用官网提供的免费服务。
  2. rtc.io是一个node.js的模块集合,可用来简化WebRTC开发
  3. https://simplewebrtc.com/由一些独立的模块构成
  4. http://sipjs.com/和peerjs类似,同样需要SIP服务,可使用他们的付费OnSIP服务
THE END