├── README.md
├── e2ee_screen_share
    ├── e2ee_video_player.html
    ├── index.html
    └── sw.js
├── file_upload_progress.html
├── file_upload_progress_with_transformstream.html
├── gzip_inifinite_stream.html
├── infinite_text_stream.html
├── screen_share.html
├── screen_share_with_filter.html
├── simple_phone.html
├── support_check.html
├── support_check_with_piping_server.html
├── text_stream.html
├── text_stream_with_text_encoder_stream.html
├── video_chat.html
├── video_player.html
└── zip_file_transfer
    └── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # piping-server-streaming-upload
 2 | 
 3 | `fetch()`'s streaming upload feature over [Piping Server](https://github.com/nwtgck/piping-server) 
 4 | 
 5 | ## Usage
 6 | 
 7 | ```bash
 8 | cd <this repo>
 9 | python3 -m http.server
10 | ```
11 | 
12 | Then, go to <http://localhost:8000/>.  
13 | Note that, currently, Google Chrome Canary and Dev are supported with `enable-experimental-web-platform-features` flag.
14 | 


--------------------------------------------------------------------------------
/e2ee_screen_share/e2ee_video_player.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | // Register Service Worker
 3 | if ('serviceWorker' in navigator) {
 4 |   window.addEventListener('load', async () => {
 5 |     navigator.serviceWorker.register('./sw.js');
 6 |   });
 7 | }
 8 | 
 9 | function view() {
10 |   window.player.src = "/e2ee_screen_share/swvideo#myvideo";
11 |   window.player.play();
12 | }
13 | </script>
14 | <video id="player" controls></video><br>
15 | <button onclick="view()">view</button>
16 | 


