CODEWITHSUNDEEP
google-chromewebrtcgetusermedia
sthustfo
sthustfo

Reputation: 1239

WebRTC getUserMedia promise api support in Chrome

Does chrome support promise based APIs for WebRTC? I am not able to get the getUserMedia() promised based API working in Chrome.

<!DOCTYPE html>
<html>
    <head>
        <title> Mitel WebRTC client </title>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src='dist/webrtc.min.js'></script>

        <script type="text/javascript">
            function startUp() {

                var options = {
                    audio: true,
                    video: true
                };
                if (getUserMedia) {
                    getUserMedia(options)
                    .then(function (stream) {
                        console.log("Acquired audio and video!");
                    })
                    .catch(function (err) {
                        console.log(err.name + ": " + err.message);
                    });
                } else {
                    alert("WebRTC not supported on this browser");
                }
            }
        </script>
    </head>

    <body onload="startUp();">
        <h1>WebRTC Promise API Client Application</h1>
    </body>
</html>

On the console, I see the following error

This appears to be Chrome
adapter-latest.js:32 chrome: {"audio":true,"video":true}
adapter-latest.js:410 Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': The callback provided as parameter 2 is not a function.

I want to make use of promise based API. Am I missing something?

Upvotes: 5

Views: 22394

Answers (4)

shahida
shahida

Reputation: 335

You can also get this error if you're running Chrome your app in http. If so, you should run your app as https. Only localhost urls with http are supported by Chrome.

`http://jsfiddle.net/jib1/srn9db4h/ `
// not working

`https://jsfiddle.net/jib1/srn9db4h/`
//working with https

Upvotes: 0

Vikash Kumar
Vikash Kumar

Reputation: 1216

Although this is not recommended but still you can try this to test your project by disabling security for media.

chrome://flags/#unsafely-treat-insecure-origin-as-secure

you can add your IP and chrome will treat it as secure.

Upvotes: 2

Maksim Tikhonov
Maksim Tikhonov

Reputation: 790

To access navigator.mediaDevices you must to connect your site with HTTPS connection. There are no access this feature with HTTP.

https://developers.google.com/web/fundamentals/media/capturing-images/

Warning: Direct access to the camera is a powerful feature. It requires consent from the user, and your site MUST be on a secure origin (HTTPS).

Upvotes: 1

jib
jib

Reputation: 42450

It is not implemented yet in Chrome, but it works there if you use the official adapter.js WebRTC polyfill: https://jsfiddle.net/srn9db4h/

var constraints = { video: true, audio: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

Firefox and Edge support it natively FWIW.

Update: Chrome (50) appears to support this now. And Chrome 52 even supports srcObject.

Upvotes: 14

Related Questions