WebRTC with AngularJS

[Sojharo Mangi]

Hello,

I am trying to make WebRTC enabled application. On client side, I am using AngularJS and on server side, I use NodeJS. I am having some trouble to bind video stream to video element ng-src.

Following is the Controller:

.controller('WebRTCController', function($scope){

      $scope.streams = [];

       getUserMedia({video : true , audio : true}, successCallback, errorCallback);
      
       function successCallback(newStream){
          
       
            $scope.streams.push(URL.createObjectURL(newStream));
           
            console.log('Angular: '+ $scope.streams)
       }
      
       function errorCallback(err){
        console.log('Some Error');
       }
      
    })


Here is the HTML page, (I use jade template)

div(ng-controller='WebRTCController')
       | Hello {{streams}}
       br
       video(ng-src='streams', autoplay='true')

       div(ng-repeat='stream in streams')
          video(ng-src='stream', autoplay)

Kindly, let me know if this is not the correct approach. I tried first in ng-repeat and then also gave streams to ng-src directly. Inside  the controller, when I print on console, I see the mediastream (it is something like this : - "Angular: mediastream:4a15fb80-3aa7-4ddf-86b4-3b0cea498784") but I see it empty in my view.

[Luke Kende]

I really don't know enough about WebRTC but you got me checking it out.

I will say that if a library is being used outside of angular, but a reference is inside angular controller, you will have to use $scope.$apply function to keep within the digest loop of Angular.  That may be part of it.

[tomw]

got the same issue - anyone has found a solution to it? Adding $scope.$apply did not fix it...

--tomw

[Tony pee]

I just took a look at your issues, as im working on webrtc myself. There were a few:

- ngSrc needs {{ exp }} 

- you need to set src on 'self' not 'this' or you have scoping issues

- you need autoplay=true - to start the video

http://plnkr.co/edit/NEHrURXXPD5MDpJa13dS?p=preview

otherwise, it works well. 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.

--

Tony Polinelli

[Tony pee]

oh, and you do need the apply() otherwise it wouldnt update angular

--

Tony Polinelli

[Brian Pulito]

Looks like I may be late to this party but here is a WebRTC/Angular/Node.js solution you might want to try: https://angular-rtcomm.wasdev.developer.ibm.com/