Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. Web APIs
  3. ReadableStream
  4. pipeThrough()

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.

Syntax

js
pipeThrough(transformStream)pipeThrough(transformStream, options)

Parameters

transformStream

ATransformStream (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 thewritable stream can be read in some transformed state by thereadable stream.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.

optionsOptional

The options that should be used when piping to thewritable stream.Available options are:

preventClose

If this is set totrue, closing the sourceReadableStream will no longer cause the destinationWritableStream to be closed.

preventAbort

If this is set totrue, errors in the sourceReadableStream will no longer abort the destinationWritableStream.

preventCancel

If this is set totrue, errors in the destinationWritableStream will no longer cancel the sourceReadableStream.

signal

If set to anAbortSignal object, ongoing pipe operations can then be aborted via the correspondingAbortController.

Return value

Thereadable side of thetransformStream.

Exceptions

TypeError

Thrown if thewritable and/orreadable property oftransformStream are 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.

js
// 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

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp