WebRTC getUserMedia promise api support in Chrome

Question

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?

I get the same error on Firefox as well, when above code is served (using adapter shim). Firefox says it supports promise based API [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) — sthustfo, Dec 10 '15 at 10:41
"[Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia)". — Kevin, Dec 10 '15 at 11:06
@Kevin I am making use of the shim/adaptor. And I think it makes use of Navigator.MediaDevices.getUserMedia — sthustfo, Dec 10 '15 at 12:03
@Kevin - you were pointing to the correct issue. If instead of using getUserMedia(), I use navigator.mediaDevices.getUserMedia() then the promise based API works. I was assuming that the adaptor/shim layer will handle such issues and would alias to the proper API (in this case navigator.mediaDevices.getUserMedia()). Can you put that as an answer, so that I can accept it? — sthustfo, Dec 10 '15 at 16:33
I'm not exactly sure what the problem is in your case, so I can't formulate a proper answer that will benefit future users. But you can answer your own question and accept it, you can explain exactly what you did to make it work. — Kevin, Dec 11 '15 at 07:57

jib · Accepted Answer · 2016-04-27T16:45:07.373

14

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.

edited Apr 27 '16 at 16:45

answered Dec 11 '15 at 19:20

jib

40,579
17
100
158

As @kevin also mentioned earlier, the proper way is to use the namespaced api which is navigator.mediaDevices.getUserMedia(). I was under the wrong impression that adapter.js will automatically translate the getUserMedia() call to navigator.mediaDevices.getUserMedia() if the underlying browser supports the newer namespaced API. – sthustfo Dec 15 '15 at 10:59
1

@sthustfo right, that would have been clever, but as I understand adapter.js is trying to move away from non-standard helper functions, to purely polyfilling the spec. – jib Dec 16 '15 at 04:31
But it doesn't support on Safari! – Aniruddha Shevle Feb 26 '18 at 14:56
1

@AniruddhaShevle It [works](https://fiddle.jshell.net/jib1/srn9db4h/show/) in [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/). – jib Feb 26 '18 at 21:44
@jib Yes right as you said it works on Safari Technology Preview. But is there any way to work this on basic Safari! – Aniruddha Shevle Feb 28 '18 at 12:53

score 2 · Answer 2 · answered Jan 23 '20 at 12:08

2

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.

answered Jan 23 '20 at 12:08

Vikash Kumar

1,096
11
10

Where to add this in chrome? – Abdullah Khan Dec 12 '20 at 05:45
1

Type this in the address bar like a url.This will directly take you there. – Vikash Kumar Dec 12 '20 at 12:22

score 1 · Answer 3 · answered Jul 15 '19 at 13:12

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).

score 0 · Answer 4 · answered Jun 10 '20 at 09:19

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

WebRTC getUserMedia promise api support in Chrome

4 Answers4

Linked