--------------------------------------------------------------------------------
/e2ee_screen_share/index.html:
--------------------------------------------------------------------------------
 1 | <button onclick="share()">Share</button>
 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/openpgp/4.10.7/compat/openpgp.min.js"></script>
 3 | <script>
 4 | const password = 'my secret password';
 5 | 
 6 | async function share() {
 7 |   // Get display
 8 |   const mediaStream = await navigator.mediaDevices.getDisplayMedia({video: true});
 9 |   // Convert MediaStream to ReadableStream
10 |   const readableStream = mediaStreamToReadableStream(mediaStream, 100);
11 |   // E2E encryption
12 |   const encryptedReadableStream = await encryptStream(readableStream, password)
13 | 
14 |   fetch("https://ppng.io/myvideo", {
15 |     method: 'POST',
16 |     body: encryptedReadableStream,
17 |     allowHTTP1ForStreamingUpload: true,
18 |   });
19 | }
20 | 
21 | // Convert MediaStream to ReadableStream
22 | function mediaStreamToReadableStream(mediaStream, timeslice) {
23 |   return new ReadableStream({
24 |     start(ctrl){
25 |       const recorder = new MediaRecorder(mediaStream);
26 |       recorder.ondataavailable = async (e) => {
27 |         ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));
28 |       };
29 |       recorder.start(timeslice);
30 |     }
31 |   });
32 | }
33 | 
34 | // Encrypt ReadableStream with password by OpenPGP
35 | async function encryptStream(readableStream, password) {
36 |   const options = {
37 |     message: openpgp.message.fromBinary(readableStream),
38 |     passwords: [password],
39 |     armor: false
40 |   };
41 |   const ciphertext = await openpgp.encrypt(options);
42 |   return ciphertext.message.packets.write();
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/e2ee_screen_share/sw.js:
--------------------------------------------------------------------------------
 1 | importScripts("https://cdnjs.cloudflare.com/ajax/libs/openpgp/4.10.7/compat/openpgp.min.js");
 2 | 
 3 | const password = "my secret password";
 4 | 
 5 | self.addEventListener('fetch', (event) => {
 6 |   const url = new URL(event.request.url);
 7 |   if (url.pathname === '/e2ee_screen_share/swvideo') {
 8 |     const path = url.hash.substring(1);
 9 |     event.respondWith((async () => {
10 |       const res = await fetch(`https://ppng.io/${path}`);
11 |       // Allow unauthenticated stream
12 |       // (see: https://github.com/openpgpjs/openpgpjs/releases/tag/v4.0.0)
13 |       openpgp.config.allow_unauthenticated_stream = true;
14 |       // Decrypt
15 |       const rawStream = await (async () => {
16 |         const plaintext = await openpgp.decrypt({
17 |           message: await openpgp.message.read(res.body),
18 |           passwords: [password],
19 |           format: 'binary'
20 |         });
21 |         return plaintext.data;
22 |       })();
23 | 
24 |       return new Response(rawStream);
25 |     })());
26 |   }
27 | });
28 | 


--------------------------------------------------------------------------------
/file_upload_progress.html:
--------------------------------------------------------------------------------
 1 | <input type="file" id="input_file">
 2 | <input placeholder="path" id="path">
 3 | <button onclick="send()">Send</button><br>
 4 | <progress id="progress_bar" value="0" max="100"></progress><br>
 5 | <div id="message"></div>
 6 | 
 7 | <script>
 8 | function send() {
 9 |   const file = window.input_file.files[0];
10 |   // Convert file to ReadableStream
11 |   const readableStream = new Response(file).body;
12 |   // Attach progress
13 |   const readableStreamWithProgress = getReadableStreamWithProgress(readableStream, (loaded) => {
14 |     // Show progress
15 |     const progress = window.progress_bar.value = loaded / file.size * 100;
16 |     window.message.innerText = `${loaded} bytes (${progress.toFixed(2)}%)`;
17 |   });
18 | 
19 |   // Send a file
20 |   fetch(`https://ppng.io/${window.path.value}`, {
21 |     method: 'POST',
22 |     body: readableStreamWithProgress,
23 |     allowHTTP1ForStreamingUpload: true,
24 |   });
25 | }
26 | 
27 | function getReadableStreamWithProgress(baseStream, callback) {
28 |   const reader = baseStream.getReader();
29 |   let loaded = 0;
30 |   callback(loaded);
31 |   return new ReadableStream({
32 |     async pull(ctrl) {
33 |       const { done, value } = await reader.read();
34 |       if (done) {
35 |         ctrl.close();
36 |         return;
37 |       }
38 |       ctrl.enqueue(value);
39 |       loaded += value.byteLength;
40 |       callback(loaded);
41 |     }
42 |   });
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/file_upload_progress_with_transformstream.html:
--------------------------------------------------------------------------------
 1 | <input type="file" id="input_file">
 2 | <input placeholder="path" id="path">
 3 | <button onclick="send()">Send</button><br>
 4 | <progress id="progress_bar" value="0" max="100"></progress><br>
 5 | <div id="message"></div>
 6 | 
 7 | <script>
 8 | function send() {
 9 |   const file = window.input_file.files[0];
10 |   // Convert file to ReadableStream
11 |   const readableStream = new Response(file).body;
12 |   // Attach progress
13 |   const readableStreamWithProgress = readableStream.pipeThrough(progressStream(loaded => {
14 |     // Show progress
15 |     const progress = window.progress_bar.value = loaded / file.size * 100;
16 |     window.message.innerText = `${loaded} bytes (${progress.toFixed(2)}%)`;
17 |   }));
18 | 
19 |   // Send a file
20 |   fetch(`https://ppng.io/${window.path.value}`, {
21 |     method: 'POST',
22 |     body: readableStreamWithProgress,
23 |     allowHTTP1ForStreamingUpload: true,
24 |   });
25 | }
26 | 
27 | function progressStream(callback) {
28 |   let loaded = 0;
29 |   callback(loaded);
30 |   return new TransformStream({
31 |     transform(chunk, ctrl) {
32 |       ctrl.enqueue(chunk);
33 |       loaded += chunk.byteLength;
34 |       callback(loaded);
35 |     }
36 |   });
37 | }
38 | </script>
39 | 


--------------------------------------------------------------------------------
/gzip_inifinite_stream.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | const readableStream = new ReadableStream({
 3 |   pull(ctrl) {
 4 |     // random bytes
 5 |     ctrl.enqueue(window.crypto.getRandomValues(new Uint32Array(128)));
 6 |   }
 7 | }).pipeThrough(new CompressionStream('gzip'))
 8 | 
 9 | fetch("https://ppng.io/mytext", {
10 |   method: 'POST',
11 |   body: readableStream,
12 |   allowHTTP1ForStreamingUpload: true,
13 | });
14 | </script>
15 | 


--------------------------------------------------------------------------------
/infinite_text_stream.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | const readableStream = new ReadableStream({
 3 |   pull(ctrl) {
 4 |     // "ABCDE\n"
 5 |     ctrl.enqueue(new Uint8Array([65, 66, 67, 68, 69, 10]));
 6 |   }
 7 | });
 8 | 
 9 | fetch("https://ppng.io/mytext", {
10 |   method: 'POST',
11 |   body: readableStream,
12 |   allowHTTP1ForStreamingUpload: true,
13 | });
14 | </script>
15 | 


--------------------------------------------------------------------------------
/screen_share.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (async () => {
 3 |   // Get display
 4 |   const mediaStream = await navigator.mediaDevices.getDisplayMedia({video: true});
 5 |   // Convert MediaStream to ReadableStream
 6 |   const readableStream = mediaStreamToReadableStream(mediaStream, 100);
 7 | 
 8 |   fetch("https://ppng.io/myvideo", {
 9 |     method: 'POST',
10 |     body: readableStream,
11 |     allowHTTP1ForStreamingUpload: true,
12 |   });
13 | })();
14 | 
15 | // Convert MediaStream to ReadableStream
16 | function mediaStreamToReadableStream(mediaStream, timeslice) {
17 |   return new ReadableStream({
18 |     start(ctrl){
19 |       const recorder = new MediaRecorder(mediaStream);
20 |       recorder.ondataavailable = async (e) => {
21 |         ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));
22 |       };
23 |       recorder.start(timeslice);
24 |     }
25 |   });
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/screen_share_with_filter.html:
--------------------------------------------------------------------------------
 1 | <button onclick="share()">Share</button>
 2 | 
 3 | <script src="https://raw.githack.com/bennyschudel/JSManipulate/0a6f6c236bbe8456870f3da1af6c5055ab210270/script/jsmanipulate.js"></script>
 4 | <script>
 5 | async function share() {
 6 |   // Get screen
 7 |   const mediaStream = await navigator.mediaDevices.getDisplayMedia({video: true});
 8 |   // Sepia filter
 9 |   const filteredMediaStream = await sepiaMediaStream(mediaStream);
10 |   // Convert MediaStream to ReadableStream
11 |   const readableStream = mediaStreamToReadableStream(filteredMediaStream, 100);
12 | 
13 |   // Share
14 |   fetch("https://ppng.io/myvideo", {
15 |     method: 'POST',
16 |     body: readableStream,
17 |     allowHTTP1ForStreamingUpload: true,
18 |   });
19 | }
20 | 
21 | // Convert MediaStream to ReadableStream
22 | function mediaStreamToReadableStream(mediaStream, timeslice) {
23 |   return new ReadableStream({
24 |     start(ctrl){
25 |       const recorder = new MediaRecorder(mediaStream);
26 |       recorder.ondataavailable = async (e) => {
27 |         ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));
28 |       };
29 |       recorder.start(timeslice);
30 |     }
31 |   });
32 | }
33 | 
34 | async function sepiaMediaStream(mediaStream) {
35 |   const memVideo = document.createElement('video');
36 |   memVideo.srcObject = mediaStream;
37 |   await memVideo.play();
38 | 
39 |   const width = memVideo.videoWidth;
40 |   const height = memVideo.videoHeight;
41 |   const srcCanvas = document.createElement('canvas');
42 |   const dstCanvas = document.createElement('canvas');
43 |   srcCanvas.width = dstCanvas.width = width;
44 |   srcCanvas.height = dstCanvas.height = height;
45 |   const srcCtx = srcCanvas.getContext('2d');
46 |   const dstCtx = dstCanvas.getContext('2d');
47 | 
48 |   (function loop(){
49 |     srcCtx.drawImage(memVideo, 0, 0, width, height);
50 |     const frame = srcCtx.getImageData(0, 0, width, height);
51 | 
52 |     JSManipulate.sepia.filter(frame);
53 |     dstCtx.putImageData(frame, 0, 0);
54 |     setTimeout(loop, 0);
55 |   })();
56 | 
57 |   return dstCanvas.captureStream();
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/simple_phone.html:
--------------------------------------------------------------------------------
 1 | <input placeholder="Your ID" id='your_id'>
 2 | <input placeholder="Peer ID" id='peer_id'>
 3 | <button onclick='connect(this)'>Connect</button>
 4 | <div id="message"></div>
 5 | <audio id="peer_audio"></audio>
 6 | <script>
 7 | async function connect(e) {
 8 |   // Disable inputs
 9 |   window.your_id.disabled = window.peer_id.disabled = e.disabled = true;
10 |   // Synchronize
11 |   await Promise.all([
12 |     fetch(`https://ppng.io/wait/${window.your_id.value}`),
13 |     fetch(`https://ppng.io/wait/${window.peer_id.value}`, { method: 'POST' })
14 |   ]);
15 |   window.message.innerText = "Started!";
16 |   // Get audio
17 |   const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true } });
18 |   // Convert MediaStream to ReadableStream
19 |   const readableStream = mediaStreamToReadableStream(mediaStream, 100);
20 | 
21 |   fetch(`https://ppng.io/${window.peer_id.value}`, {
22 |     method: 'POST',
23 |     body: readableStream,
24 |     allowHTTP1ForStreamingUpload: true,
25 |   });
26 | 
27 |   // Play the peer audio
28 |   window.peer_audio.src = `https://ppng.io/${window.your_id.value}`;
29 |   window.peer_audio.play();
30 | }
31 | 
32 | // Convert MediaStream to ReadableStream
33 | function mediaStreamToReadableStream(mediaStream, timeslice) {
34 |   return new ReadableStream({
35 |     start(ctrl){
36 |       const recorder = new MediaRecorder(mediaStream);
37 |       recorder.ondataavailable = async (e) => {
38 |         ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));
39 |       };
40 |       recorder.start(timeslice);
41 |     }
42 |   });
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/support_check.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | // (from: https://web.dev/fetch-upload-streaming/#feature-detection)
 3 | const supportsRequestStreams = !new Request('', {
 4 |   body: new ReadableStream(),
 5 |   method: 'POST',
 6 | }).headers.has('Content-Type');
 7 | 
 8 | document.write(`support: ${supportsRequestStreams}`)
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/support_check_with_piping_server.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | const readableStream = new ReadableStream( {
 3 |   start(controller) {
 4 |     controller.enqueue(new Uint8Array([65, 66, 67]));
 5 |     controller.close();
 6 |   }
 7 | });
 8 | 
 9 | // (from: https://qiita.com/ryounagaoka/items/4736c225bdd86a74d59c)
