Reactjs 获取错误为'；用户无法发布流'；连接到实时流时

我使用agora SDK与一个用户进行实时连接。我知道该用户何时处于活动状态，但无法连接。以下是代码参考：

function App() {
  const [joined, setJoined] = useState(false);
  const channelRef = useRef("");
  const remoteRef = useRef("");
  const leaveRef = useRef("");

  async function handleSubmit(e) {
    try {
      if (channelRef.current.value === "") {
        return console.log("Please Enter Channel Name");
      }

      setJoined(true);

      rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" })

      await rtc.client.join(
        options.appId,
        options.channel,
        options.token || null,
        options.uid || null,
      );

      // Create an audio track from the audio captured by a microphone
      rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
      // Create a video track from the video captured by a camera
      rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();

      rtc.localVideoTrack.play("local-stream");

      rtc.client.on("user-published", async (user, mediaType) => {
        // Subscribe to a remote user
        await rtc.client.subscribe(user, mediaType);
        console.log("subscribe success");
        // console.log(user);

        if (mediaType === "video" || mediaType === "all") {
          // Get `RemoteVideoTrack` in the `user` object.
          const remoteVideoTrack = user.videoTrack;
          console.log(remoteVideoTrack);

          // Dynamically create a container in the form of a DIV element for playing the remote video track.
          const PlayerContainer = React.createElement("div", {
            id: user.uid,
            className: "stream",
          });
          ReactDOM.render(
            PlayerContainer,
            document.getElementById("remote-stream")
          );

          user.videoTrack.play(`${user.uid}`);
        }

        if (mediaType === "audio" || mediaType === "all") {
          // Get `RemoteAudioTrack` in the `user` object.
          const remoteAudioTrack = user.audioTrack;
          // Play the audio track. Do not need to pass any DOM element
          remoteAudioTrack.play();
        }
      });

      rtc.client.on("user-unpublished", (user) => {
        // Get the dynamically created DIV container
        const playerContainer = document.getElementById(user.uid);
        console.log(playerContainer);
      });

      // Publish the local audio and video tracks to the channel
      await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);

      console.log("publish success!");
    } catch (error) {
      console.error(error);
    }
  }

  async function handleLeave() {
    try {
      const localContainer = document.getElementById("local-stream");

      rtc.localAudioTrack.close();
      rtc.localVideoTrack.close();

      setJoined(false);
      localContainer.textContent = "";

      // Traverse all remote users
      rtc.client.remoteUsers.forEach((user) => {
        // Destroy the dynamically created DIV container
        const playerContainer = document.getElementById(user.uid);
        playerContainer && playerContainer.remove();
      });

      // Leave the channel
      await rtc.client.leave();
    } catch (err) {
      console.error(err);
    }
  }

  return (
    <>
      <div className="container">
        <input
          type="submit"
          value="Join"
          onClick={handleSubmit}
          disabled={joined ? true : false}
        />
        <input
          type="button"
          ref={leaveRef}
          value="Leave"
          onClick={handleLeave}
          disabled={joined ? false : true}
        />
      </div>
      {joined ? (
        <>
          <div id="local-stream" className="stream local-stream"></div>
          <div
            id="remote-stream"
            ref={remoteRef}
            className="stream remote-stream"
          ></div>
        </>
      ) : null}
    </>
  );
}

export default App;

函数应用程序（）{
const[joined，setJoined]=useState（false）；
const channelRef=useRef（“”）；
const remoteRef=useRef（“”）；
const leaveRef=useRef（“”）；
异步函数handleSubmit（e）{
试一试{
如果（channelRef.current.value==“”）{
返回console.log（“请输入频道名称”）；
}
setJoined（true）；
rtc.client=AgoraRTC.createClient（{mode:“live”，codec:“vp8”}）
等待rtc.client.join(
options.appId，
options.channel，
options.token | | null，
options.uid | | null，
);
//从麦克风捕获的音频创建音频曲目
rtc.localAudioTrack=等待AgoraRTC.createMicrophoneAudioTrack（）；
//从摄像机捕获的视频创建视频轨迹
rtc.localVideoTrack=等待AgoraRTC.createCameraVideoTrack（）；
rtc.localVideoTrack.play（“本地流”）；
rtc.client.on（“用户已发布”，异步（用户，媒体类型）=>{
//订阅远程用户
等待rtc.client.subscribe（用户，mediaType）；
console.log（“订阅成功”）；
//console.log（用户）；
如果（mediaType==“视频”| | mediaType==“全部”）{
//在“用户”对象中获取“RemoteVideoTrack”。
const remoteVideoTrack=user.videoTrack；
控制台日志（远程视频跟踪）；
//以DIV元素的形式动态创建一个容器，用于播放远程视频曲目。
const PlayerContainer=React.createElement（“div”{
id:user.uid，
类名：“流”，
});
ReactDOM.render(
玩家容器，
document.getElementById（“远程流”）
);
user.videoTrack.play（`${user.uid}`）；
}
如果（mediaType==“音频”| | mediaType==“全部”）{
//在“用户”对象中获取“RemoteAudioTrack”。
const remoteAudioTrack=user.audioTrack；
//播放音频曲目。不需要传递任何DOM元素
remoteAudioTrack.play（）；
}
});
rtc.client.on（“用户未发布”，（用户）=>{
//获取动态创建的DIV容器
const playerContainer=document.getElementById（user.uid）；
console.log（playerContainer）；
});
//将本地音频和视频曲目发布到频道
等待rtc.client.publish（[rtc.localAudioTrack，rtc.localVideoTrack]）；
log（“发布成功！”）；
}捕获（错误）{
控制台错误（error）；
}
}
异步函数handleLeave（）{
试一试{
const localContainer=document.getElementById（“本地流”）；
rtc.localAudioTrack.close（）；
rtc.localVideoTrack.close（）；
设置连接（假）；
localContainer.textContent=“”；
//遍历所有远程用户
rtc.client.remoteUsers.forEach（（用户）=>{
//销毁动态创建的DIV容器
const playerContainer=document.getElementById（user.uid）；
playerContainer&&playerContainer.remove（）；
});
//离开频道
等待rtc.client.leave（）；
}捕捉（错误）{
控制台错误（err）；
}
}
返回(
{加入(
)：null}
);
}
导出默认应用程序；

我可以连接，但它会显示我这边的视频，这是不可能的。我应该看另一边的现场录像。那么，需要做哪些代码更改才能启用实时会话呢

下面是错误图像

---

直播时，需要分配不同的客户端角色。 请参阅以供参考

您需要通过将其初始化为“主机”

嗯

rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" })

rtc.client.setClientRole("host")

await rtc.client.join(
  options.appId,
  options.channel,
  options.token || null,
  options.uid || null,
);