Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add audio/video mute/unmute buttons in WebRTC video chat

I'm trying to create WebRTC video chat. Now I'm stacked on creating media-tracks buttons (mute video to enable or disable video sending, and mute audio to make the same with audio). Here is my code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script>
  <script>
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  var myStream;
  var peer = new Peer({key: 'PeerJS key'});
  var setOthersStream = function(stream){
    $('#others-video').prop('src', URL.createObjectURL(stream));
  };

  var setMyStream = function(stream){
    myStream = stream;
    $('#video').prop('src', URL.createObjectURL(stream));

  };

  peer.on('open', function(id){
    $('#peer-id').text(id);
  });

  peer.on('call', function(call){
    call.answer(myStream);
    call.on('stream', setOthersStream);
  });

  $(function(){
    navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){});

    $('#call').on('click', function(){
      var call = peer.call($('#others-peer-id').val(), myStream);
      call.on('stream', setOthersStream);
    });
  });

  peer.on('error', function(e){
    console.log(e.message);
  });

Can anyone guide me please?

like image 911
tagaism Avatar asked Dec 26 '15 08:12

tagaism


People also ask

How do I mute and unmute in Webrtc?

enabled=false it muted a mic in my local stream but when i set it back true it enable to unmute. Here is my code mute/unmute for a localstream: getLocalStream(function (stream,enable) { if (stream) { for (var i = 0; i < stream. getTracks().

How do I mute audio in Webrtc?

The AppRTCDemo application has a microphone mute button and it is mapped to the setEnabled API on your local audio track.

How do I unmute a mute video?

Hover your cursor over the clip you would like to change the audio options for and click on the ••• menu at the top right-hand corner of the clip. If the clip is muted, click on Unmute to enable audio in the dropdown menu.

How do I mute my mic in Javascript?

getAudioTracks()[0]. enabled = false will mute your mic.


2 Answers

The video and audio tracks in your stream have an enabled attribute you can modify. E.g.:

function muteMic() {
  myStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
}

function muteCam() {
  myStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
}
like image 91
jib Avatar answered Sep 25 '22 04:09

jib


finally I got it work! The first answer for question from this "webrtc video stream stop sharing" guided me to the right direction. I created two new functions to mute video and audio, and bound them to appropriate buttons in html file. And finally it became look like this:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var myStream;
var peer = new Peer({key: 'PeerJS key'});

var setOthersStream = function(stream){
  $('#others-video').prop('src', URL.createObjectURL(stream));
};

var setMyStream = function(stream){
  myStream = stream;
  $('#video').prop('src', URL.createObjectURL(stream));
};

peer.on('open', function(id){
  $('#peer-id').text(id);
});

peer.on('call', function(call){
  call.answer(myStream);
  call.on('stream', setOthersStream);
});

$(function(){
  navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){});
  $('#call').on('click', function(){
    var call = peer.call($('#others-peer-id').val(), myStream);
    call.on('stream', setOthersStream);
  });
});

peer.on('error', function(e){
  console.log(e.message);
});

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

video_button.video_onclick = function(){
  myStream.getVideoTracks()[0].enabled = !(myStream.getVideoTracks()[0].enabled);
}

var audio_button = document.createElement("audio_button");
video_button.appendChild(document.createTextNode("Toggle hold"));

audio_button.audio_onclick = function(){
  myStream.getAudioTracks()[0].enabled = !(myStream.getAudioTracks()[0].enabled);
}

Hope it will help to someone.

like image 38
tagaism Avatar answered Sep 24 '22 04:09

tagaism