Not working with safari and chrome ios 13

[riccardogermana]

I got this problem over chrome and safari, both desktop and mobile, initially it start the IceConnection, but after it got queued, it just stays in that state, and do not connect in anyway. I tried to read into some of the issues of the Git, but even with the change of the code (added URLS, used configs from PeerJs) on connection with Safari still have the problem. Somebody have any advice that can help me with this problem?

const peer = new Peer(id, {
      host: '192.168.202.65',
      port: 9000,
      path: '/peerjs',
      debug: 3,
      config: {
        iceServers: [
          {urls: 'stun:stun.l.google.com:19302'},
          {urls: 'turn:0.peerjs.com:3478', username: 'peerjs', credential: 'peerjsp'}
        ]
      }
    });
    peer.on('open', () => {
      peer.connect(this.anotherid, {
        reliable: true
      });
    });
    peer.on('connection', (conn) => {
      console.log('connection');
      conn.on('open', () => {
        conn.send(new DataConnection('coordinate', {lat: this.lat, long: this.long}));
        console.log('connected');
      });
      conn.on('error', (err) => {
        Swal.fire({
          icon: 'error',
          title: 'ERRORE',
          text: err
        });
      });
      conn.on('close', (err) => {
        console.log(err);
      });
      conn.on('data', (data) => {
        this.action(data);
        console.log(data);
      });
      this.conn = conn;
    });

[maxpavlov]

Its broken for Safari and has been broken for iOS Safari and Chrome for quite a while. DataChannel there doesn't support binaryBlob sending, while the util for these systems report it is supported. You have to introduce a custom fix. I did it and it works. For me, with current 1.1.0 version, desktop safari is also affected.

[riccardogermana]

What type of custom fix?

[Niksac]

This might be the problem for my #598 too. I am also interested in the fix @maxpavlov

[Niksac]

@riccag3 Thanks to the hint of maxpavlov, I fixxed it too in my project:

When connecting, the connection options, set serialization to 'json' (preferably only on Safari devices).

Here is some sample code on how I did it:

function checkSafari() {
  let seemsChrome = navigator.userAgent.indexOf("Chrome") > -1;
  let seemsSafari = navigator.userAgent.indexOf("Safari") > -1;
  return seemsSafari && !seemsChrome;
}

let peerOptions = {};

if (checkSafari()) {
  peerOptions.serialization = "json";
}

conn = peer.connect('ABCDEFG', peerOptions);

[maxpavlov]

@Niksac just when I came here to actually provide a fix code =) Thanks. As I know @afrokick is aware of the problem, and has even updated the docs to reflect the "only json" nature of Safari. However, I think, that we not only should inform the developers that they should use serialization = "json" for peerOptions to support Safari, we should allow binary format but for safari, fall back to a working approach in dataconnection.ts of the peerjs library.

[riccardogermana]

I tried to add this line but don't work, it does the same thing as before

initConn(id) {
    const peerConf: any = {
      host: '192.168.202.65',
      port: 9000,
      path: '/peerjs',
      debug: 3,
      config: {
        iceServers: [
          {urls: 'stun:stun.l.google.com:19302'},
          {urls: 'turn:0.peerjs.com:3478', username: 'peerjs', credential: 'peerjsp'}
        ]
      },
    };
    const peerOptions: any = {};
    if (this.checkSafari()) {
      peerOptions.serialization = 'json';
    }
    const peer = new Peer(id, peerConf);
    peer.on('open', () => {
      peer.connect(this.anotherid, peerOptions);
    });
    peer.on('connection', (conn) => {
      conn.on('open', () => {
        conn.send(new DataConnection('coordinate', {lat: this.lat, long: this.long}));
        console.log('connected');
      });
      conn.on('error', (err) => {
        Swal.fire({
          icon: 'error',
          title: 'ERRORE',
          text: err
        });
      });
      conn.on('close', (err) => {
        console.log(err);
      });
      conn.on('data', (data) => {
        this.action(data);
        console.log(data);
      });
      this.conn = conn;
    });
    peer.on('call', (call) => {
      call.answer(this.getStream(this.cliente.nativeElement));
      call.on('stream', (remotestream) => {
        this.cliente.nativeElement.srcObject = remotestream;
      });
      call.on('close', () => {
        Swal.fire({
          icon: 'info',
          title: 'Videochiamata terminata!'
        });
      });
      call.on('error', (err) => {
        console.log(err);
      });
    });
    return peer;
  }

