You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PeerJs传输MediaStream时变更问题(摄像头关闭场景)

视频聊天应用MediaStream传输异常问题

我使用Next.js 14、Express、socket.io、PeerJs开发视频聊天应用时,遇到以下问题:关闭摄像头加入房间时,发送的MediaStream被对方接收后发生了变更。

场景1:我已在房间内,新用户加入

useUpdateEffect(() => {
    if (!peer) return;

    socket.on(
      "user:joined",
      ({
        peerId: remotePeerId,
        muted: remoteMuted,
        visible: remoteVisible,
        name: remoteName,
        email: remoteEmail,
        image: remoteImage,
      }) => {
        toast.success(`${remoteName} joined`);
        // Calling new user
        console.log("My stream", stream?.getTracks());

        const call = peer.call(
          remotePeerId,
          stream as MediaStream, // my stream
          {
            metadata: {
              user: {
                email: data?.user?.email,
                name: data?.user?.name,
                image: data?.user?.image,
              },
              muted,
              visible,
            },
          },
        );
        call.on("stream", (remoteStream: MediaStream) => {
          console.log("User b stream", remoteStream.getTracks());
          addConnection({
            peerId: remotePeerId,
            connection: call,
            stream: remoteStream,
            muted: remoteMuted,
            visible: remoteVisible,
            name: remoteName,
            email: remoteEmail,
            image: remoteImage,
          });
        }); // On new user answer
      },
    );
    return () => {
      socket.off("user:joined");
    };
  }, [peer]);

场景2:我作为新用户加入房间

useUpdateEffect(() => {
    if (!peer) return;

    peer.on("call", (call: any) => {
      const { peer: remotePeerId, metadata } = call;
      const {
        user: remoteUser,
        muted: remoteMuted,
        visible: remoteVisible,
      } = metadata;

      call.answer(stream); // * answers incoming call with my stream
      console.log("My stream", stream?.getTracks());

      call.on("stream", (remoteStream: MediaStream) => {
        console.log("User a stream", remoteStream.getTracks());
        addConnection({
          peerId: remotePeerId,
          connection: call,
          stream: remoteStream,
          muted: remoteMuted,
          visible: remoteVisible,
          name: remoteUser.name,
          image: remoteUser.image,
          email: remoteUser.email,
        });
      }); // * new stream stream
      call.on("close", () =>
        toast.success(`${remoteUser.name} has left the room`),
      );
    });
  }, [peer]);

传输前后Video Tracks对比

第一个用户发送的Video Tracks第二个用户收到的Video Tracks
第一个用户发送的Video Tracks第二个用户收到的Video Tracks
第一个用户收到的Video Tracks第二个用户发送的Video Tracks
第一个用户收到的Video Tracks第二个用户发送的Video Tracks

我期望发送与接收的Tracks完全一致。

项目源码仓库:ZAKHAROV-Artem/stack-overflow-problem


内容的提问来源于stack exchange,提问作者Артем Захаров

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 14:22:04