WebRTC is not fully supported by all available web browsers at this time. Moreover, there is a chance that your application will be running under some kind of exotic environment or web browser that does not support WebRTC. So you need to have some mechanism that would enable you to detect whether the environment in which your web application is running supports the necessary WebRTC features the application is going to use. In this recipe, we will cover the basic method of doing that.
This task is relevant for the client side only, so all the code will be written in JavaScript. Thus, no specific preparation is needed.
You can write a JavaScript library that can be used to detect which WebRTC methods are available under the environment and by what names they are known for your application.
The following code represents a basic but productive example of such a kind of library:
var webrtcDetectedVersion = null;
var webrtcDetectedBrowser = null;
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function initWebRTCAdapter() {
if (navigator.mozGetUserMedia) {
webrtcDetectedBrowser = "firefox";
webrtcDetectedVersion = parseInt(navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1], 10);
RTCPeerConnection = mozRTCPeerConnection;
RTCSessionDescription = mozRTCSessionDescription;
RTCIceCandidate = mozRTCIceCandidate;
getUserMedia = navigator.mozGetUserMedia.bind(navigator);
attachMediaStream =
function(element, stream) {
element.mozSrcObject = stream;
element.play();
};
reattachMediaStream =
function(to, from) {
to.mozSrcObject = from.mozSrcObject;
to.play();
};
MediaStream.prototype.getVideoTracks =
function() {
return [];
};
MediaStream.prototype.getAudioTracks =
function() {
return [];
};
return true;
} else if (navigator.webkitGetUserMedia) {
webrtcDetectedBrowser = "chrome";
webrtcDetectedVersion = parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2], 10);
RTCPeerConnection = webkitRTCPeerConnection;
getUserMedia = navigator.webkitGetUserMedia.bind(navigator);
attachMediaStream =
function(element, stream) {
element.src = webkitURL.createObjectURL(stream);
};
reattachMediaStream =
function(to, from) {
to.src = from.src;
};
if (!webkitMediaStream.prototype.getVideoTracks) {
webkitMediaStream.prototype.getVideoTracks =
function() {
return this.videoTracks;
};
webkitMediaStream.prototype.getAudioTracks =
function() {
return this.audioTracks;
};
}
if (!webkitRTCPeerConnection.prototype.getLocalStreams) {
webkitRTCPeerConnection.prototype.getLocalStreams =
function() {
return this.localStreams;
};
webkitRTCPeerConnection.prototype.getRemoteStreams =
function() {
return this.remoteStreams;
};
}
return true;
} else return false;
};This solution tests which WebRTC API methods are available in the environment and how they are named. So your application can use certain API function names that will be relevant for any web browser, without using browser-specific function names.
There is another way to solve this task. You don't necessary have to write your own adapter. You can take the adapter prepared by Google. It can be found at http://apprtc.webrtc.org/js/adapter.js. You just need to include it in your JavaScript code.
You can also consider using a browser's plugin that enables the use of WebRTC in Safari and Internet Explorer. You can get these at https://temasys.atlassian.net/wiki/display/TWPP/How+to+integrate+the+plugin+with+your+website.
You can find more information on the adapter at the web page http://www.webrtc.org/web-apis/interop.