Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying WebRTC Cookbook
  • Table Of Contents Toc
WebRTC Cookbook

WebRTC Cookbook

By : Andrii Sergiienko
5 (1)
close
close
WebRTC Cookbook

WebRTC Cookbook

5 (1)
By: Andrii Sergiienko

Overview of this book

If you are a JavaScript developer with a basic knowledge of WebRTC and software development, but want to explore how to use it in more depth, this book is for you.
Table of Contents (10 chapters)
close
close
9
Index

Detecting WebRTC functions supported by a browser

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.

Getting ready

This task is relevant for the client side only, so all the code will be written in JavaScript. Thus, no specific preparation is needed.

How to do it…

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;
};

How it works…

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's more…

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.

See also

You can find more information on the adapter at the web page http://www.webrtc.org/web-apis/interop.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
WebRTC Cookbook
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon