Twilio 可编程视频：当dominantSpeaker 改变时，音频似乎会增加音量并产生静态

问题描述

我以这样一种方式实现了一个界面，即启用 dominantSpeaker 以在主窗口中显示他们的图片，但始终可以听到所有参与者的声音。为了实现这一点，我不得不注释掉 audioTrack.detach() 中的 useEffect() 我遇到的问题是每次 dominantSpeaker 改变时，它似乎放大了它们的音量并开始产生静态.它变得越来越糟糕，直到它听不见，当我重新加载页面时，音频对我来说是固定的。每个参与者都有同样的问题，只有刷新页面的个人才能解决问题。即使所有用户都被静音，静电仍然存在。当我进入控制台并删除所有和标签时，静态仍然存在。

我正在向 Participant 组件传递一个道具，如果它是 dominant_window，则为 true。我这样做是因为我希望每个发言者的音频都来自他们的小参与者窗口，从而允许同时进行多个音频流。当我注释掉作为显性窗口的 Participant 时，即使它一开始根本没有渲染标签，我也听不到任何声音。

我尝试在没有 <audio> 和 <video> 组件的情况下渲染它，但我仍然可以听到音频。这让我认为音频根本不是来自我设置的音频标签。我的假设是，因为我已经注释掉了 audioTrack.detach()，它会一遍又一遍地将相同的 audioTrack 添加到控制音频的任何内容，从而增加音量（尽管这并不能解释每个人都静音时的静态） ，但是当它在那里时，我一次只能获得 1 个参与者的音频。

音频究竟来自哪里？我如何监控任何/任何地方？如果 audioTrack 是控制所有音频的单独项目并允许每个人使用 dominantSpeaker 同时发言，我如何确保每个人只添加一次？

参与者.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;

解决方法

似乎每次占主导地位的Speaker改变时它都在重新附加轨道，复制它。音量和静态的增加是由于它在自身之上播放相同的曲目。