Uncaught (в обещании) DOMException: Ошибка обработки кандидата ICE WebRTC RTCIceCandidate

Question

Оказывается, эта ошибка, пожалуйста, помогите, где проблема

** Uncaught (в обещании) DOMException: Ошибка обработки кандидата ICE **

вот исходный код звонка

ConOut.getStartScreenSharing => ConIn.socket.on ('OnMessage') => onOffer ()

там функция getStartScreenSharing называется

все сделал по примеру

с использованием браузера Chrome 68.0.3440.106

import Vue from "vue";

export default class ConOut {
  constructor() {

    let t = this;      
    t.pc = new RTCPeerConnection();

    this.socket = Vue.prototype.$signalR;

    this.socket.on('OnMessage', (chName, message) => {

      var desc = JSON.parse(message);    
      if (desc.type === 'candidate') {    
        t.pc.addIceCandidate(new RTCIceCandidate({
          sdpMLineIndex: desc.label,
          candidate: desc.candidate
        }))    
      }

      if (desc.type == 'answer') {
        t.pc.setRemoteDescription(desc);
      }
    });

    this.socket.start().then(function () {});
  }

  send = function (message) {
    this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
  }

  getStartScreenSharing() {
    let t = this;    
    navigator.getUserMedia({
      audio: false,
      video: true
    }, function (stream) {

      t.pc.addStream(stream);

      t.pc.createOffer().then(function (ff) {
        t.pc.setLocalDescription(ff);
        t.send({
          type: "offer",
          offer: ff
        });
      });

      t.pc.onicecandidate = function (event) {    
        if (event.candidate) {
          t.send({
            type: 'candidate',
            label: event.candidate.sdpMLineIndex,
            id: event.candidate.sdpMid,
            candidate: event.candidate.candidate
          })
        };

        t.pc.onaddstream = function (s) {
          t.CreateVideoTag(s)
        }
      };
    })
  }
};

здесь мы ждем Оферты и отвечаем

import Vue from "vue";

export default class ConIn {
  constructor() {

    let t = this;

    t.pc = new RTCPeerConnection();
    this.socket = Vue.prototype.$signalR;

    this.socket.on('OnMessage', (chName, message) => {

      var desc = JSON.parse(message);
      if (desc.type === 'candidate') {
        console.log(desc)

        t.pc.addIceCandidate(new RTCIceCandidate({
          sdpMLineIndex: desc.label,
          candidate: desc.candidate
        }))

      } else {
        t.onOffer(desc.offer)
      }
    });

    this.socket.start().then(function () {});
  }

  send = function (message) {
    this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
  }

  onOffer(offer) {
    let t = this;

    navigator.getUserMedia({
      audio: false,
      video: true
    }, function (stream) {
      t.pc.addStream(stream);
      t.pc.setRemoteDescription(new RTCSessionDescription(offer), function () {
        t.pc.createAnswer(function (answer) {
          t.pc.setLocalDescription(answer);
          t.send(answer)
        });
      });

      t.pc.onicecandidate = function (event) {   

        if (event.candidate) {
          t.send({
            type: 'candidate',
            label: event.candidate.sdpMLineIndex,
            id: event.candidate.sdpMid,
            candidate: event.candidate.candidate
          })
        }

        t.pc.onaddstream = function (s) {
          t.CreateVideoTag(s)
        }
      };
    })
  }     
};

Answer 1

вот код, который работает без ошибок

ConOut.js

            import Vue from "vue";

            export default class ConOut {
              constructor() {

                let t = this;

                t.pc = new RTCPeerConnection();

                t.pc.onicecandidate = function (event) {      
                  if (event.candidate) {
                    t.send({
                      type: 'candidate',
                      candidate: event.candidate
                    })
                  };
                };

                t.pc.onaddstream = function (s) {
                  console.log('onaddstream')
                  t.createVideoTag(s)
                }

                this.socket = Vue.prototype.$signalR;

                this.socket.on('OnMessage', (chName, message) => {

                  var desc = JSON.parse(message);      

                  if (desc.type === 'candidate') {
                    t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))
                  }

                  if (desc.type == 'answer') {                
                    t.pc.setRemoteDescription(new RTCSessionDescription(desc), function () {
                      console.log('Setting remote description by answer');
                    }, function (e) {
                      console.error(e);
                    });
                  }
                });

                this.socket.start().then(function () {
                  console.info('SignalR connection is opened.');
                });
              }

              send = function (message) {
                this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
              }

              getStartScreenSharing() {
                let t = this;

                navigator.getUserMedia({
                  audio: false,
                  video: true
                }, function (stream) {

                  t.pc.addStream(stream);

                  t.pc.createOffer().then(function (ff) {
                    t.pc.setLocalDescription(ff);
                    t.send({
                      type: "offer",
                      offer: ff
                    });
                  });
                })
              }

              createVideoTag = function (s, isRemote = false) {

                let videoContener = document.getElementById('videoContener');
                let x = document.createElement("VIDEO");
                x.setAttribute("width", "320");
                x.setAttribute("height", "240");
                x.srcObject = s.stream;

                x.controls = true    
                x.playsinline = true
                x.autoplay = true

                videoContener.appendChild(x);
                return x;
              }
            };

ConIn.js

            import Vue from "vue";

            export default class ConIn {
              constructor() {

                let t = this;

                t.ic = [];
                t.isSetRD = false


                t.pc = new RTCPeerConnection();
                t.pc.onicecandidate = function (event) {
                  if (event.candidate) {
                    t.send({
                      type: 'candidate',
                      candidate: event.candidate
                    })
                  };
                };

                t.pc.onaddstream = function (s) {
                  console.log('onaddstream')
                  t.createVideoTag(s)
                }

                this.socket = Vue.prototype.$signalR;

                this.socket.on('OnMessage', (chName, message) => {

                  var desc = JSON.parse(message);

                  console.log(desc)

                  if (desc.type === 'candidate') {
                    setTimeout(function () {          
                      t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))
                    }, 5000);

                  } else {
                    t.onOffer(desc.offer)
                  }
                });

                this.socket.start().then(function () {
                  if (t.enableLogs) {
                    console.info('SignalR connection is opened.');
                  }
                });
              }

              send = function (message) {
                this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
              }

              onOffer(offer) {
                let t = this;

                navigator.getUserMedia({
                  audio: false,
                  video: true
                }, function (stream) {
                  t.pc.addStream(stream);

                  t.pc.setRemoteDescription(new RTCSessionDescription(offer))
                    .then(() => t.pc.createAnswer())
                    .then(answer => {
                      t.pc.setLocalDescription(answer)
                      t.send(answer)
                    })
                    .catch(e => console.error(e));

                })
              }

              createVideoTag = function (s, isRemote = false) {

                let videoContener = document.getElementById('videoContener');
                let x = document.createElement("VIDEO");
                x.setAttribute("width", "320");
                x.setAttribute("height", "240");
                x.srcObject = s.stream;

                x.controls = true
                x.playsinline = true
                x.autoplay = true

                videoContener.appendChild(x);
                return x;
              }
            };