WebRTC 連接狀態停留在“新” - 僅限 Safari，適用於 Chrome 和 FF

Question

我無法使用 WebRTC 視頻和音頻遠程連接到本地對等方。 此問題僅發生在桌面上的 Safari 和 iOS 中。 在 Chrome 和 Firefox 上，該問題不存在。

我假設這與 Safari 中的事實有關，它總是詢問您是否要允許音頻/視頻，但我不確定。 這只是我可以在瀏覽器之間做出的唯一區別。 即使選擇“允許”后，問題仍然存在。

復制步驟：

• 在 Chrome 中，打開帶有音頻/視頻的初始本地連接
• 在Safari中，打開遠程連接並選擇啟用音頻/視頻

結果：

• 本地連接從不提供報價，並且遠程（Safari）的 connectionState 卡住為new 。 請參閱以下 RTCPeerConnection object：

這是完全相同的 object，通過完全相同的步驟，但在 Chrome 或 Firefox 中：

編輯：

經過更多測試，我發現以下內容：

• 以下格式：（第一次連接）>（第二次連接）

• 鉻 > 鉻：作品

• 鉻 > Firefox：工作

• 鉻 > Safari：不起作用

• Safari > 鉻：工作

• Safari > Safari：工作

將 Safari 用於連接的兩側時，該問題似乎不存在......僅當 Safari 用作輔助連接時。

這是我的代碼：

import h from './helpers.js';

document.getElementById('close-chat').addEventListener('click', (e) => {
    document.querySelector('#right').style.display = "none";
});

document.getElementById('open-chat').addEventListener('click', (e) => {
    document.querySelector('#right').style.display = "flex";
});

