Question

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

以下是控制器：

.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页面，（我使用jade模板）

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。在控制器内部，当我在控制台上打印时，我看到了mediastream对象（它是这样的： - “Angular：mediastream：4a15fb80-3aa7-4ddf-86b4-3b0cea498784”）但我在视图上看不到任何视频侧。

Answer 1

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

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

Answer 2

如果出现插值错误，则可能需要将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. 
  ]);
 })

你可能不得不乱用它。希望这有帮助

使用AngularJS的WebRTC：无法将视频流绑定到HTML视频元素

2 个答案: