6

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?

new developer
  • 205
  • 1
  • 5
  • 12
  • 1
    have you connected the events stop and pause to the webRTC calls stop sharing video? – Giuseppe Pes Feb 01 '14 at 11:50
  • no i just added local and remote peer video element in div element. I just tried the pasue and play button in the default control. can you please tell some more detail what you mean? or what i need to do? – new developer Feb 01 '14 at 12:17

3 Answers3

14

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.

nakib
  • 4,304
  • 2
  • 28
  • 39
  • Soo many thanks! 'mediaStream.getVideoTracks()[0].enabled = !(mediaStream.getVideoTracks()[0].enabled);' worked perfect. One quetsion how i can resume the stream again? i need to make a new call again or can i do anything with getVideoTracks? – new developer Feb 02 '14 at 12:54
  • You just need to enable the video tracks again – nakib Feb 03 '14 at 13:27
  • yes worked. mediaStream.getVideoTracks()[0].enabled = "true". Thanks! – new developer Feb 04 '14 at 09:22
  • 2
    According to the MDN docs, enabled is read-only: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/enabled How do I pause and resume a track now? – waldgeist Apr 13 '16 at 19:40
  • This solution works!. However, my webcam is on when it video is disabled. – Amarnath R May 06 '21 at 18:28
5

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

Here is a working example

Ron Harlev
  • 16,227
  • 24
  • 89
  • 132
1

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

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

Shubham Tripathi
  • 178
  • 1
  • 7