Как добавить кнопки включения / выключения звука / видео в видеочате WebRTC

Я пытаюсь создать видеочат WebRTC. Теперь я сосредоточился на создании кнопок медиа-треков (отключение видео для включения или отключения отправки видео и отключение звука, чтобы сделать то же самое со звуком). Вот мой код.

<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);
  });

Кто-нибудь может помочь мне, пожалуйста?


javascript jquery webrtc videochat
person tagaism    schedule 26.12.2015    source источник

Ответы (3)


arrow_upward
15
arrow_downward

Видео- и аудиодорожки в вашем потоке имеют атрибут enabled, который вы можете изменить. Например.:

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

function muteCam() {
  myStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
}
person jib    schedule 27.12.2015
comment
Это остановит как видео, так и аудио потоки. Вопрос не в этом. - person Nafiu Lawal; 13.06.2021
comment
@NafiuLawal Он просто приостанавливает (отключает) их, но да, я обновил ответ на отключение звука камеры и микрофона независимо. Спасибо! - person jib; 13.06.2021

arrow_upward
14
arrow_downward

наконец-то я получил работу! Первый ответ на вопрос из этого «прекращает совместное использование видеопотока webrtc "направили меня в правильное русло. Я создал две новые функции для отключения звука и видео и привязал их к соответствующим кнопкам в html файле. В итоге получилось так:

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);
}

Надеюсь, это кому-то поможет.

person tagaism    schedule 29.12.2015
comment
Здравствуйте, я прихожу сюда после прочтения эволюции webRTC и не заставить его работать. Пока эта штука попроще и просто работает. Может ли кто-нибудь подтвердить, какой способ является стандартным и какой мне следует использовать! Большое спасибо: D - person Himanshu Mittal; 08.04.2021

arrow_upward
6
arrow_downward

Используйте MediaStreamTrack.enabled.

let mic_switch = true;
let video_switch = true;

function toggleVideo() {
  if(localStream != null && localStream.getVideoTracks().length > 0){
    video_switch = !video_switch;

    localStream.getVideoTracks()[0].enabled = video_switch;
  }

}

function toggleMic() {
  if(localStream != null && localStream.getAudioTracks().length > 0){
    mic_switch = !mic_switch;

    localStream.getAudioTracks()[0].enabled = mic_switch;
  }

То же самое и для удаленного потока.

person Sankar Behera    schedule 07.04.2020