WebRTC视频流在Firefox中可用，但在chrome中不可用 [英] WebRTC video streaming is working in firefox but not in chrome

问题描述

我正在使用webRTC制作一个简单的视频通话应用程序.一切都在Firefox中按预期工作.但是在Chrome和Opera中，远程流不会出现在任何一侧(呼叫者和被呼叫者).视频画布始终处于缓冲状态(和黑色).我已经在StackOverflow上浏览了与此相关的所有解决方案，但没有任何解决方案.我正在使用socket.io在对等之间进行信令和通信，其中有两个成员的空间，因此，我不需要选择任何特定的user_id进行任何调用(为简单起见).这是我的代码(简单版本):

I am making a simple video-calling app using webRTC. Everything is working as expected in firefox. But in chrome and opera the remote-stream is not showing up on any side(caller and callee).The video canvas is always buffering(and black). I have gone through every solution related to this on StackOverflow but nothing worked out.I am using socket.io for signalling and communication between peers.In which there is a room of two members in it.So, I don't need to select any specific user_id to make any call(for simplicity). Here is my code(simple version):

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: "[e-mail]",
            },
        ],
    };
    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的问题?

Is there anyone who can help me to find out the issue on chrome ?

推荐答案

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

Try to request user media before creating peer connection:

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事件在您的代码中触发两次(在调用方和被调用方).您应该只在主叫方创建要约.

Also, the onnegotiationneeded event fires twice in the your code (on caller and callee side). You should create offer only on the caller side.

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

这篇关于WebRTC视频流在Firefox中可用，但在chrome中不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！