10 | const path = Math.random().toString(36).slice(-8);
11 | const url = `https://ppng.io/${path}`;
12 | 
13 | fetch(url, {
14 |   method: "POST",
15 |   body: readableStream,
16 |   allowHTTP1ForStreamingUpload: true,
17 | });
18 | 
19 | (async () => {
20 |   const res = await fetch(url);
21 |   const text = await res.text()
22 |   const readableStreamSupport = text === 'ABC';
23 |   document.write(`support: ${readableStreamSupport}, text: ${text}`);
24 | })();
25 | </script>
26 | 


--------------------------------------------------------------------------------
/text_stream.html:
--------------------------------------------------------------------------------
 1 | <input id="myinput">
 2 | 
 3 | <script>
 4 | const readableStream = new ReadableStream({
 5 |   start(ctrl) {
 6 |     const encoder = new TextEncoder();
 7 |     window.myinput.onkeyup = (ev) => {
 8 |       if (ev.key === 'Enter') {
 9 |         ctrl.enqueue(encoder.encode(ev.target.value+'\n'));
10 |         ev.target.value = '';
11 |       }
12 |     }
13 |   }
14 | });
15 | 
16 | fetch("https://ppng.io/mytext", {
17 |   method: 'POST',
18 |   body: readableStream,
19 |   headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
20 |   allowHTTP1ForStreamingUpload: true,
21 | });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/text_stream_with_text_encoder_stream.html:
--------------------------------------------------------------------------------
 1 | <input id="myinput">
 2 | 
 3 | <script>
 4 | const readableStream = new ReadableStream({
 5 |   start(ctrl) {
 6 |     window.myinput.onkeyup = (ev) => {
 7 |       if (ev.key === 'Enter') {
 8 |         ctrl.enqueue(ev.target.value+'\n');
 9 |         ev.target.value = '';
10 |       }
11 |     }
12 |   }
13 | }).pipeThrough(new TextEncoderStream());
14 | 
15 | fetch("https://ppng.io/mytext", {
16 |   method: 'POST',
17 |   body: readableStream,
18 |   headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
19 |   allowHTTP1ForStreamingUpload: true,
20 | });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/video_chat.html:
--------------------------------------------------------------------------------
 1 | <input placeholder="Your ID" id='your_id'>
 2 | <input placeholder="Peer ID" id='peer_id'>
 3 | <button onclick='connect(this)'>Connect</button>
 4 | <div id="message"></div>
 5 | <video id="peer_video" controls></video>
 6 | 
 7 | <script>
 8 | async function connect(ev) {
 9 |   // Disable inputs
10 |   window.your_id.disabled = window.peer_id.disabled = ev.disabled = true;
11 |   // Synchronize
12 |   await Promise.all([
13 |     fetch(`https://ppng.io/wait/${window.your_id.value}`),
14 |     fetch(`https://ppng.io/wait/${window.peer_id.value}`, { method: 'POST' })
15 |   ]);
16 |   window.message.innerText = "Started!";
17 |   // Get camera and voice
18 |   const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: { echoCancellation: true } });
19 |   // Convert MediaStream to ReadableStream
20 |   const readableStream = mediaStreamToReadableStream(mediaStream, 100);
21 |   // Send to peer
22 |   fetch(`https://ppng.io/${window.peer_id.value}`, {
23 |     method: 'POST',
24 |     body: readableStream,
25 |     allowHTTP1ForStreamingUpload: true,
26 |   });
27 |   // Play the peer video
28 |   window.peer_video.src = `https://ppng.io/${window.your_id.value}`;
29 |   window.peer_video.play();
30 | }
31 | 
32 | // Convert MediaStream to ReadableStream
33 | function mediaStreamToReadableStream(mediaStream, timeslice) {
34 |   return new ReadableStream({
35 |     start(ctrl){
36 |       const recorder = new MediaRecorder(mediaStream);
37 |       recorder.ondataavailable = async (e) => {
38 |         ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));
39 |       };
40 |       recorder.start(timeslice);
41 |     }
42 |   });
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/video_player.html:
--------------------------------------------------------------------------------
1 | <video src="https://ppng.io/myvideo" autoplay muted></video>
2 | 


