ReadableStream: pipeThrough() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2022.
Note: This feature is available inWeb Workers.
ThepipeThrough() method of theReadableStream 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.
In this article
Syntax
pipeThrough(transformStream)pipeThrough(transformStream, options)Parameters
transformStreamA
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 written to thewritablestream can be read in some transformed state by thereadablestream.For example, aTextDecoder, 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.optionsOptionalThe options that should be used when piping to the
writablestream.Available options are:preventCloseIf this is set to
true, closing the sourceReadableStreamwill no longer cause the destinationWritableStreamto be closed.preventAbortIf this is set to
true, errors in the sourceReadableStreamwill no longer abort the destinationWritableStream.preventCancelIf this is set to
true, errors in the destinationWritableStreamwill no longer cancel the sourceReadableStream.signalIf set to an
AbortSignalobject, ongoing pipe operations can then be aborted via the correspondingAbortController.
Return value
Thereadable side of thetransformStream.
Exceptions
TypeErrorThrown if the
writableand/orreadableproperty oftransformStreamare undefined.
Examples
In the following example (seeUnpack chunks of a PNG for the full code running live, andpng-transform-stream for the source code), an image is fetched and its body retrieved as aReadableStream.
Next, we log the contents of the readable stream, usepipeThrough() 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 imagefetch("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 |
|---|
| Streams> # ref-for-rs-pipe-through②> |
Browser compatibility
See also
ReadableStream()constructor- Pipe chains