如何在 WebRTC 视频聊天中添加 audio/video mute/unmute 按钮
How to add audio/video mute/unmute buttons in WebRTC video chat
我正在尝试创建 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);
});
有人可以指导我吗?
您流中的视频和音频轨道有一个可以修改的 enabled
属性。例如:
function muteMic() {
myStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
}
function muteCam() {
myStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
}
我终于搞定了!
这个“webrtc video stream stop sharing”问题的第一个答案引导我走向正确的方向。
我创建了两个新函数来使视频和音频静音,并将它们绑定到 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);
}
希望对大家有所帮助。
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;
}
同样适用于远程流。
我正在尝试创建 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);
});
有人可以指导我吗?
您流中的视频和音频轨道有一个可以修改的 enabled
属性。例如:
function muteMic() {
myStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
}
function muteCam() {
myStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
}
我终于搞定了! 这个“webrtc video stream stop sharing”问题的第一个答案引导我走向正确的方向。 我创建了两个新函数来使视频和音频静音,并将它们绑定到 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);
}
希望对大家有所帮助。
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;
}
同样适用于远程流。