为什么我的 React Custom Jitsi UI 不呈现多个视频和音频轨道与这个 Vue js 示例不同？

问题描述

我在尝试创建自定义 Jitsi UI 时遇到问题。当我在我的 React 应用程序中加载我的会议时，我只收到一个视频和一个音频轨道（总共两个轨道）。当我尝试加入同一个会议时，我仍然只收到一个视频。我尝试按照本指南了解如何在 Vue 中构建自定义 Jitsi UI，并尝试将其转换为 React。该指南将视频和音频轨道添加到视频和音频 HTML5 元素列表中。但是，当使用同一个 Jitsi 会议时，指南作者的实现有效，而我的无法加载多个轨道。由于 Vue 实现有效（并且除了将轨道添加到视频/音频元素之外，React 代码具有相同的所有内容），我得出结论，问题一定是我的 React 实现。下面是作者如何渲染多条轨道（在 Vue 中）：

<template>
  <div id="app">
    <h1>Performance</h1>
    <button @click="connect">Connect</button>
    <video
      v-for="track in videoTracks"
      :key="`track-${track.getId()}`"
      :ref="track.getId()"
      autoplay
    />
    <audio
      v-for="track in audioTracks"
      :key="`track-${track.getId()}`"
      :ref="track.getId()"
      autoplay
    />
  </div>
</template>

以下是作者用于向视频元素添加轨道的逻辑：

addTrack(track) {
      if (track.getType() === "video") {
        this.videoTracks.push(track);
      } else if (track.getType() === "audio") {
        this.audioTracks.push(track);
      }
      this.$nextTick().then(() => {
        track.attach(this.$refs[track.getId()][0]);
      });
    },

这是我在 React 中实现相同逻辑的尝试：

const videoRefs = React.useRef([]);
const addTrack = (track) => {
    console.log(`addTrack's track: ${track}`);
    if (track.getType() === 'video') {
      setVideoTracks(videoTracks.concat(track));
      videoRefs.current[videoRefs.current.length - 1].current.srcObject =
        track.stream;
    } else if (track.getType() === 'audio') {
      setAudioTracks(audioTracks.concat(track));
    }
};
if (videoRefs.current.length !== videoTracks.length) {
    videoRefs.current = Array(videoTracks.length)
      .fill()
      .map((_,i) => videoRefs.current[i] || createRef());
}

这是我尝试渲染多个轨道的方式：

{videoTracks.map((track,i) => (
            <video
              key={track.getId()}
              ref={videoRefs.current[i]}
              autoplay
              muted
            ></video>
))}

任何帮助将不胜感激，谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）