尽管有src

Question

我正在尝试根据this教程制作一个简单的AngularJS WebRTC视频聊天应用。

我能够连接到连接客户端，添加流并播放我自己的流，但不知怎的，我无法播放远程流。

当我检查元素时，我可以看到视频播放器实际上有一个blob源，但它不会播放它。

谁能告诉我它为什么不显示？

HTML元素：

房间控制员：

angular.module('publicApp').controller('RoomCtrl', function ($sce, VideoStream, $location, $routeParams, $scope, Room)
{
    if (!window.RTCPeerConnection || !navigator.getUserMedia) {
  $scope.error = 'WebRTC is not supported by your browser. You can try the app with Chrome and Firefox.';
  return;
}

var stream;

VideoStream.get()
.then(function (s) {
  stream = s;
  Room.init(stream);
  stream = URL.createObjectURL(stream);
  if (!$routeParams.roomId) {
    Room.createRoom()
    .then(function (roomId) {
      $location.path('/room/' + roomId);
    });
  } else {
    Room.joinRoom($routeParams.roomId);
  }
}, function () {
  $scope.error = 'No audio/video permissions. Please refresh your browser and allow the audio/video capturing.';
});

$scope.peers = [];

Room.on('peer.stream', function (peer) {
  console.log('Client connected, adding new stream');
  $scope.peers.push({
    id: peer.id,
    stream: URL.createObjectURL(peer.stream)
  });
  console.log($scope.peers);
});

Room.on('peer.disconnected', function (peer) {
  console.log('Client disconnected, removing stream');
  $scope.peers = $scope.peers.filter(function (p) {
    return p.id !== peer.id;
  });
});

$scope.getLocalVideo = function () {
  return $sce.trustAsResourceUrl(stream);
};
});

房间工厂：

angular.module('publicApp').factory('Room', function ($rootScope, $q, Io, config)
{
var iceConfig = { 'iceServers': [{ 'url': 'stun:stun.l.google.com:19302' }]},
    peerConnections = {},
    currentId, roomId,
    stream;

function getPeerConnection(id)
{
  if (peerConnections[id]) {
    return peerConnections[id];
  }
  var pc = new RTCPeerConnection(iceConfig);
  peerConnections[id] = pc;
  pc.addStream(stream);
  pc.onicecandidate = function (evnt) {
    socket.emit('msg', { by: currentId, to: id, ice: evnt.candidate, type: 'ice' });
  };
  pc.onaddstream = function (evnt) {
    console.log('Received new stream');
    api.trigger('peer.stream', [{
      id: id,
      stream: evnt.stream
    }]);
    if (!$rootScope.$$digest) {
      $rootScope.$apply();
    }
  };
  return pc;
}

function makeOffer(id)
{
  var pc = getPeerConnection(id);
  pc.createOffer(function (sdp) {
    pc.setLocalDescription(sdp);
    console.log('Creating an offer for', id);
    socket.emit('msg', { by: currentId, to: id, sdp: sdp, type: 'sdp-offer' });
  }, function (e) {
    console.log(e);
  },
  { mandatory: { OfferToReceiveVideo: true, OfferToReceiveAudio: true }});
}

function handleMessage(data)
{
  var pc = getPeerConnection(data.by);
  switch (data.type) {
    case 'sdp-offer':
      pc.setRemoteDescription(new RTCSessionDescription(data.sdp), function () {
        console.log('Setting remote description by offer');
        pc.createAnswer(function (sdp) {
          pc.setLocalDescription(sdp);
          socket.emit('msg', { by: currentId, to: data.by, sdp: sdp, type: 'sdp-answer' });
        });
      });
      break;
    case 'sdp-answer':
      pc.setRemoteDescription(new RTCSessionDescription(data.sdp), function () {
        console.log('Setting remote description by answer');
      }, function (e) {
        console.error(e);
      });
      break;
    case 'ice':
      if (data.ice) {
        console.log('Adding ice candidates');
        pc.addIceCandidate(new RTCIceCandidate(data.ice));
      }
      break;
  }
}

var socket = Io.connect(config.SIGNALIG_SERVER_URL),
    connected = false;

function addHandlers(socket)
{
  socket.on('peer.connected', function (params) {
    makeOffer(params.id);
  });

  socket.on('peer.disconnected', function (data) {
    api.trigger('peer.disconnected', [data]);
    if (!$rootScope.$$digest) {
      $rootScope.$apply();
    }
  });

  socket.on('msg', function (data) {
    handleMessage(data);
  });
}

var api = {
  joinRoom: function (r) {
    if (!connected) {
      socket.emit('init', { room: r }, function (roomid, id) {
        currentId = id;
        roomId = roomid;
      });
      connected = true;
    }
  },
  createRoom: function () {
    var d = $q.defer();
    socket.emit('init', null, function (roomid, id) {
      d.resolve(roomid);
      roomId = roomid;
      currentId = id;
      connected = true;
    });
    return d.promise;
  },
  init: function (s) {
    stream = s;
  }
};
EventEmitter.call(api);
Object.setPrototypeOf(api, EventEmitter.prototype);

addHandlers(socket);
return api;
});

指令：

angular.module('publicApp').directive('videoPlayer', function ($sce) {
return {
  template: '<div><video ng-src="{{trustSrc()}}" autoplay></video></div>',
  restrict: 'E',
  replace: true,
  scope: {
    vidSrc: '@'
  },
  link: function (scope) {
    console.log('Initializing video-player');
    scope.trustSrc = function () {
      if (!scope.vidSrc) {
        console.log('No vidSrc found');
        return undefined;
      }
      return $sce.trustAsResourceUrl(scope.vidSrc);
    };
  }
};
});

Room.html：

<div class="video-wrapper">
  <video-player class="col-md-4" ng-repeat="peer in peers" vid-src="{{peer.stream}}"></video-player>
</div>

<div class="video-wrapper">
  <div class="col-md-2">
    <video ng-src="{{getLocalVideo()}}" autoplay muted></video>
  </div>
</div>