In order to implement and make use of web RTC, use the APIs of the Web RTC those are described below.
Media Stream is used to represent the different types of media. For example, select one of video player. Then browser will send one popup alert message about sharing camera and microphone.If user clicks on
OK then only browser will accept the user peripherals.
The media stream contains
stream.getAudioTracks() and
stream.VideoTracks(). Initially browser will check for the audio tracks.If present, then only it will display, otherwise returns empty array.Next browser goes to video stream. If web webcam gets connected then it will respond as array of one
MediaStreamTrack which represents the web cam.The code below demonstrates the media stream.
[c]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);
[/c]
Capturing the screen also possible by using the media stream source in a chrome browser.
In order to make the communication between the browsers,
peer to peer communication have to be established for which network information, signaling, session control, and media information are required. There are several mechanisms to generate the communication between the browsers such as
SIP or
XMPP or any two way communication. the code below demonstrates the
createSignalingChannel()
as shown.
[c]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));
};
[/c]