docs/how-to-WebRTC-video-conferencing.html
| If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js. |
It is called peer-to-peer model; where all peers are interconnected.
It is preferred to use socket.io because it supports multiplexing.
On invocation; those functions should:
On page load: call "openSignalingChannel" method. This time your "openSignalingChannel" must open "default-channel" that must be active all the time. That default channel will be used to:
If someone creates new room; you should continuously transmit his room details over the "default-channel".
You can use transmission-interval i.e. 3 or 5 seconds. It should be your own preference.
Send "participation request" over same "default-channel".
You should also send participant's unique id in the "participation request" message.
Call "openSignalingChannel" method to create new socket where you should use his unique id as channel name/label.
That newly created socket will be used to get offer-sdp from room owner. It will also be used to get ICE gathered by room owner.
You should create new socket using "openSignalingChannel" method where you should use participant's unique id for channel name/label. Otherwise, use random number that must be passed along with "participation request" message.
That new socket will be used to exchange SDP/ICE between room owner and that participant.
You should quickly create a new peer connection.
You should also quickly create "offer" because room-owner is expected to play the role of "offerer" for each new participant.
As soon as offer is created; you should pass that "offer sdp" over same socket that is being used to exchange SDP/ICE between room owner and participant.
Set remote descriptions using offer sdp sent by room owner.
Create answer. Participant will always play role of "answerer" on joining new room.
As soon as answer is created; you should pass that "answer sdp" over same socket that is being used to exchange SDP/ICE between room owner and participant.
Set remote descriptions using answer sdp sent by participant.
And handshake is completed! Are you sure? Wait....there is something else!
You should use same socket to exchange/post/transfer these ICE candidates on participant's side.
You should use same socket to exchange/post/transfer these ICE candidates on room owner's side.
And finally handshake is completed. You're done! Good job Sir!
For each new participant; repeat above process and that's it!
After successful handshake between room owner and the participant; transmit participant's details over all other connected sockets i.e. toward all other room participants.
As soon as other participants will receive transmitted details; make "auto" participation request toward that "last participant".
And then follow above process again.
Explaining above theory using (a little bit real however) pseudo codes.
function openSignalingChannel(channel) {
var socket = io.connect('http://your-site:8888/' + channel);
}
function createOffer() {
var peer = new RTCPeerConnection(null); // pass ICE-Servers
peer.createOffer({OfferToReceiveVideo:true}).then(onSuccess);
}
function createAnswer(offer_sdp) {
var peer = new RTCPeerConnection(null); // pass ICE-Servers
peer.setRemoteDescription(new RTCSessionDescription(offer_sdp)).then(function() {
peer.createAnswer({OfferToReceiveVideo:true}).then(onSuccess);
});
}
var channel = openSignalingChannel('default-channel');
channel.onmessage = function(message)
{
if(message.participationRequest) {}
if(message.sharingRoomDetails) {}
};
channel.send({
isNewParticipant: true,
participant_id: participant_id
});
// this private socket will be used to exchange sdp/ice
var privateChannel = openSignalingChannel(participant_id);
privateChannel.onmessage = function(message) {
if(message.type === 'offer')
{
createAnswer(message.sdp);
// on creating answer-sdp; transmit it over "privateChannel"
privateChannel.send(answer_sdp);
}
};
if(message.isNewParticipant) {
var privateChannel = openSignalingChannel(message.participant_id);
createOffer();
// on creating offer-sdp; transmit it over "privateChannel"
privateChannel.send(offer_sdp);
privateChannel.onmessage = function(message)
{
if(message.type === 'answer') peer.setRemoteDescription(new RTCSessionDescription(message.sdp));
};
}
privateChannel.onmessage = function(message) {
if(message.ice) peer.addIceCandidate(new RTCIceCandidate(message.ice));
};
peer.onicecandidate = function(event) {
if(!event.candidate) return;
privateChannel.send(event.candidate);
};
After successful handshake:
for(var i = 0; i < otherParticipants.length; i++) {
var participant = otherParticipants[i];
// send/emit/push/etc.
participant.send({
isNewParticipant: true,
participant_id: '0123456789'
});
}
Use "participant_id" you can make additional participation requests to him.
Send MessageEnter your email too; if you want "direct" reply!