working poc

eslint.config.mjs

@@ -11,6 +11,7 @@ export default [
         ...globals.browser,
         lucide: "readonly",
         Peer: "readonly",
+        streamSaver: "readonly",
       },
     },
   },

index.html

@@ -9,6 +9,8 @@
   <link rel="stylesheet" href="material-colors.css" />
   <script src="https://unpkg.com/lucide@0"></script>
   <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/streamsaver@2.0.3/StreamSaver.min.js"></script>
   <script type="importmap">
       {
         "imports": {

main.js

@@ -22,8 +22,9 @@ const app = createApp({
       remoteId: null,
       connection: null, // TODO multiple connections
       data: null, // TODO multiple file
-      streamEnqueue: null,
-      streamClose: null,
+      fileStream: null,
+      fileName: null,
+      fileSize: null,
     };
   },
   computed: {},
@@ -52,6 +53,19 @@ const app = createApp({
     initPeer() {
       this.peer = new Peer({
         debug: 3,
+        host: "peer.klemek.fr",
+        port: "443",
+        secure: true,
+        config: {
+          iceServers: [
+            { urls: ["stun:stun.l.google.com:19302"] },
+            {
+              urls: [`turn:klemek.fr:3478`, `turns:klemek.fr:5349`],
+              username: "username",
+              credential: "credential",
+            },
+          ],
+        },
       });
       this.peer.on("open", this.peerOpen);
       this.peer.on("connection", this.peerConnection);
@@ -80,11 +94,11 @@ const app = createApp({
     peerClose() {
       console.log("peerClose");
       this.peer = null;
-      setTimeout(this.initPeer);
+      // setTimeout(this.initPeer);
     },
     peerDisconnected() {
       console.log("peerDisconnected");
-      this.peer.reconnect();
+      // this.peer.reconnect();
     },
     peerError(err) {
       console.log("peerError", err);
@@ -95,21 +109,22 @@ const app = createApp({
       console.log(data.type);
       switch (data.type) {
         case "start":
-          ReadableStream({
-            start(ctrl) {
-              this.streamEnqueue = (chunk) => ctrl.enqueue(chunk);
-              this.streamClose = () => ctrl.close();
-            },
-          });
+          this.fileName = data.fileName;
+          this.fileSize = data.fileSize;
+          this.fileStream = streamSaver
+            .createWriteStream(this.fileName, {
+              size: this.fileSize,
+            })
+            .getWriter();
           break;
         case "chunk":
-          if (this.streamEnqueue) {
-            this.streamEnqueue(data.bytes);
+          if (this.fileStream) {
+            this.fileStream.write(new Uint8Array(data.bytes));
           }
           break;
         case "end":
-          if (this.streamClose) {
-            this.streamClose();
+          if (this.fileStream) {
+            this.fileStream.close();
           }
           break;
         default:
@@ -131,6 +146,8 @@ const app = createApp({
       if (!file) {
         return;
       }
+      this.fileName = file.name;
+      this.fileSize = file.size;
       this.data = null;
       const reader = new FileReader();
       reader.onload = () => {
@@ -150,6 +167,8 @@ const app = createApp({
     start() {
       this.connection.send({
         type: "start",
+        fileName: this.fileName,
+        fileSize: this.fileSize,
       });
       console.log("start");
       for (