window.addEventListener('load', () => {
    sessionStorage.setItem('connected', 'false');

    const room = h.getParam('room');
    const user = h.getParam('user');

    sessionStorage.setItem('username', user);

    const username = sessionStorage.getItem('username');

    if (!room) {
        document.querySelector('#room-create').attributes.removeNamedItem('hidden');
    }

    else if (!username) {
        document.querySelector('#username-set').attributes.removeNamedItem('hidden');
    }

    else {
        let commElem = document.getElementsByClassName('room-comm');

        for (let i = 0; i < commElem.length; i++) {
            commElem[i].attributes.removeNamedItem('hidden');
        }

        var pc = [];

        let socket = io('/stream');

        var socketId = '';
        var myStream = '';
        var screen = '';

        // Get user video by default
        getAndSetUserStream();

        socket.on('connect', () => {
            console.log('Connected');

            sessionStorage.setItem('remoteConnected', 'false');
            h.connectedChat();
            setTimeout(h.establishingChat, 3000);
            setTimeout(h.oneMinChat, 60000);
            setTimeout(h.twoMinChat, 120000);
            setTimeout(h.threeMinChat, 180000);
            setTimeout(h.fourMinChat, 240000);
            setTimeout(h.fiveMinChat, 300000);

            // Set socketId
            socketId = socket.io.engine.id;

            socket.emit('subscribe', {
                room: room,
                socketId: socketId
            });

            socket.on('new user', (data) => {
                // OG user gets log when new user joins here.
                console.log('New User');
                console.log(data);

                socket.emit('newUserStart', { to: data.socketId, sender: socketId });
                pc.push(data.socketId);
                init(true, data.socketId);
            });

            socket.on('newUserStart', (data) => {
                console.log('New User Start');
                console.log(data);

                pc.push(data.sender);
                init(false, data.sender);
            });

            socket.on('ice candidates', async (data) => {
                console.log('Ice Candidates:');
                console.log(data);

                data.candidate ? await pc[data.sender].addIceCandidate(new RTCIceCandidate(data.candidate)) : '';
            });

            socket.on('sdp', async (data) => {
                console.log('SDP:');
                console.log(data);

                if (data.description.type === 'offer') {
                    data.description ? await pc[data.sender].setRemoteDescription(new RTCSessionDescription(data.description)) : '';

                    h.getUserFullMedia().then(async (stream) => {
                        if (!document.getElementById('local').srcObject) {
                            h.setLocalStream(stream);
                        }

                        // Save my stream
                        myStream = stream;

                        stream.getTracks().forEach((track) => {
                            pc[data.sender].addTrack(track, stream);
                        });

                        let answer = await pc[data.sender].createAnswer();

                        await pc[data.sender].setLocalDescription(answer);

                        socket.emit('sdp', { description: pc[data.sender].localDescription, to: data.sender, sender: socketId });
                    }).catch((e) => {
                        console.error(e);
                    });
                }

                else if (data.description.type === 'answer') {
                    await pc[data.sender].setRemoteDescription(new RTCSessionDescription(data.description));
                }
            });

            socket.on('chat', (data) => {
                h.addChat(data, 'remote');
            });
        });

        function getAndSetUserStream() {
            console.log('Get and set user stream.');

            h.getUserFullMedia({ audio: true, video: true }).then((stream) => {
                // Save my stream
                myStream = stream;

                h.setLocalStream(stream);
            }).catch((e) => {
                console.error(`stream error: ${e}`);
            });
        }

        function sendMsg(msg) {
            let data = {
                room: room,
                msg: msg,
                sender: username
            };

            // Emit chat message
            socket.emit('chat', data);

            // Add localchat
            h.addChat(data, 'local');
        }

        function init(createOffer, partnerName) {
            console.log('P1:');
            console.log(partnerName);

            pc[partnerName] = new RTCPeerConnection(h.getIceServer());

            console.log('P2:');
            console.log(pc[partnerName]);

            if (screen && screen.getTracks().length) {
                console.log('Screen:');
                console.log(screen);

                screen.getTracks().forEach((track) => {
                    pc[partnerName].addTrack(track, screen); // Should trigger negotiationneeded event
                });
            }

            else if (myStream) {
                console.log('myStream:');
                console.log(myStream);

                myStream.getTracks().forEach((track) => {
                    pc[partnerName].addTrack(track, myStream); // Should trigger negotiationneeded event
                });
            }

            else {
                h.getUserFullMedia().then((stream) => {
                    console.log('Stream:');
                    console.log(stream);

                    // Save my stream
                    myStream = stream;

                    stream.getTracks().forEach((track) => {
                        console.log('Tracks:');
                        console.log(track);

                        pc[partnerName].addTrack(track, stream); // Should trigger negotiationneeded event
                    });

                    h.setLocalStream(stream);
                }).catch((e) => {
                    console.error(`stream error: ${e}`);
                });
            }

            // Create offer
            if (createOffer) {
                console.log('Create Offer');

                pc[partnerName].onnegotiationneeded = async () => {
                    let offer = await pc[partnerName].createOffer();

                    console.log('Offer:');
                    console.log(offer);

                    await pc[partnerName].setLocalDescription(offer);

                    console.log('Partner Details:');
                    console.log(pc[partnerName]);

                    socket.emit('sdp', { description: pc[partnerName].localDescription, to: partnerName, sender: socketId });
                };
            }

            // Send ice candidate to partnerNames
            pc[partnerName].onicecandidate = ({ candidate }) => {
                console.log('Send ICE Candidates:');
                console.log(candidate);

                socket.emit('ice candidates', { candidate: candidate, to: partnerName, sender: socketId });
            };

            // Add
            pc[partnerName].ontrack = (e) => {
                console.log('Adding partner video...');

                let str = e.streams[0];
                if (document.getElementById(`${partnerName}-video`)) {
                    document.getElementById(`${partnerName}-video`).srcObject = str;
                }

                else {
                    // Video elem
                    let newVid = document.createElement('video');
                    newVid.id = `${partnerName}-video`;
                    newVid.srcObject = str;
                    newVid.autoplay = true;
                    newVid.className = 'remote-video';
                    newVid.playsInline = true;
                    newVid.controls = true;

                    // Put div in main-section elem
                    document.getElementById('left').appendChild(newVid);

                    const video = document.getElementsByClassName('remote-video');
                }
            };

            pc[partnerName].onconnectionstatechange = (d) => {
                console.log('Connection State:');
                console.log(pc[partnerName].iceConnectionState);

                switch (pc[partnerName].iceConnectionState) {
                    case 'new':
                        console.log('New connection...!');
                        break;
                    case 'checking':
                        console.log('Checking connection...!');
                        break;
                    case 'connected':
                        console.log('Connected with dispensary!');
                        sessionStorage.setItem('remoteConnected', 'true');
                        h.establishedChat();
                        break;
                    case 'disconnected':
                        console.log('Disconnected');
                        sessionStorage.setItem('connected', 'false');
                        sessionStorage.setItem('remoteConnected', 'false');
                        h.disconnectedChat();
                        h.closeVideo(partnerName);
                        break;
                    case 'failed':
                        console.log('Failed');
                        sessionStorage.setItem('connected', 'false');
                        sessionStorage.setItem('remoteConnected', 'false');
                        h.disconnectedChat();
                        h.closeVideo(partnerName);
                        break;
                    case 'closed':
                        console.log('Closed');
                        sessionStorage.setItem('connected', 'false');
                        sessionStorage.setItem('remoteConnected', 'false');
                        h.disconnectedChat();
                        h.closeVideo(partnerName);
                        break;
                }
            };

            pc[partnerName].onsignalingstatechange = (d) => {
                switch (pc[partnerName].signalingState) {
                    case 'closed':
                        console.log("Signalling state is 'closed'");
                        h.closeVideo(partnerName);
                        break;
                }
            };
        }

        // Chat textarea
        document.getElementById('chat-input').addEventListener('keypress', (e) => {
            if (e.which === 13 && (e.target.value.trim())) {
                e.preventDefault();

                sendMsg(e.target.value);

                setTimeout(() => {
                    e.target.value = '';
                }, 50);
            }
        });
    }
});

Answer 1

從失敗（卡在“新”狀態）Safari 運行中查看控制台日志會很有幫助。

一種可能性是 Safari 沒有進行完整的冰候選人收集。 正如 Phillip Hancke 所指出的，看到 SDP 將有助於確定這是否正在發生。 就像看到控制台日志一樣。 過去，Safari 有各種與候選人收集相關的怪癖和錯誤。

強制 Safari 收集候選人的一種方法是顯式設置offerToReceiveAudio和offerToReceiveVideo ：

await pc[partnerName].createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true })