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

Posted 2023-02-25

【中文标题】静音流轨道Twilio js的音频/视频

【英文标题】：Mute audio/video of the stream track Twilio js

【发布时间】：2020-04-03 11:16:07

【问题描述】：

我正在使用 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>

为此，我想像所有其他视频通话一样静音用户的本地音频和视频

【参考方案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();
   );
  );

---