Twilio 可編程視頻：當dominantSpeaker 更改時，音頻似乎音量增加並構建static

Question

我以這樣的方式實現了一個界面，即啟用了dominantSpeaker揚聲器以在主 window 中顯示他們的圖片，但始終可以聽到所有參與者的聲音。 為了實現這一點，我不得不在useEffect() ) 中注釋掉audioTrack.detach()我遇到的問題是，每次dominantSpeaker揚聲器發生變化時，它似乎都會放大它們的音量並開始生成 static。 它變得越來越糟，直到聽不見，此時我重新加載頁面時，音頻已為我修復。 每個參與者都有相同的問題，並且只有刷新頁面的個人才能解決該問題。 即使所有用戶都靜音，static 仍然存在。 當我 go 進入控制台並刪除所有和標簽時， static 仍然存在。

我正在將一個道具傳遞給參與者組件，如果它是dominant_window則為真。 我這樣做是因為我希望每個單獨的揚聲器的音頻來自他們的小參與者 window，因此一次允許多個音頻流。 當我注釋掉作為dominant_window 的Participant 時，即使它根本沒有呈現標簽，我也聽不到任何聲音。

我已經嘗試在沒有<audio>和<video>組件的情況下渲染它，但我仍然可以獲得音頻。 這讓我認為音頻根本不是來自我設置的音頻標簽。 我的假設是，因為我已經注釋掉了audioTrack.detach() ，它會一遍又一遍地向控制音頻的任何內容添加相同的 audioTrack，從而增加音量（盡管當每個人都靜音時，這並不能解釋 static） ，但是當它在那里時，我一次只能獲得 1 個參與者音頻。

音頻究竟來自哪里？ 我如何監控那是什么/在哪里？ 如果 audioTrack 是控制所有音頻的單獨項目並允許每個人使用dominantSpeaker一次發言，我如何確保每人只添加一次 audioTrack ？

參與者.js

import React, {useState, useEffect, useRef} from 'react';

const Participant = ({  key,
                         dominant_window,
                         user,
                         participant,
                         width,
                         videoEnabled,
                         audioEnabled,
                         onMouseEnter,
                         onMouseLeave,
                         is_fullscreen,
                         tiled,
                     }) => {
    const [videoTracks, setVideoTracks] = useState([]);
    const [audioTracks, setAudioTracks] = useState([]);
    const [hovered, setHovered] = useState(false);

    const videoRef = useRef();
    const audioRef = useRef();

    const trackpubsToTracks = trackMap => {
        const tracks = Array.from(trackMap.values()).map(publication => publication.track);
        return tracks;
    };

    const handleTrackChange =
        useEffect(() => {
            const trackSubscribed = track => {
                if (track.kind === 'video') {
                    setVideoTracks(videoTracks => [...videoTracks, track]);
                } else {
                    setAudioTracks(audioTracks => [...audioTracks, track]);
                }
            };

            const trackUnsubscribed = track => {
                if (track.kind === 'video') {
                    setVideoTracks(videoTracks => videoTracks.filter(v => v !== track));
                } else {
                    setAudioTracks(audioTracks => audioTracks.filter(a => a !== track));
                }
            };
            setVideoTracks(trackpubsToTracks(participant.videoTracks));
            setAudioTracks(trackpubsToTracks(participant.audioTracks));

            participant.on('trackSubscribed', trackSubscribed);
            participant.on('trackUnsubscribed', trackUnsubscribed);

            return () => {
                setVideoTracks([]);
                setAudioTracks([]);
            };
        }, [participant]);

    useEffect(() => {
        const videoTrack = videoTracks[0];
        if (videoTrack) {
            videoTrack.attach(videoRef.current);
            return () => {
                //videoTrack.detach();
            };
        }
    }, [videoTracks]);


    useEffect(() => {
        const audioTrack = audioTracks[0];

        if (audioTrack) {
            audioTrack.attach(audioRef.current);
            return () => {
                //audioTrack.detach();
            };
        }
    }, [audioTracks]);
    
    return (
        <div key={key}
             onMouseEnter={() => {
                 if (onMouseEnter) onMouseEnter();
                 setHovered(true)
             }}
             onMouseLeave={() => {
                 if (onMouseLeave) onMouseLeave();
                 setHovered(false)
             }}
        >

            <video className='participant-video'
                    ref={videoRef}
                    autoPlay={true}
                    style={{
                        transform: participant.identity == `u_${user.id}` ? "scaleX(-1)" : "scaleX(1)",
                        opacity: videoEnabled ? "1" : "0",
                        zIndex: videoEnabled ? "1" : "-1"
                    }}/>
            {(audioEnabled && !dominant_window && !(participant.identity == `u_${user.id}`)) && <audio ref={audioRef} autoPlay={true} muted={false}/>}
        </div>
    );
};

export default Participant;

Answer 1

似乎每次dominantSpeaker更改時它都會重新附加軌道，復制它。 音量和 static 的增加是由於它在自身之上播放相同的曲目。