Web/API/Streams API

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.

Concepts and usage

Streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit. This is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.

But this has never been available to JavaScript before. Previously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received.

With Streams being available to JavaScript, this all changes — you can now start processing raw data with JavaScript bit by bit as soon as it is available on the client-side, without needing to generate a buffer, string, or blob.

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2018/02/27/15817/35e82321930bbb80a021c30f9818bee5/Concept.png]]

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 of the stream is being read at.

The basic usage of Streams hinges around making responses available as streams. For example, the response Body returned by a successful fetch request can be exposed as a ReadableStream, and you can then read it using a reader created with ReadableStream.getReader(), cancel it with ReadableStream.cancel(), etc.

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, and Using writable streams.

Stream interfaces

Readable 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.

Writable 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.

Related stream APIs and operations

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.

Extensions to other APIs

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 WindowOrWorkerGlobalScope.fetch() to commence fetching the stream.

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.

ByteStream-related interfaces

Important: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

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.

Examples

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:

• [[../../../../../../mdn.github.io/dom-examples/streams/simple-pump/index|Simple stream pump]]: This example shows how to consume a ReadableStream and pass its data to another.
• [[../../../../../../mdn.github.io/dom-examples/streams/grayscale-png/index|Grayscale a PNG]]: This example shows how a ReadableStream of a PNG can be turned into grayscale.
• [[../../../../../../mdn.github.io/dom-examples/streams/simple-random-stream/index|Simple random stream]]: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
• [[../../../../../../mdn.github.io/dom-examples/streams/simple-tee-example/index|Simple tee example]]: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
• [[../../../../../../mdn.github.io/dom-examples/streams/simple-writer/index|Simple writer]]: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
• [[../../../../../../mdn.github.io/dom-examples/streams/png-transform-stream/index|Unpack chunks of a PNG]]: This example shows how 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:

• Progress Indicators with Streams, Service Workers, & Fetch.

Specifications

Specification	Status	Comment
Streams	Living Standard	Initial definition.

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

ReadableStream

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
ReadableStream Experimental'	Chrome Full support 43	Edge Full support 14	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0
ReadableStream() constructor Experimental'	Chrome Full support 43	Edge Full support 79	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0
cancel Experimental'	Chrome Full support 43	Edge Full support 14	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0
getReader Experimental'	Chrome Full support 43	Edge Full support 14	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0
locked Experimental'	Chrome Full support 43	Edge Full support 14	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0
pipeThrough Experimental'	Chrome Full support 59	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 46	Safari Full support 10.1	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 43	Safari iOS Full support 10.3	Samsung Internet Android Full support 7.0
pipeTo Experimental'	Chrome Full support 59	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 46	Safari Full support 10.1	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 43	Safari iOS Full support 10.3	Samsung Internet Android Full support 7.0
tee Experimental'	Chrome Full support 43	Edge Full support 79	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0

Legend

Full support  

Full support

No support  

No support

Experimental. Expect behavior to change in the future.'

Experimental. Expect behavior to change in the future.

User must explicitly enable this feature.'

User must explicitly enable this feature.

WritableStream

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
WritableStream	Chrome Full support 59	Edge Full support 16	Firefox No support No	IE No support No	Opera Full support 47	Safari ?	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 44	Safari iOS ?	Samsung Internet Android Full support 7.0
WritableStream() constructor	Chrome Full support 59	Edge Full support 16	Firefox No support No	IE No support No	Opera Full support 47	Safari ?	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 44	Safari iOS ?	Samsung Internet Android Full support 7.0
abort	Chrome Full support 59	Edge Full support 16	Firefox No support No	IE No support No	Opera Full support 47	Safari ?	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 44	Safari iOS ?	Samsung Internet Android Full support 7.0
getWriter	Chrome Full support 59	Edge Full support 16	Firefox No support No	IE No support No	Opera Full support 47	Safari ?	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 44	Safari iOS ?	Samsung Internet Android Full support 7.0
locked	Chrome Full support 59	Edge Full support 16	Firefox No support No	IE No support No	Opera Full support 47	Safari ?	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android No support No	Opera Android Full support 44	Safari iOS ?	Samsung Internet Android Full support 7.0

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

See also

• Streams API concepts
• Using readable streams
• Using writable streams

Streams API by Mozilla Contributors is licensed under CC-BY-SA 2.5.