WebRTC

Example access Camera with getUserMedia WebRTC

20 Jun , 2013  

Here is quick example to access camera from browser using getUserMedia(). Make sure you have latest Firefox / Chrome version and have getUserMedia enabled.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
    <head>
        <title>Getting started with RTC</title>
    </head>
    <body>
        <video id="video" width="320" height="400"></video>

        <script type="text/javascript">
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

            function initialize() {
                // The source video.
                video = document.getElementById("video");
                width = video.width;
                height = video.height;

                // Get the webcam's stream.
                navigator.getUserMedia({
                    video : true
                }, startStream, function() {
                });
            }

            function startStream(stream) {
                video.src = URL.createObjectURL(stream);
                video.play();

            }

            initialize();
        </script>

    </body>
</html>

,

WebRTC

Example check WebRTC support enabled in Chrome Browser Linux

20 Jun , 2013  

WebRTC is hot trends right know. We can test it on Fedora 18 with the latest google chrome. At this example, I use Chrome 28. First, we need to enable getUserMedia() in Google Chrome by enter URL “chrome://flags” and find for “getUserMedia”. Then we can enable and relaunch the browser.

Now, we can test if this browser have capabilites in WebRTC, especially in getUserMedia() by :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <title>Getting started with RTC</title>
        <script type="text/javascript">
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
           
            if(navigator.getUserMedia) {
                navigator.getUserMedia({
                    video: true,
                    audio: true,
                }, onSuccess, onError);
            } else {
                console.log("GetUserMedia not supported");
            }
           
            function onSuccess() {
                console.log("GetUserMedia success");
            }
           
            function onError() {
                console.log("getUserMedia not supported");
            }
        </script>
    </head>
    <body>

    </body>
</html>

Then save this into “rtc.html” and open it from chrome browser. If everything works, we should see :

,