Introduction
HTML5 Web RTC is introduced by World Web Consortium (W3C) and is used to make a video calling, video chat, P2P file sharing between the browsers. Following are the concepts covered.
- About Web RTC
- Implementation of Web RTC
- Browser Support
Description
Web RTC is known as the Web Real-Time Communication which provides browsers and mobile applications with a real time communications by using simple APIs. Web RTC project was maintained by Google Chrome team and is a simple application to start the video chat. Following are the APIs of Web RTC.
- MediaStream Is utilized to get access over the client's camera and microphone.
- RTCPeerConnection Is utilized to get access over the sound or video calling facility.
- RTCDataChannel Is utilized to get access over the peer – to – communication.
Description
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]
Description
HTML5 Web RTC is supported by all the latest browsers.Following are the browser versions supported by HTML5.
- Chrome 4.0
- Mozilla Firefox 3.5
- Opera 10.5
Points
- Web RTC project is supported by Google.
- In Web RTC screen capture also possible.
- All browsers do not support By Web RTC.