Search code examples
angularjsmediaangular-directivegetusermedia

How do you pass a mediaStream to Angularjs directive

I have an application that takes pictures on several pages. I have a camera service that configures the camera and captures the images. Naturally the user would like to preview the picture before capturing. So I would like to preview the camera stream in an angular-ui $modal.

This Camera Test Fiddle is doing what I want, but when I try to assign the camera service stream to the src attribute of the target video element in the directive

   function postLink(scope, element, attrs) {
     cameraService.getCamera()
    .then(function(stream){
       element.find('video').attr("src", stream);
    });

I get the following error

enter image description here

It has something to do with how angular builds the html. I am a getUserMedia novice, so any suggestions for a work-around?

Solution

  • Here's what worked for me

      function postLink(scope, element, attrs) {
     cameraService.getCamera()
    .then(function(stream){
       var blob = URL.createObjectURL(stream);
       element.attr("src", blob);
       element[0].play();
    });
  }