How to access video streaming objects via angularjs approach?

Question

During HTML5 implementation regarding media capabilities by referring to https://davidwalsh.name/demo/camera.php, it points to

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
   // Not adding `{ audio: true }` since we only want video now
   navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
       video.src = window.URL.createObjectURL(stream);
       video.play();
    });
}

for video streaming the object.

Instead of that i want to use angular way to achieve this, so i applied these changes :

var video = angular.element($("video"));
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // Not adding `{ audio: true }` since we only want video now
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
   });
}

But from angularjs approach, I am unable to stream the video object, any suggestions on this or any alternative approach?

Kaiido · Accepted Answer · 2017-06-01 11:25:24Z

1

I don't know angular at all, but after reading the docs, I see that the returned value of angular.element($("video")), i.e video in your code, is a jQuery object. _{(which makes your use quite questionable, or I may be missing what's $ ...)}

So you need to go until the real element, to set its property and call its play method.

By the way, video.src = URL.createObjectURL(MediaStream) is being deprecated, one should use video.srcObject = MediaStream instead.

So all in all, your code should be

// this is an jQuery object
var $video = angular.element($("video")); // not sure what is '$' so I leave it here
// this is your video element
var video = $video[0];
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    video.srcObject = stream;
    video.play();
  });
}

edited Jun 1, 2017 at 11:25

answered Jun 1, 2017 at 11:17

Kaiido

140k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vasu Over a year ago

var $video = angular.element($("video")); actually this should be var $video = angular.element($("#video"));, as this is angular we have syntax like this , anyway it resolves my issue.....thx a lot :)

mirik · Accepted Answer · 2020-02-17 17:56:58Z

0

The most angular way I've seen is:
angular.element('#myVideo')[0].srcObject = stream

answered Feb 17, 2020 at 17:56

mirik

5165 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to access video streaming objects via angularjs approach?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related