在我的PeerJS应用程序中添加静音按钮

时间:2018-01-31 10:27:37

标签: javascript node.js webrtc peerjs

我正在尝试保持静音按钮,它会像Push to talk一样

App.js文件(主文件)

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
//get browser cmopt

var me = {};
var myStream;
var peers = {};

init();

function init() {
  if (!navigator.getUserMedia) return unsupported();

  getLocalAudioStream(function(err, stream) {
    if (err || !stream) return;

    connectToPeerJS(function(err) {
      if (err) return;

      registerIdWithServer(me.id);
      if (call.peers.length) callPeers();
      else displayShareMessage();
    });
  });
} // initialization


function connectToPeerJS(cb) {
  display('Connecting to PeerJS...');
  //me = new Peer({key: API_KEY});
  me = new Peer({ host:'rapidserver.herokuapp.com', secure:true, port:443, key: 'peerjs', debug: 3})
  me.on('call', handleIncomingCall);

  me.on('open', function() {
    display('Connected.');
    display('ID: ' + me.id);
    cb && cb(null, me);
  });// connect to peerJs Server and get ID From the Server

  me.on('error', function(err) {
    display(err);
    cb && cb(err);
  });
}


function registerIdWithServer() {
  display('Registering ID with server...');
  $.post('/' + call.id + '/addpeer/' + me.id);
} // Add our ID to the list of PeerJS IDs for this call


function unregisterIdWithServer() {
  $.post('/' + call.id + '/removepeer/' + me.id);
}


function callPeers() {
  call.peers.forEach(callPeer);
}

function callPeer(peerId) {
  display('Calling ' + peerId + '...');
  var peer = getPeer(peerId);
  peer.outgoing = me.call(peerId, myStream);

  peer.outgoing.on('error', function(err) {
    display(err);
  });

  peer.outgoing.on('stream', function(stream) {
    display('Connected to ' + peerId + '.');
    addIncomingStream(peer, stream);
  });
}


function handleIncomingCall(incoming) {
  display('Answering incoming call from ' + incoming.peer);
  var peer = getPeer(incoming.peer);
  peer.incoming = incoming;
  incoming.answer(myStream);
  peer.incoming.on('stream', function(stream) {
    addIncomingStream(peer, stream);
  });
}// When someone initiates a call via PeerJS

// Add the new audio stream. Either from an incoming call, or from the response to one of our outgoing calls
function addIncomingStream(peer, stream) {
  display('Adding incoming stream from .... ' + peer.id);
  peer.incomingStream = stream;
  playStream(stream);
}


function playStream(stream) {
  var audio = $('<audio autoplay />').appendTo('body');
  audio[0].src = (URL || webkitURL || mozURL).createObjectURL(stream);
}


function getLocalAudioStream(cb) {
  display('Trying to access your microphone. Please click "Allow".');

  navigator.getUserMedia (
    {video: false, audio: true},

    function success(audioStream) {
      display('Microphone is open.');
      myStream = audioStream;
      if (cb) cb(null, myStream);
    },

    function error(err) {
      display('Couldn\'t connect to microphone. Reload the page to try again.');
      if (cb) cb(err);
    }
  );
}

function getPeer(peerId) {
  return peers[peerId] || (peers[peerId] = {id: peerId});
}

function displayShareMessage() {
  display('Give someone this URL to chat.');
  display('<input type="text" value="' + location.href + '" readonly>');

  $('#display input').click(function() {
    this.select();
  });
}

function unsupported() {
  display("Your browser doesn't support getUserMedia.");
}

function display(message) {
  $('<div />').html(message).appendTo('#display');
}

这是我的 index.ejs(html索引文件)

<body>
  <div class="wrapper">
    <div id="display"></div>
  </div>


  <footer>
    <div class="wrapper">
      <a href="/new"> ~~~~~Start another call~~~~~~~</a>
    </div>
  </footer>


    <script type="text/javascript">
      window.API_KEY = "<%= apiKey %>";
      window.call = <%- JSON.stringify(call, null, 2) %>;
    </script>


</script>

我正在考虑添加静音按钮或切换按钮之类的东西,但我不知道如何通过呼叫实现这一点,并且每个对等方都可以将呼叫静音和取消静音。 请帮我。这将是很大的帮助。在此先感谢。

我试过这个。

<input type="button" name="button" id="mute"> Mute </input>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js">
$(document).ready(function(){ function Mute() { var button = document.createElement("button"); button.appendChild(document.createTextNode("Toggle Hold")); 
button.onclick = function(){ mediaStream.use getAudioTracks()()[0].enabled =!(mediaStream.use getAudioTracks()()[0].enabled);
 } } 
$("#mute").click(Mute); 
}); 

0 个答案:

没有答案