Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在WebRTC视频聊天中添加音频/视频静音/取消静音按钮_Javascript_Jquery_Webrtc_Videochat - Fatal编程技术网

Javascript 如何在WebRTC视频聊天中添加音频/视频静音/取消静音按钮

Javascript 如何在WebRTC视频聊天中添加音频/视频静音/取消静音按钮,javascript,jquery,webrtc,videochat,Javascript,Jquery,Webrtc,Videochat,我正在尝试创建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.co

我正在尝试创建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);
  });

navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia;
var myStream;
var peer=new peer({key:'PeerJS key'});
var setotherssstream=函数(流){
$('#其他视频').prop('src',URL.createObjectURL(stream));
};
var setMyStream=函数(流){
myStream=stream;
$('#video').prop('src',URL.createObjectURL(stream));
};
对等点打开('open',函数(id){
$('#对等id')。文本(id);
});
peer.on('call',函数(call){
call.answer(myStream);
call.on('stream',setOthersStream);
});
$(函数(){
getUserMedia({audio:true,video:true},setMyStream,function(){});
$('#call')。在('click',function()上{
var call=peer.call($('#其他对等id').val(),myStream);
call.on('stream',setOthersStream);
});
});
peer.on('error',函数(e){
控制台日志(e.message);
});

有人能为我指点迷津吗?

您流中的视频和音频曲目具有启用的
属性,您可以修改该属性。例如:

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

function muteCam() {
  myStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
}
我终于成功了! 这个问题的第一个答案引导我走向正确的方向。 我创建了两个新函数来静音视频和音频,并将它们绑定到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);
}
希望它能对某人有所帮助。

使用


远程流也是如此。

您好,我是在阅读完之后来到这里的,但未能使其正常工作。虽然这件事很简单,而且很有效。请有人确认哪种是标准方式,我应该使用哪种方式!非常感谢:这将停止视频和音频流。这不是问题的答案。@NafiuLawal它只是暂停(静音)它们,但是的,我已经独立更新了静音摄像头和麦克风的答案。谢谢
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;
  }