WebRTC 视频流在 Firefox 中工作，但在 chrome 中不工作

Question

我正在使用 webRTC 制作一个简单的视频通话应用。一切都在 Firefox 中按预期工作。但是在chrome和opera中，远程流没有出现在任何一侧（调用者和被调用者）。视频画布总是在缓冲（和黑色）。我已经在 StackOverflow 上完成了与此相关的所有解决方案，但没有任何解决方案。我正在使用 socket.io 进行对等方之间的信令和通信。其中有两个成员的房间。所以，我不需要选择任何特定的 user_id 进行任何调用（为简单起见）。这是我的代码（简单版）：

function ChatBox(props) {
const peerRef = useRef();
const mediaRef = useRef();
const displayRef = useRef();

const openMediaDevices = async () => {
    var stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
    });
    console.log("Got mediastream : ", stream);
    console.log(mediaRef.current);
    mediaRef.current.srcObject = stream;

    return stream;
};
const iceCandidateEventHandler = (e) => {
    console.log("candidate emit kori");
    if (e.candidate) {
        socket.emit("candidate", {
            type: "new-ice-candidate",
            candidate: e.candidate,
        });
    }
};
const newICECandidateHandler = async (data) => {
    console.log("candidate pailam", data);
    try {
        const candidate = new RTCIceCandidate(data.candidate);
        await peerRef.current.addIceCandidate(candidate);
    } catch (error) {
        console.log(error);
    }
};
const negotiationNeededEventHandler = async () => {
    console.log("offer pathacchi...");
    try {
        const offerObj = await peerRef.current.createOffer();
        await peerRef.current.setLocalDescription(offerObj);
        const data = {
            type: "offer",
            sdp: peerRef.current.localDescription,
        };

        socket.emit("offer", data);
    } catch (error) {
        console.log(error);
    }
};
const offerHandler = async (data) => {
    console.log("offer pailam...");
    console.log(data);
    try {
        peerRef.current = createPeer();
        const desc = new RTCSessionDescription(data.sdp);
        await peerRef.current.setRemoteDescription(desc);
        const localStream = await openMediaDevices();
        for (const track of localStream.getTracks()) {
            peerRef.current.addTrack(track, localStream);
        }
        const answerObj = await peerRef.current.createAnswer();
        await peerRef.current.setLocalDescription(answerObj);
        const ansData = {
            type: "answer",
            sdp: peerRef.current.localDescription,
        };
        console.log("answer pathacchi...");
        socket.emit("answer", ansData);
    } catch (error) {
        console.log(error);
    }
};
const answerHandler = async (ansData) => {
    console.log("answer pailam");
    console.log(ansData);
    try {
        const desc = new RTCSessionDescription(ansData.sdp);
        await peerRef.current.setRemoteDescription(desc);
    } catch (error) {
        console.log(error);
    }
};
const trackEventHandler = (e) => {
    console.log(e.streams);
    displayRef.current.srcObject = e.streams[0];
    displayRef.current.autoplay = true;
    displayRef.current.playsInline = true;
    displayRef.current.muted = true;
};
const createPeer = () => {
    const configuration = {
        iceServers: [
            {
                urls: "stun:stun.stunprotocol.org",
            },
            {
                urls: "turn:numb.viagenie.ca",
                credential: "muazkh",
                username: "webrtc@live.com",
            },
        ],
    };
    const peerConnection = new RTCPeerConnection(configuration);
    peerConnection.onicecandidate = iceCandidateEventHandler;
    peerConnection.ontrack = trackEventHandler;
    peerConnection.onnegotiationneeded = negotiationNeededEventHandler;

    return peerConnection;
};

useEffect(() => {
    socket.on("offer", (data) => offerHandler(data));
    socket.on("answer", (ansData) => answerHandler(ansData));
    socket.on("candidate", (data) => newICECandidateHandler(data));
}, []);

const callHandler = async () => {
    peerRef.current = createPeer("caller");
    const localStream = await openMediaDevices();
    for (const track of localStream.getTracks()) {
        peerRef.current.addTrack(track, localStream);
    }
};
return (
    <div className={styles.boxContainer}>
        <video
            ref={mediaRef}
            id="localVideo"
            autoplay
            playsinline
            controls="false"
        />
        <video
            ref={displayRef}
            id="displayVideo"
            autoplay
            playsinline
            controls="false"
        />
    </div>
);
}

有没有人可以帮我找出 chrome 上的问题？

Answer 1

在创建对等连接之前尝试请求用户媒体：

useEffect(() => {
  const getUserMedia = async () => {
      const mediaConstraints = {
        video: true,
        audio: true,
      };

      try {
        const stream = await navigator.mediaDevices.getUserMedia(
          mediaConstraints,
        );

        localVideo.current.srcObject = stream;
      } catch (error) {
        console.error(error);
      }
    };

    getUserMedia();
  }, []);

此外，onnegotiationneeded 事件会在您的代码中触发两次（在调用方和被调用方）。您应该只在调用方创建优惠。

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded