HTML5 Web RTC was introduced by World Web Consortium (W3C) which is used to make a video call, video chat, P2P file sharing among the browsers. The detail description of the following concepts is discussed below.
- About Web RTC
- Implementation of Web RTC
- Browser Support
About HTML5 Web RTC
In HTML5 the Web RTC is called Web Real-Time Communication that provides browsers and mobile applications that can communicate using simple APIs. This Web RTC is maintained by the Google chrome team which is a simple application to start video chat.
Here we listed the API’s of Web RTC
- Media Stream- used to get access over the client camera and microphone.
- RTCPeerConnection- used to get access for sound or video call facility.
- RTCDataChannel-used to get access to peer-to-peer communication.
Implementation of HTML5 Web RTC
To implement Web RTC we use API of Web RTC. The media stream is mainly used to define different types of media. For example, select any one video player then you will get a popup message from the browser regarding share microphone and camera. If a user is willing to share then click on OK of an alert message and the browser will accept the user peripherals.
The media stream has two methods stream.getAudioTracks() and stream.VideoTracks(). At first, the browser will check for audio files if present then the browser will play the track otherwise returns empty array. However in a video stream, if webcam gets connected then it will respond to MediaStreamTrack which represents the webcam.
Implementation of HTML5 Web RTC Example
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);
To capture the screen in the chrome browser is done by media stream source. The peer to peer communication is used to communicate between the browsers where network information, signaling, session control, media information are required. The several mechanisms for communication between browsers like SIP, XMPP, two-way communication.The createSignalingChannel() is described in below code.
createSignalingChannel() Example
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));
};
Browser Support For HTML5 Web RTC
- The HTML5 RTC is supported by all the latest browsers but not all browsers.
- Web RTC is supported by Google.
- The Web RTC allows screen capture.