Web RT C между двумя разными веб-клиентами не работает

Question

В соответствии с нашими требованиями к веб-RT C, существует два разных клиента

1. Player (игрок, экран которого используется клиентом захвата)
2. Capture (общий доступ к экрану) Два веб-клиенты общаются и обмениваются предложениями и кандидатами ICE с помощью WebSocket.

In Chrome [Версия 84.0.4147.105 (Официальная сборка) (64-разрядная)]

Ошибка в консоли Player и Capture javascript в chrome. Но если мы проверим chrome: // webrt c -internals / , мы увидим следующий график событий и передач:

Player Capture введите описание изображения здесь

Здесь я вижу, что потоковое видео передается, но не воспроизводится на стороне плательщика, и ошибка кандидата ICE отображается в журнале событий. Это проблема, что видеопоток не работает на стороне плательщика?

Firefox (v79.0) Отображение ошибок в консоли:

DOMException: No remoteDescription.

В плеере. js номер строки: 33. Любая идея, почему два разных браузера имеют разные ошибки?

Player. js

(function(){
    var localVideo, remoteVideo, localConnection, remoteConnection;
    const MESSAGE_TYPE = {
        SDP: 'SDP',
        CANDIDATE_LOCAL: 'LOCAL_CANDIDATE',
        CANDIDATE_REMOTE: 'REMOTE_CANDIDATE'
    };
    const signaling = new WebSocket('ws://127.0.0.1:1337');
    var configuration = {
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
    }
    remoteConnection = new RTCPeerConnection({configuration: configuration, iceServers: [{ urls: 'stun:aalimoshaver.com:3478' }]});
    remoteConnection.onicecandidate = function(e) { !e.candidate
        || signaling.send(JSON.stringify({message_type:MESSAGE_TYPE.CANDIDATE_REMOTE, content: e.candidate.toJSON()}));
        }
    remoteConnection.ontrack = function (e) {
        const remoteVideo = document.getElementById('remote-view');
        if (!remoteVideo.srcObject) {
            remoteVideo.srcObject = e.streams[0];
          }
        };
    signaling.onmessage = function (message){
        const data = JSON.parse(message.data);
        

        const message_type = data.message_type;
        const content = data.content;
        try {
            if (message_type === MESSAGE_TYPE.CANDIDATE_LOCAL && content) {
                remoteConnection.addIceCandidate(content)
                    .catch(function (e) {
                        console.error(e)
                    });
            }else if (message_type === MESSAGE_TYPE.SDP && content) {
                if (content.type === 'offer') {
                    remoteConnection.setRemoteDescription(content);
                    remoteConnection.createAnswer()
                    .then(function(answer){
                        remoteConnection.setLocalDescription(answer);
                        signaling.send(JSON.stringify({
                            message_type: MESSAGE_TYPE.SDP,
                            content: answer
                        }));    
                    });
                  } else {
                    console.log('Unsupported SDP type.');
                }
            }
        } catch (err) {
            console.error(err);
        }
    };
})()

Capture. js

/**
 * Created by Sowvik Roy on 30-07-2020.
 */

(function () {
    var localVideo, remoteVideo, localConnection, remoteConnection;
    const MESSAGE_TYPE = {
        SDP_LOCAL: 'SDP',
        CANDIDATE_LOCAL: 'LOCAL_CANDIDATE',
        CANDIDATE_REMOTE: 'REMOTE_CANDIDATE'
    };
    var configuration = {
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
    };
  const signaling = new WebSocket('ws://127.0.0.1:1337');
    signaling.onmessage = function (message){
        const data = JSON.parse(message.data);
        
        const message_type = data.message_type;
        const content = data.content;
        try {
            if (message_type === MESSAGE_TYPE.CANDIDATE_REMOTE && content) {
                localConnection.addIceCandidate(content)
                    .catch(function (e) {
                        console.error(e)
                    });
            } else if (message_type === MESSAGE_TYPE.SDP_LOCAL) {
                if (content.type === 'answer') {
                    localConnection.setRemoteDescription(content);
                } else {
                    console.log('Unsupported SDP type.');
                }
            }
        } catch (err) {
            console.error(err);
        }
    };
    document.addEventListener('click', function (event) {
        if (event.target.id === 'start') {
            startChat();
            localVideo = document.getElementById('self-view');
            remoteVideo = document.getElementById('remote-view');
        }
    });

    function startConnection(){
        localConnection = new RTCPeerConnection({configuration: configuration, iceServers: [{ urls: 'stun:aalimoshaver.com:3478' }]});
        localConnection.onicecandidate = function (e) {
            !e.candidate
            || signaling.send(JSON.stringify({message_type:MESSAGE_TYPE.CANDIDATE_LOCAL, content: e.candidate.toJSON()}));
        };
        localConnection.createOffer()
        .then(function (offer) {
            if(offer){
                localConnection.setLocalDescription(offer);
                signaling.send(JSON.stringify({message_type:MESSAGE_TYPE.SDP_LOCAL, content: localConnection.localDescription}));
                if (navigator.getDisplayMedia) {
                    navigator.getDisplayMedia({video: true}).then(onCaptureSuccess);
                } else if (navigator.mediaDevices.getDisplayMedia) {
                    navigator.mediaDevices.getDisplayMedia({video: true}).then(onCaptureSuccess);
                } else {
                    navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}}).then(onCaptureSuccess);
                }
            }
            else{
                console.error("RTC offer is null");
            }
           
        })
        .catch(function (e) {
            console.error(e)
        });
    }

    function onCaptureSuccess(stream){
        localVideo.srcObject = stream;
        stream.getTracks().forEach(
            function (track) {
                localConnection.addTrack(
                    track,
                    stream
                );
            }
        );
    }

    function startChat() {
        if (navigator.getDisplayMedia) {
            navigator.getDisplayMedia({video: true}).then(onMediaSuccess);
        } else if (navigator.mediaDevices.getDisplayMedia) {
            navigator.mediaDevices.getDisplayMedia({video: true}).then(onMediaSuccess);
        } else {
            navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}}).then(onMediaSuccess);
        }
        
    }

    function onMediaSuccess(stream) {
        localVideo.srcObject = stream;
          // Set up the ICE candidates for the two peers
          localConnection = new RTCPeerConnection({configuration: configuration, iceServers: [{ urls: 'stun:stun.xten.com:19302' }]});
          localConnection.onicecandidate = function (e) {
              !e.candidate
              || signaling.send(JSON.stringify({message_type:MESSAGE_TYPE.CANDIDATE_LOCAL, content: e.candidate.toJSON()}));
          };
         
  
       
        stream.getTracks().forEach(
            function (track) {
                localConnection.addTrack(
                    track,
                    stream
                );
            }
        );
        localConnection.createOffer()
        .then(function (offer) {
            if(offer){
                localConnection.setLocalDescription(offer);
                signaling.send(JSON.stringify({message_type:MESSAGE_TYPE.SDP_LOCAL, content: localConnection.localDescription}));
            }
            else{
                console.error("RTC offer is null");
            }
           
        })
        .catch(function (e) {
            console.error(e)
        });
  
    }
})();

Кто-нибудь может объяснить или определить лазейку в коде? Пожалуйста, дайте мне знать, если вам понадобится дополнительная информация.