The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.
Note: This feature is available in Web Workers
The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.
Note: This feature is available in Web Workers
Streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit. Browsers already do this when receiving media assets — videos buffer and play as more of the content downloads, and sometimes you'll see images display gradually as more is loaded too.
But this capability has never been available to JavaScript before. Previously, if we wanted to process a resource of some kind (video, text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process all the data.
With the Streams API, you can start processing raw data with JavaScript bit by bit, as soon as it is available, without needing to generate a buffer, string, or blob.
There are more advantages too — you can detect when streams start or end, chain streams together, handle errors and cancel streams as required, and react to the speed at which the stream is being read.
The usage of Streams hinges on making responses available as streams. For example, the response body returned by a successful fetch request is a ReadableStream
that can be read by a reader created with ReadableStream.getReader()
.
More complicated uses involve creating your own stream using the ReadableStream()
constructor, for example to process data inside a service worker.
You can also write data to streams using WritableStream
.
Note: You can find a lot more details about the theory and practice of streams in our articles — Streams API concepts, Using readable streams, Using readable byte streams, and Using writable streams.
ReadableStream
Represents a readable stream of data. It can be used to handle response streams of the Fetch API, or developer-defined streams (e.g. a custom ReadableStream()
constructor).
ReadableStreamDefaultReader
Represents a default reader that can be used to read stream data supplied from a network (e.g. a fetch request).
ReadableStreamDefaultController
Represents a controller allowing control of a ReadableStream
's state and internal queue. Default controllers are for streams that are not byte streams.
WritableStream
Provides a standard abstraction for writing streaming data to a destination, known as a sink. This object comes with built-in backpressure and queuing.
WritableStreamDefaultWriter
Represents a default writable stream writer that can be used to write chunks of data to a writable stream.
WritableStreamDefaultController
Represents a controller allowing control of a WritableStream
's state. When constructing a WritableStream
, the underlying sink is given a corresponding WritableStreamDefaultController
instance to manipulate.
TransformStream
Represents an abstraction for a stream object that transforms data as it passes through a pipe chain of stream objects.
TransformStreamDefaultController
Provides methods to manipulate the ReadableStream
and WritableStream
associated with a transform stream.
ByteLengthQueuingStrategy
Provides a built-in byte length queuing strategy that can be used when constructing streams.
CountQueuingStrategy
Provides a built-in chunk counting queuing strategy that can be used when constructing streams.
Request
When a new Request
object is constructed, you can pass it a ReadableStream
in the body
property of its RequestInit
dictionary. This Request
could then be passed to a fetch()
to commence fetching the stream.
Response.body
The response body returned by a successful fetch request is exposed by default as a ReadableStream
, and can have a reader attached to it, etc.
ReadableStreamBYOBReader
Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom ReadableStream()
constructor).
ReadableByteStreamController
Represents a controller allowing control of a ReadableStream
's state and internal queue. Byte stream controllers are for byte streams.
ReadableStreamBYOBRequest
Represents a pull into request in a ReadableByteStreamController
.
We have created a directory of examples to go along with the Streams API documentation — see mdn/dom-examples/streams. The examples are as follows:
pipeThrough()
can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.Examples from other developers:
Specification |
---|
Streams Standard # rs-class |
Streams Standard # ws-class |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
WritableStream |
59 | 16 | 100 | No | 47 | 14.1 | 59 | 59 | 100 | 44 | 14.5 | 7.0 |
Streams_API |
59 | 16 | 100 | No | 47 | 14.1 | 59 | 59 | 100 | 44 | 14.5 | 7.0 |
abort |
59 | 16 | 100 | No | 47 | 14.1 | 59 | 59 | 100 | 44 | 14.5 | 7.0 |
close |
81 | 81 | 100 | No | 68 | 14.1 | 81 | 81 | 100 | 58 | 14.5 | 13.0 |
getWriter |
59 | 16 | 100 | No | 47 | 14.1 | 59 | 59 | 100 | 44 | 14.5 | 7.0 |
locked |
59 | 16 | 100 | No | 47 | 14.1 | 59 | 59 | 100 | 44 | 14.5 | 7.0 |
transferable |
87 | 87 | 103 | No | 73 | No | 87 | 87 | 103 | 62 | No | 14.0 |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
@@asyncIterator |
No | No | 110 | No | No | No | No | No | 110 | No | No | No |
ReadableStream |
52 | 79 | 65 | No | 39 | 10.1 | 52 | 52 | 65 | 41 | 10.3 | 6.0 |
Streams_API |
43 | 14 | 65 | No | 30 | 10.1 | 43 | 43 | 65 | 30 | 10.3 | 4.0 |
cancel |
43 | 14 | 65 | No | 30 | 10.1 | 43 | 43 | 65 | 30 | 10.3 | 4.0 |
from_static |
No | No | 117 | No | No | No | No | No | 117 | No | No | No |
getReader |
43 | 14 | 65 | No | 30 | 10.1 | 43 | 43 | 65 | 30 | 10.3 | 4.0 |
locked |
52 | 14 | 65 | No | 39 | 10.1 | 52 | 52 | 65 | 41 | 10.3 | 6.0 |
pipeThrough |
59 | 79 | 102 | No | 46 | 10.1 | 59 | 59 | 102 | 43 | 10.3 | 7.0 |
pipeTo |
59 | 79 | 100 | No | 46 | 10.1 | 59 | 59 | 100 | 43 | 10.3 | 7.0 |
tee |
52 | 79 | 65 | No | 39 | 10.1 | 52 | 52 | 65 | 41 | 10.3 | 6.0 |
transferable |
87 | 87 | 103 | No | 73 | No | 87 | 87 | 103 | 62 | No | 14.0 |
values |
No | No | 110 | No | No | No | No | No | 110 | No | No | No |
BCD tables only load in the browser
BCD tables only load in the browser
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Streams_API