我正在使用twilio和laravel进行流式聊天视频，但是卡在一个地方，我需要使音频和视频静音，我尝试使用Twilio.Video = false，但是在这里不起作用，这是我的js吗？请解释一下它将如何工作。
<script>
Twilio.Video.createLocalTracks({
audio: true,
video: { height: 800, frameRate: 24, width: 800 },
}).then(function(localTracks) {
return Twilio.Video.connect('{{ $accessToken }}', {
name: '{{ $roomName }}',
tracks: localTracks,
audio: true,
video: { height: 800, frameRate: 24, width: 800 },
bandwidthProfile: {
video: {
mode: 'grid',
maxTracks: 10,
renderDimensions: {
high: {height:1080, width:1980},
standard: {height:800, width:800},
low: {height:176, width:144}
}
}
},
maxAudioBitrate: 16000, //For music remove this line
//For multiparty rooms (participants>=3) uncomment the line below
//preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
networkQuality: {local:1, remote: 1}
});
}).then(function(room) {
console.log('Successfully joined a Room: ', room.name);
room.participants.forEach(participantConnected);
var previewContainer = document.getElementById(room.localParticipant.sid);
if (!previewContainer || !previewContainer.querySelector('video')) {
participantConnected(room.localParticipant);
const localParticipant = room.localParticipant;
checkForSecondryparticipantConnected(localParticipant);
videoSwapAction(localParticipant);
console.log(`Connected to the Room as LocalParticipant "${localParticipant.identity}"`);
}
room.on('participantConnected', function(participant) {
console.log("Joining: '" + participant.identity + "'");
participantConnected(participant);
videoSwapAction(participant);
localParticipantConnected(room.localParticipant); //to chnage layout of video of local user
});
room.on('participantDisconnected', function(participant) {
console.log("Disconnected: '" + participant.identity + "'");
participantDisconnected(participant);
secondryParticipantDisconnected(room.localParticipant); //to chnage layout of video of local user
});
room.on('disconnected', function(room) {
// Detach the local media elements
room.localParticipant.tracks.forEach(track => {
const attachedElements = track.detach();
track.stop();
attachedElements.forEach(element => element.remove());
console.log('disconnected');
});
});
$('#disconnectRoom').on('click', () => {
room.disconnect();
});
});
function participantConnected(participant) {
console.log('Participant "%s" connected', participant.identity);
const div = document.createElement('div');
div.id = participant.sid;
div.setAttribute("class", 'no_click_video');
div.setAttribute("data-userid","{{$userID}}");
div.setAttribute("style", "float: left; margin: 10px;");
div.innerHTML = "<div style='clear:both' >"+ participant.identity +"</div>";
participant.tracks.forEach(function(track) {
trackAdded(div, track)
});
participant.on('trackAdded', function(track) {
trackAdded(div, track)
});
participant.on('trackRemoved', trackRemoved);
document.getElementById('media-div').appendChild(div);
}
function participantDisconnected(participant) {
console.log('Participant "%s" disconnected', participant.identity);
participant.tracks.forEach(trackRemoved);
document.getElementById(participant.sid).remove();
}
function trackAdded(div, track) {
div.appendChild(track.attach());
var video = div.getElementsByTagName("video")[0];
if (video) {
video.setAttribute("style", "max-width:800px;");
}
}
function trackRemoved(track) {
track.detach().forEach( function(element) { element.remove() });
}
//checkForSecondryparticipantConnected
function checkForSecondryparticipantConnected(localParticipant){
$("div").find('#'+localParticipant.sid).attr("class", "click_video");
if ($("body").find('div.no_click_video').length){
$("div").find('#'+localParticipant.sid).attr("style", "float: left;margin: 10px;height: 200px;width: 200px;position: absolute;z-index: 100;margin-top: 39%;");
$("div").find('#'+localParticipant.sid + ' video').attr("style", "width: inherit; height: inherit");
console.log('Secondry div exist');
}
}
// localParticipantConnected Div style
function localParticipantConnected(localParticipant){
$("div").find('#'+localParticipant.sid).attr("style", "float: left;margin: 10px;height: 200px;width: 200px;position: absolute;z-index: 100;margin-top: 39%;");
$("div").find('#'+localParticipant.sid).attr("class", "click_video");
$("div").find('#'+localParticipant.sid + ' video').attr("style", "width: inherit; height: inherit");
console.log(localParticipant.sid);
}
//video secondryParticipantConnected
function secondryParticipantDisconnected(localParticipant){
$("div").find('#'+localParticipant.sid).attr("style", "float: left;margin: 10px;");
$("div").find('#'+localParticipant.sid + ' video').attr("style", "max-width:800px;");
}
//by Ibrahim. To chnage video swapable and size according to user
function videoSwapAction(participant){
//get id if video dive clicked
if($("div").find('.click_video').attr('id') == participant.sid){
$("body").find('div.click_video').click( function() {
var mainDivStyle = $(this).attr('style');
var mainVideoDivID = $(this).attr('id');
var mainVideoDivStyle = $("body").find('div#'+ mainVideoDivID + ' video').attr('style');
var secondVideoDivID = $("body").find('div.no_click_video').attr('id');
var secondDivStyle = $("body").find('div.no_click_video').attr('style');
var secondVideoDivStyle = $("body").find('div#'+ secondVideoDivID + ' video').attr('style');
//set style of main video to second video
$("body").find('div.no_click_video').attr('style', mainDivStyle) //Div style
$("body").find('div#'+ secondVideoDivID + ' video').attr('style', mainVideoDivStyle); //video div style
//set style of second video main video
$(this).attr('style', secondDivStyle); //Div style
$("body").find('div#'+ mainVideoDivID + ' video').attr('style', secondVideoDivStyle); //video div style
});
}
else{
$("body").find('div.no_click_video').click( function() {
var mainDivStyle = $(this).attr('style');
var mainVideoDivID = $(this).attr('id');
var mainVideoDivStyle = $("body").find('div#'+ mainVideoDivID + ' video').attr('style');
var secondVideoDivID = $("body").find('div.click_video').attr('id');
var secondDivStyle = $("body").find('div.click_video').attr('style');
var secondVideoDivStyle = $("body").find('div#'+ secondVideoDivID + ' video').attr('style');
//set style of main video to second video
$("body").find('div.click_video').attr('style', mainDivStyle) //Div style
$("body").find('div#'+ secondVideoDivID + ' video').attr('style', mainVideoDivStyle); //video div style
//set style of second video main video
$(this).attr('style', secondDivStyle); //Div style
$("body").find('div#'+ mainVideoDivID + ' video').attr('style', secondVideoDivStyle); //video div style
});
}
// end get id if video dive clicked
}
//End by Ibrahim. To chnage video swapable and size according to user
//remove room
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$( document ).ready(function() {
$( "#closeroom" ).click(function() {
$.ajax({
type:'GET',
url:'{{route('videochat_close')}}',
data:{name:'{{$roomName}}'},
success:function(data){
$('#media-div').html('<div>Video chat session is closed Thank you for joining</div>');
$('#closeroom').remove();
}
});
});
});
</script>
要使其正常工作，我希望像其他所有视频通话一样使用户的本地音频和视频静音
答案 0 :(得分：1)
您可以尝试以下方法，我将它们与twilio video.js v1.x和laravel一起使用。
对于v2，您将直接在v2.x文档中获取方法：（https://www.twilio.com/docs/video/javascript-getting-started#mute-and-unmute-audio-and-video）
$('#tglMute').on('click', () => {
room.localParticipant.audioTracks.forEach(function (audioTrack) {
audioTrack.disable();
});
});
$('#tglUnmute').on('click', () => {
room.localParticipant.audioTracks.forEach(function (audioTrack) {
audioTrack.enable();
});
});
$('#tglVidMute').on('click', () => {
room.localParticipant.videoTracks.forEach(function (videoTrack) {
videoTrack.disable();
});
});
$('#tglVidUnmute').on('click', () => {
room.localParticipant.videoTracks.forEach(function (videoTrack) {
videoTrack.enable();
});
});