Accept stream instances instead of readers

Author: Acconut

demos/browser/video.html

@@ -62,6 +62,6 @@ <h3>Uploads</h3>
     </div>
   </body>
 
-  <script src="../../dist/tus.js"></script>
+  <script src="../../../dist/tus.js"></script>
   <script src="./video.js"></script>
 </html>

demos/browser/video.js

@@ -34,7 +34,6 @@ function startUpload(file) {
   }
 
   const options = {
-    resume: false,
     endpoint,
     chunkSize,
     retryDelays: [0, 1000, 3000, 5000],
@@ -87,52 +86,44 @@ function startUpload(file) {
 function startStreamUpload() {
   navigator.mediaDevices
     .getUserMedia({ video: true })
-    .then((stream) => {
-      const mr = new MediaRecorder(stream)
-      const chunks = []
-      let done = false
-      let onDataAvailable = null
-
-      mr.onerror = onError
-      mr.onstop = () => {
-        done = true
-        if (onDataAvailable) onDataAvailable(readableRecorder.read())
-      }
-      mr.ondataavailable = (event) => {
-        chunks.push(event.data)
-        if (onDataAvailable) {
-          onDataAvailable(readableRecorder.read())
-          onDataAvailable = undefined
+    .then((mediaStream) => {
+      const mr = new MediaRecorder(mediaStream)
+
+      stopRecording = () => {
+        for (const t of mediaStream.getTracks()) {
+          t.stop()
         }
+        mr.stop()
+        stopRecording = null
       }
 
-      mr.start(1000)
+      const readableStream = new ReadableStream({
+        start(controller) {
+          mr.ondataavailable = (event) => {
+            event.data.bytes().then((buffer) => {
+              controller.enqueue(buffer)
+            })
+          }
 
-      const readableRecorder = {
-        read() {
-          if (done && chunks.length === 0) {
-            return Promise.resolve({ done: true })
+          mr.onstop = () => {
+            controller.close()
           }
 
-          if (chunks.length > 0) {
-            return Promise.resolve({ value: chunks.shift(), done: false })
+          mr.onerror = (event) => {
+            controller.error(event.error)
           }
 
-          return new Promise((resolve) => {
-            onDataAvailable = resolve
-          })
+          mr.start(1000)
         },
-      }
-
-      startUpload(readableRecorder)
+        pull(_controller) {
+          // Nothing to do here. MediaRecorder let's us know when there is new data available.
+        },
+        cancel() {
+          mr.stop()
+        },
+      })
 
-      stopRecording = () => {
-        for (const t of stream.getTracks()) {
-          t.stop()
-        }
-        mr.stop()
-        stopRecording = null
-      }
+      startUpload(readableStream)
     })
     .catch(onError)
 }

docs/api.md

@@ -224,7 +224,7 @@ A boolean indicating if the fingerprint in the URL storage will be removed once
 
 _Default value:_ `false`
 
-A boolean indicating whether a stream of data is going to be uploaded as a [`Reader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader). If so, the total size isn't available when we begin uploading, so we use the Tus [`Upload-Defer-Length`](https://tus.io/protocols/resumable-upload.html#upload-defer-length) header. Once the reader is finished, the total file size is sent to the tus server in order to complete the upload. Furthermore, `chunkSize` must be set to a finite number. See the `/demos/browser/video.js` file for an example of how to use this property.
+A boolean indicating whether a stream of data is going to be uploaded as a [`Reader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). If so, the total size isn't available when we begin uploading, so we use the Tus [`Upload-Defer-Length`](https://tus.io/protocols/resumable-upload.html#upload-defer-length) header. Once the reader is finished, the total file size is sent to the tus server in order to complete the upload. Furthermore, `chunkSize` must be set to a finite number. See the `/demos/browser/video.js` file for an example of how to use this property.
 
 #### uploadDataDuringCreation
 
@@ -442,7 +442,7 @@ The constructor for the `tus.Upload` class. The upload will not be started autom
 
 Depending on the platform, the `file` argument must be an instance of the following types:
 
-- inside browser: `File`, `Blob`, or [`Reader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader)
+- inside browser: `File`, `Blob`, or [`Reader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
 - inside Node.js: `Buffer` or `Readable` stream
 - inside Cordova: `File` object from a `FileEntry` (see [demo](/demos/cordova/www/js/index.js))
 - inside React Native: Object with uri property: `{ uri: 'file:///...', ... }` (see [installation notes](/docs/installation.md#react-native-support) and [demo](/demos/reactnative/App.js))

lib/commonFileReader.ts

@@ -1,7 +1,7 @@
 import type { FileSource, UploadInput } from './options.js'
 import { ArrayBufferViewFileSource } from './sources/ArrayBufferViewFileSource.js'
 import { BlobFileSource } from './sources/BlobFileSource.js'
-import { WebStreamFileSource, isWebStream } from './sources/WebStreamFileSource.js'
+import { WebStreamFileSource } from './sources/WebStreamFileSource.js'
 
 /**
  * openFile provides FileSources for input types that have to be handled in all environments,
@@ -33,7 +33,7 @@ export function openFile(input: UploadInput, chunkSize: number): FileSource | nu
     return new ArrayBufferViewFileSource(view)
   }
 
-  if (isWebStream(input)) {
+  if (input instanceof ReadableStream) {
     chunkSize = Number(chunkSize)
     if (!Number.isFinite(chunkSize)) {
       throw new Error(
@@ -53,5 +53,5 @@ export const supportedTypes = [
   'ArrayBuffer',
   'SharedArrayBuffer',
   'ArrayBufferView',
-  'ReadableStreamDefaultReader (Web Streams)',
+  'ReadableStream (Web Streams)',
 ]

lib/options.ts

@@ -41,8 +41,7 @@ export type UploadInput =
   | ArrayBuffer
   | SharedArrayBuffer
   | ArrayBufferView // includes Node.js' Buffer
-  // TODO: We should accept a ReadableStream instead of a reader
-  | Pick<ReadableStreamDefaultReader, 'read'>
+  | ReadableStream // Web Streams
   // available in Node.js
   | NodeReadableStream
   | PathReference

lib/sources/WebStreamFileSource.ts

@@ -1,4 +1,4 @@
-import type { FileSource, SliceResult, UploadInput } from '../options.js'
+import type { FileSource, SliceResult } from '../options.js'
 
 function len(blobOrArray: WebStreamFileSource['_buffer']): number {
   if (blobOrArray === undefined) return 0
@@ -26,8 +26,9 @@ function concat<T extends WebStreamFileSource['_buffer']>(a: T, b: T): T {
 /**
  * WebStreamFileSource implements FileSource for Web Streams.
  */
+// TODO: Can we share code with NodeStreamFileSource?
 export class WebStreamFileSource implements FileSource {
-  private _reader: Pick<ReadableStreamDefaultReader<WebStreamFileSource['_buffer']>, 'read'>
+  private _reader: ReadableStreamDefaultReader<Uint8Array>
 
   private _buffer: Blob | Uint8Array | undefined
 
@@ -43,8 +44,14 @@ export class WebStreamFileSource implements FileSource {
   // it manually (see the `uploadSize` option).
   size = null
 
-  constructor(reader: Pick<ReadableStreamDefaultReader, 'read'>) {
-    this._reader = reader
+  constructor(stream: ReadableStream) {
+    if (stream.locked) {
+      throw new Error(
+        'Readable stream is already locked to reader. tus-js-client cannot obtain a new reader.',
+      )
+    }
+
+    this._reader = stream.getReader()
   }
 
   async slice(start: number, end: number): Promise<SliceResult> {
@@ -102,14 +109,6 @@ export class WebStreamFileSource implements FileSource {
   }
 
   close() {
-    // TODO: We should not call cancel
-    //@ts-expect-error cancel is not defined since we only pick `read`
-    if (this._reader.cancel) this._reader.cancel()
+    this._reader.cancel()
   }
 }
-
-export function isWebStream(
-  input: UploadInput,
-): input is Pick<ReadableStreamDefaultReader, 'read'> {
-  return 'read' in input && typeof input.read === 'function'
-}

test/spec/test-web-stream.js

@@ -3,25 +3,20 @@ import { TestHttpStack, waitableFunction } from './helpers/utils.js'
 
 describe('tus', () => {
   describe('#Upload', () => {
-    describe('uploading data from a Web Stream reader', () => {
+    describe('uploading data from a Web Stream ReadableStream', () => {
       function makeReader(content, readSize = content.length) {
-        const reader = {
-          value: new TextEncoder().encode(content),
-          read() {
-            let value
-            let done = false
-            if (this.value.length > 0) {
-              value = this.value.subarray(0, readSize)
-              this.value = this.value.subarray(readSize)
+        let remainingData = new TextEncoder().encode(content)
+        return new ReadableStream({
+          pull(controller) {
+            if (remainingData.length > 0) {
+              const chunk = remainingData.subarray(0, readSize)
+              remainingData = remainingData.subarray(readSize)
+              controller.enqueue(chunk)
             } else {
-              done = true
+              controller.close()
             }
-            return Promise.resolve({ value, done })
           },
-          cancel: waitableFunction('cancel'),
-        }
-
-        return reader
+        })
       }
 
       async function assertReaderUpload({ readSize, chunkSize }) {