I want to capture video with the webcamera. And there is the right decision:

 window.onload = function () {
        var video = document.getElementById('video');
        var videoStreamUrl = false;

        navigator.getUserMedia({video: true}, function (stream) {

        videoStreamUrl = window.URL.createObjectURL(stream);

        video.src = videoStreamUrl;
        }, function () {
        console.log('error');
        });
        };

but produces an error in the browser:

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead. See  for more details.

how to use HTMLMediaElement.srcObject for my purposes ? Thanks for your time!

I want to capture video with the webcamera. And there is the right decision:

 window.onload = function () {
        var video = document.getElementById('video');
        var videoStreamUrl = false;

        navigator.getUserMedia({video: true}, function (stream) {

        videoStreamUrl = window.URL.createObjectURL(stream);

        video.src = videoStreamUrl;
        }, function () {
        console.log('error');
        });
        };

but produces an error in the browser:

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus./features/5618491470118912 for more details.

how to use HTMLMediaElement.srcObject for my purposes ? Thanks for your time!

• javascript
• html

• Have a look: codepen.io/blaberus/pen/raGdBG – Alessandro.Vegna Commented Apr 3, 2018 at 11:13
• developers.google./web/updates/2016/10/capture-stream – C3roe Commented Apr 3, 2018 at 11:15
• @CBroe this link while it does contain somewhere the code OP was asking for is a bit mislead/ing. This is about capturing a MediaStream from a MediaElement or canvas, while the question doesn't ask how to capture anything, but about a problem while capturing a MediaDevice. – Kaiido Commented Apr 3, 2018 at 12:41

1 Answer 1

MediaElement.srcObject should allow Blobs, MediaSources and MediaStreams to be played in the MediaElement without the need to bind these sources in the memory for the lifetime of the document like blobURIs do.

^{(Currently no browser support anything else than MediaStream though...)}

Indeed, when you do URL.createObjectURL(MediaStream), you are telling the browser that it should keep alive this Source until your revoke the blobURI, or until the document dies.
In the case of a LocalMediaStream served from a capturing device (camera or microphone), this also means that the browser has to keep the connection to this device open.

Firefox initiated the deprecation of this feature, one year or so ago, since srcObject can provide the same result in better ways, easier to handle for everyone, and hence Chrome seems to finally follow (not sure what's the specs status about this).

So to use it, simply do

MediaElement.srcObject = MediaStream;

Also note that the API you are using is itself deprecated (and not only in FF), and you shouldn't use it anymore. Indeed, the correct API to capture MediaStreams from user Media is the MediaDevices.getUserMedia one.

This API now returns a Promise which gets resolved to the MediaStream.

So a plete correction of your code would be

var video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(function(stream) {
    video.srcObject = stream;
  })
  .catch(function(error) {
    console.log('error', error);
  });

<video id="video"></video>

Or as a fiddle since StackSnippets® overprotected iframe may not deal well with gUM.