Display html video using getusermedia

Question

I wish to display html video using the getusermedia (captured using webcam) after user click the button. The video tag will be display using innerhtml.

When user click the button the video is displayed but it does not capture the webcam.

<button id="rec" onclick="onBtnRecordClicked()">Record</button>
<button id="stop"  onclick="onBtnStopClicked()" disabled>Stop</button>

 <div id="videos-container"></div>

<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    document.getElementById('rec').onclick = function() {
    var htmlElement = document.createElement('video');
    htmlElement.setAttribute('autoplay', true);
    htmlElement.setAttribute('controls', true);
    videosContainer.insertBefore(htmlElement, videosContainer.firstChild);

    var mediaConfig = {
            video: htmlElement,
            onsuccess: function(stream) {
                src: URL.createObjectURL(stream);
            },
            onerror: function() {
                alert('unable to get access to your webcam');
            }
        };
        getUserMedia(mediaConfig);
    }

var videosContainer = document.getElementById('videos-container') || document.body;

</script>

i am getting getUserMedia not defined in console.

code in jsfiddle https://jsfiddle.net/590c2mcp/

@jib the code doesn't work on chrome? i test in chrome but there no video. it work on firefox.. but my site features work mostly in chrome.. — Mick Jack, Mar 15 '16 at 01:44
Here's an [updated fiddle](https://jsfiddle.net/jib1/k8rened5/) that should work in Chrome (which doesn't support `srcObject` yet). Note that this still requires either the [adapter.js](https://github.com/webrtc/adapter) polyfill or enabling *chrome://flags/#enable-experimental-web-platform-features* in Chrome. Or you can use the deprecated non-promise api [`navigator.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia). — jib, Mar 15 '16 at 16:05

score 2 · Answer 1 · edited May 23 '17 at 10:27

To make getUserMedia work in all browsers, including Chrome, you have a two options:

Best option: Use adapter.js, the official WebRTC polyfill, until Chrome unprefs the latest APIs. (https fiddle for Chrome):

navigator.mediaDevices.getUserMedia({ video:true, audio:true })
  .then(stream => video.srcObject = stream)
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<video id="video" height="120" width="160" autoplay></video><br>
<div id="div"></div>

It shims both navigator.mediaDevices and srcObject.

Use the deprecated API for a while longer (https fiddle for Chrome):

navigator.getUserMedia = navigator.mozGetUserMedia ||
                         navigator.webkitGetUserMedia;

new Promise((y, n) => navigator.getUserMedia({ video:true, audio:true }, y, n))
  .then(stream => video.src = URL.createObjectURL(stream))
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;

<video id="video" height="120" width="160" autoplay></video><br>
<div id="div"></div>

Though this may not work in MS Edge.

I'm not recommending the second option, more including it for historical context, as there's still a lot of code floating out there that looks more or less like it (minus the promise wrapper). Once you start using constraints, you'll notice those have changed too, so stick with adapter.js.

What would we need to do to get this work without adapter https://webrtc.github.io/adapter/adapter-latest.js — Ankit, Sep 07 '22 at 15:38
@Ankit this is an old answer. You don't need adapter.js for this anymore. — jib, Sep 14 '22 at 01:21

score -1 · Answer 2 · answered Mar 14 '16 at 06:49

-1

There is no getUserMedia in the global scope, you need to use the getUserMedia method from mediaDevices

navigator.mediaDevices.getUserMedia(mediaConfig);

answered Mar 14 '16 at 06:49

Arun P Johny

384,651
66
527
531

i am still getting getUserMedia not defined after imputing yr code. – Mick Jack Mar 14 '16 at 07:03

score -1 · Answer 3 · answered Nov 27 '20 at 17:54

-1

After chrome 74, getUserMedia is only available in the HTTPS context. However, you can disable that in the experimental features here: chrome://flags/#unsafely-treat-insecure-origin-as-secure

answered Nov 27 '20 at 17:54

Parsa Safavi

218
2
10

Display html video using getusermedia

3 Answers3