Fix data only connections in safari from working and fixed sync bug

src/helpers/shared.js

@@ -8,3 +8,24 @@ export function omit(obj, keys) {
   }
   return tmp;
 }
+
+/**
+ * This asks for audio permission on safari based devices
+ * this is needed to fix a implementation detail in safari
+ * where webRTC data channels cannot be opened without first
+ * using getUserMedia see:
+ * https://github.com/webrtc/samples/issues/1123
+ * https://bugs.webkit.org/show_bug.cgi?id=189503
+ * https://github.com/w3c/webrtc-nv-use-cases/issues/58
+ */
+export async function enableDataConnectionForSafari() {
+  if (
+    navigator.userAgent.match(/iPad/i) ||
+    navigator.userAgent.match(/iPhone/i) ||
+    (navigator.userAgent.match(/Safari/i) &&
+      !navigator.userAgent.match(/Chrome/i))
+  ) {
+    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    stream.getTracks().forEach(t => t.stop());
+  }
+}

src/helpers/useSession.js

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import Peer from "peerjs";
 
+import { enableDataConnectionForSafari } from "./shared";
+
 function useSession(onConnectionOpen, onConnectionSync) {
   const [peerId, setPeerId] = useState(null);
   const [peer, setPeer] = useState(null);
@@ -29,6 +31,7 @@ function useSession(onConnectionOpen, onConnectionSync) {
     function handleOpen(id) {
       console.log("Peer open", id);
       setPeerId(id);
+      enableDataConnectionForSafari();
     }
 
     function handleConnection(connection) {
@@ -106,6 +109,11 @@ function useSession(onConnectionOpen, onConnectionSync) {
               metadata: { sync: false }
             });
             addConnection(syncConnection);
+            syncConnection.on("open", () => {
+              if (onConnectionOpen) {
+                onConnectionOpen(syncConnection);
+              }
+            });
           }
         }
       });