Video.js: mediaStream in videojs container not working

[erc2804]

I am trying to get my mediaStream from the local webcam to show in the videojs container.
Without videojs it is working fine.

First I'm getting the userMedia, then I add it to the video element with srcObject.

The error I get:

• MEDIA_ERR_SRC_NOT_SUPPORTED

What I tried so far:

• using the deprecated URL.createObjectURL(mediaStream) and add it directly to a dynamically added source container.

JS:

navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
                var vid = $("#stream")[0];
                vid.srcObject = stream;
                vid.onloadedmetadata = function () { vid.play(); }
                videojs('stream');
}).catch(function(e) { console.log("error: ", e); });

HTML:

<video id="stream" class="video-js vjs-default-skin" preload="none"></video>

[gkatsev]

Video.js moves or re-creates the video element when it is initialized which could potentially cause issues setting the srcObject.
I would initialize Video.js as early as possible, potentially before even calling getUserMedia() and then you can get the video element via player.tech().el() to which you can then set the srcObject. Something like:

var player = videojs('stream');
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
  var vid = player.tech().el();
  vid.srcObject = mediaStream;
});

Hope that helps.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.