静音 stream 轨道 Twilio js 的音频/视频

Question

I'm using twilio and laravel for streaming chat video but got stuck in one point where I need to mute the audio and video i try to use Twilio.Video=false but it didn't work here is my js could you please explain how it is gonna work.

<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>

For this to work i want to mute local audio and video of the user like the all other video calls

Answer 1

You can try the below methods, I used them with the twilio video.js v1.x and laravel.

For v2 you will get the methods directly in the v2.x docs:( 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();
   });
  });

---