WebRTC与AngularJS：无法将视频流绑定到HTML视频元素

我正在尝试使WebRTC启用应用程序。在客户端，我使用AngularJS，而在服务器端，我使用NodeJS。我在将视频流绑定到视频元素ng-src时遇到了一些麻烦。WebRTC与AngularJS：无法将视频流绑定到HTML视频元素

以下是控制器：

.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'); 
     } 

    })

下面是HTML页面，（我用玉模板）

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

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

请让我知道这是不正确的做法。我首先尝试了ng-repeat，然后直接给了ng-src。在控制器内部，当我在控制台上打印时，我看到媒体流对象（它是这样的： - “Angular：mediastream：4a15fb80-3aa7-4ddf-86b4-3b0cea498784”），但是我在视图中看不到任何视频侧。

来源

2014-03-04 Sam Fast

这是一个非常明显的问题，但是强制性的：您每次打电话给getUserMedia时，是否都点击“接受”浏览器问题来使用网络摄像头？ –

当然，我这样做。我在没有AngularJs的纯HTML中尝试过类似的例子，它工作。 –

您需要在回调中调用$scope.$apply来更新范围。示例：

function successCallback(newStream) { 
    $scope.$apply(function() { 
     $scope.streams.push(URL.createObjectURL(newStream)); 
    }); 
}

来源

2014-03-04 21:48:17

它在浏览器控制台上显示以下错误。 GET http：// localhost：3000/stream [HTTP/1.1 404 Not Found 2ms] HTTP加载失败，状态为404.媒体资源http：// localhost：3000 /流的加载失败。 –

尝试改变你的Jade的最后一行到'视频（src ='{{stream}}'，自动播放）' –

我试过了，但没有奏效。然后我也尝试了'video（src ='{{stream.blob}}'，autoplay）'，它什么也没做。然后我试着'video（src ='stream.blob'，autoplay）'，它显示了视频元素，它就像黑色的三角形，什么也没有显示。 –

如果出现内插错误，则可能需要将mediaStream的基本URL添加到白名单配置中。例如：

streamApp.config(function ($sceDelegateProvider) { 
    $sceDelegateProvider.resourceUrlWhitelist([ 
    'self',     // trust all resources from the same origin 
    '*://www.youtube.com/**', // trust all resources from `www.youtube.com` 
    '*:blob:http://yourdomain.com/**' // this might be how to test from mediaStream. 
    ]); 
})

您可能需要稍微调整一下。希望这会有所帮助

来源

2014-09-01 22:43:42 user15163

WebRTC与AngularJS：无法将视频流绑定到HTML视频元素

回答

相关问题