问题描述:

I'm currently working on a video-conference call application with AngularJS, WebRTC and Socket.IO. I've stumbled upon an issue and am not sure how to fix it.

Basically I have a list of rooms which is looped through by an ngRepeat and then a directive is included. The html looks as following:

My rooms:

<div class="room" ng-repeat="room in userRooms">

<div class="title">{{room.roomId}}</div>

<div class="content">

<conference-call></conference-call>

</div>

</div>

The conference-call directive includes a template with the following html:

<!-- local stream -->

<div class="clients-wrapper" ng-repeat="client in room.clients | filter: getMyId()">

<div class="client-wrapper">

<video ng-src="{{localVideoURL}}" muted autoplay></video>

<div class="display-name">socket-id: {{client}} (local), stream-id: {{localStream.id}}</div>

</div>

<div style="clear:both;"></div>

</div>

<!-- remote stream -->

<div class="clients-wrapper" ng-repeat="client in room.clients | filter: '!'+getMyId()">

<div class="client-wrapper">

<video ng-src="{{peerVideoURL}}" autoplay></video>

<div class="display-name">{{client}} (remote)</div>

</div>

<div style="clear:both;"></div>

</div>

Populating the local video URL goes as follows:

function handleUserMedia(stream) {

scope.localStream = stream;

scope.localVideoURL = $sce.trustAsResourceUrl(URL.createObjectURL(stream));

scope.$apply();

};

and for the remote video URL the following code is executed:

function handleRemoteStreamAdded(event) {

scope.remoteStream = event.stream;

scope.peerVideoURL = $sce.trustAsResourceUrl(URL.createObjectURL(event.stream));

scope.$apply();

};

In a later stage this will be replaced by something like peerVideos.append(stream). But that's not what this is about. Because here's the problem:

pc.onaddstream (the native WebRTC-function which is called when a client joins) where pc = new RTCPeerConnection(pc_config, pc_constraints); is never called.

I think this is because of the following:

Whenever someone joins the room the server emits a call which on the client side results in a $scope.$apply() call (the AngularJS way to update and refresh the scope and re-render the page). This makes sure the client sees the remote client in the room he's in. However, because of this $scope.$apply() call the whole conference-room directive is refreshed and re-initialized. This causes the problem where pc.onaddstream is never called, because no-one's ever added to the peer connection, because it is re-initialized, or atleast I think this is what happens.

Has anyone of you had a similar problem? And how should I approach this issue? Thanks in advance.

相关阅读:
Top