webrtc video stream stop sharing

Question

I have created webrtc based video chat suing peerjs.

The local and remote video element is created using control:

local: 'video id= [local_peer_id] autoplay="true" controls="true">'

remote: and 'video id= [remote_peer_id] autoplay="true" controls="true">'

Now during the video chat if local user mute auido remote user can not hear anything and its working perfect.

Problem is with the video. If local user pause his own video he can see the video is paused but remote user still can see his video live.

on the other hand if remote user pause his video, local user still can see his video live.

Any one tell what need to do to deploy the feathure

"Pause" and "resume" video that works real time for both peer?

Answer 1

You need to know the difference between the HTML tags and the WebRTC streams...

You can have streams running, without having them attached to any HTML tag, and the media can still be sent and received by each peer. So, each peer can attach the stream to a audio/video tag, and the tag will only act as a player that you use to play a stream that is already running.

So, if you mute the HTML tag, you will only be muting the player, and not the stream. If you want to make anything to have effect on the other peer, you need to do stuff on the stream or in the peer connection.

In particular, to mute and resume audio or video, you need to toggle the media tracks in the media stream

    // create a button to toggle video 
    var button = document.createElement("button");
    button.appendChild(document.createTextNode("Toggle Hold"));

    button.onclick = function(){
        mediaStream.getVideoTracks()[0].enabled =
         !(mediaStream.getVideoTracks()[0].enabled);
    }

To pause/resume audio, use getAudioTracks() instead.

Answer 2

calling mediaStream.stop() will stop the camera
where mediaStream is the stream that you got when calling getUserMedia

Here is a working example

Answer 3

mediaStream.getAudioTracks()[0].stop();
mediaStream.getVideoTracks()[0].stop();

Hope this will work with new standards. Its working fine in my app.