ReadableStream.pipeThrough()

Draft
This page is not complete.

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

The pipeThrough() method of the ReadableStream interface provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.

Piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it.

Syntax

ReadableStream readableStreamInstance.pipeThrough(transformStream[, options]);

Parameters

transformStream
A TransformStream (or an object with the structure {writable, readable}) consisting of a readable stream and a writable stream working together to transform some data from one form to another. Data writen to the writable stream can be read in some transformed state by the readable stream. For example, a TextDecoder, has bytes written to it and strings read from it, while a video decoder has encoded bytes written to it and uncompressed video frames read from it.
options Optional
The options that should be used when piping to the writable stream. It will be used in a call like pipeTo(writable, options).

Return value

The readable side of the transformStream.

Exceptions

TypeError
The writable and/or readable property of transformStream are undefined.

Examples

In the following example (see Unpack chunks of a PNG for the full code running live, and png-transform-stream for the source code), an image is fetched and its body retrieved as a ReadableStream. Next, we log the contents of the readable stream, use pipeThrough() to send it to a new function that creates a gray-scaled version of the stream, then log the new stream's contents too.

// Fetch the original image
fetch('png-logo.png')
// Retrieve its body as ReadableStream
.then(response => response.body)
.then(rs => logReadableStream('Fetch Response Stream', rs))
// Create a gray-scaled PNG stream out of the original
.then(body => body.pipeThrough(new PNGTransformStream()))
.then(rs => logReadableStream('PNG Chunk Stream', rs))

Specifications

Specification Status Comment
Streams
The definition of 'pipeThrough()' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 59Edge ? Firefox Full support 57
Disabled
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 NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android Full support 57
Disabled
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 46Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

Document Tags and Contributors

Contributors to this page: BudgieInWA, fscholz, chrisdavidmills
Last updated by: BudgieInWA,