--------------------------------------------------------------------------------
/zip_file_transfer/index.html:
--------------------------------------------------------------------------------
 1 | <!--░██╗░░░░░░░██╗░░██╗░░██████╗░-->
 2 | <!--░██║░░██╗░░██║░░██║░░██╔══██╗-->
 3 | <!--░╚██╗████╗██╔╝░░██║░░██████╔╝-->
 4 | <!--░░████╔═████║░░░██║░░██╔═══╝░-->
 5 | <!--░░╚██╔╝░╚██╔╝░░░██║░░██║░░░░░-->
 6 | <!--░░░╚═╝░░░╚═╝░░░░╚═╝░░╚═╝░░░░░-->
 7 | <!-- Small file is supported, but large file is not streamed yet.-->
 8 | 
 9 | <input type="file" id="input_file">
10 | <input placeholder="path" id="path">
11 | <button onclick="send()">Send</button>
12 | 
13 | <script src="https://wzrd.in/standalone/stream-browserify@latest"></script>
14 | <script src="https://wzrd.in/standalone/buffer@latest"></script>
15 | <script>window.Buffer = buffer.Buffer</script>
16 | <!--<script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>-->
17 | <!--<script src="https://cdn.rawgit.com/creatorrr/web-streams-polyfill/master/dist/polyfill.min.js"></script>-->
18 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
19 | <script>
20 | // (base: https://jsfiddle.net/Lxwvco3u/1/)
21 | 
22 | // // window.Buffer = buffer.Buffer
23 | // const readable = new ReadableStream({
24 | //   pull(ctrl) {
25 | //     ctrl.enqueue(new Uint8Array([65, 66, 67, 10]));
26 | //     ctrl.close();
27 | //   }
28 | // })
29 | // const reader = readable.getReader();
30 | //
31 | // const rs = streamBrowserify.Readable();
32 | // rs._read = async () => {
33 | //   console.log('_read');
34 | //   const { done, value } = await reader.read();
35 | //   rs.push( done ? null : new Buffer(value) );
36 | // };
37 | //
38 | // const zip = new JSZip();
39 | // zip.file('myfilename', rs);
40 | // const internalStream = zip.generateInternalStream({type: "uint8array"});
41 | // console.log({internalStream});
42 | // internalStream.on('data', console.log).resume();
43 | 
44 | function send() {
45 |   const file = window.input_file.files[0];
46 |   // Convert file to ReadableStream
47 |   const readableStream = new Response(file).body;
48 |   // Zip
49 |   const zippedReadableStream = zipReadableStream(readableStream, file.name);
50 |   fetch(`https://ppng.io/${window.path.value}`, {
51 |     method: 'POST',
52 |     body: zippedReadableStream,
53 |     allowHTTP1ForStreamingUpload: true,
54 |   });
55 | }
56 | 
57 | function zipReadableStream(readableStream, name) {
58 |   const zip = new JSZip();
59 |   // Convert ReadableStream to streamBrowserify.Readable
60 |   const readable = readableStreamToReadable(readableStream);
61 |   zip.file(name, readable);
62 |   const internalStream = zip.generateInternalStream({type: "uint8array"});
63 |   return new ReadableStream({
64 |     start(ctrl) {
65 |       internalStream
66 |         .on('data', (data) => {
67 |           console.log({data});
68 |           ctrl.enqueue(data);
69 |         })
70 |         .on('end', () => ctrl.close())
71 |         .resume();
72 |     }
73 |   });
74 | }
75 | 
76 | function readableStreamToReadable(readableStream) {
77 |   const reader = readableStream.getReader();
78 |   const readable = streamBrowserify.Readable();
79 |   readable._read = async () => {
80 |     const { done, value } = await reader.read();
81 |     readable.push( done ? null : new Buffer(value) );
82 |   };
83 |   return readable;
84 | }
85 | </script>
86 | 


--------------------------------------------------------------------------------