[juliangorge]

Now it's working on Safari iOS but not Chrome iOS. my proj: https://edoctor-webapp.herokuapp.com/

[kojiro2ph]

Now it's working on Safari iOS but not Chrome iOS. my proj: https://edoctor-webapp.herokuapp.com/

how did you solved this ? my ios cant use peerJS and video call

[juliangorge]

Do you use HTTPS? are you on same NAT?

[kojiro2ph]

Do you use HTTPS? are you on same NAT?

yes. i use https

here is my demo

https://d3avcu2s7x6wu3.cloudfront.net/f/index.html

it works with PC but not with SP

[juliangorge]

Check your log. You’ve got this error: [Error] Failed to load resource: the server responded with a status of 404 () (socket.iohttp://socket.io, line 0) https://d3avcu2s7x6wu3.cloudfront.net/socket.io/?EIO=3&transport=polling&t=N5AgvrZ

Check this: https://stackoverflow.com/questions/46151327/keep-getting-socket-io-eio-3transport-pollingt-lvm1sgo-404-errors-when-i-de

I fixed that putting on my domain:port on let io = io(‘https://domain:PORT/’https://domain:port/’) on app.js client. When I used heroku app, I didn’t need to do that, check and tell me.

El 5 abr. 2020, a las 10:54, kojiro2ph <[email protected]mailto:[email protected]> escribió:

with

[juliangorge]

I can access mic & camera and watch me on ios and macos but cannot connect

Check your log. You’ve got this error: [Error] Failed to load resource: the server responded with a status of 404 () (socket.iohttp://socket.io, line 0) https://d3avcu2s7x6wu3.cloudfront.net/socket.io/?EIO=3&transport=polling&t=N5AgvrZ Check this: https://stackoverflow.com/questions/46151327/keep-getting-socket-io-eio-3transport-pollingt-lvm1sgo-404-errors-when-i-de I fixed that putting on my domain:port on let io = io(‘https://domain:PORT/’https://domain:port/’) on app.js client. When I used heroku app, I didn’t need to do that, check and tell me. El 5 abr. 2020, a las 10:54, kojiro2ph <[email protected]mailto:[email protected]> escribió: with

[kojiro2ph]

oh, i forgot to fix this error ><

i saw your original heroku and i found that you use socket.io.js so i include this into my app.js

but i saw your code but it seem let socket = io()

are not used by any other places

do i need to use this?

[juliangorge]

As i said, on localhost and VPS hosting was needed -> io(domain:port), Check it, please

Enviado desde mi iPhone

El 5 abr. 2020, a la(s) 14:16, kojiro2ph [email protected] escribió:



oh, i forgot to fix this error ><

i saw your original heroku and i found that you use socket.io.js so i include this into my app.js

but i saw your code but it seem let socket = io()

are not used by any other places

do i need to use this?

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/peers/peerjs/issues/599#issuecomment-609450162, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABINQTETSBK3FLWOSVSWQZLRLC4F7ANCNFSM4JSJXYDA.

[kojiro2ph]

i solved it !

the way is i changed the peerjs version 0.3 to 1.1.0 : P

https://d3avcu2s7x6wu3.cloudfront.net/f/test.html

now it works PC SP !

[qubit999]

Use PeerJS version 1.1.0, then it will work on iOS Safari

Check here https://github.com/peers/peerjs/issues/662#issuecomment-623161249

[afrokick]

As I know @afrokick is aware of the problem, and has even updated the docs to reflect the "only json" nature of Safari. However, I think, that we not only should inform the developers that they should use serialization = "json" for peerOptions to support Safari, we should allow binary format but for safari, fall back to a working approach in dataconnection.ts of the peerjs library.

Agree with you. I'll look at it again in the next versions.