Stream selection
Some containers such as .m3u8
(and in the future .mpd
) support multiple equivalent streams, of which you are supposed to select one.
For example, a .m3u8
file might contain multiple video streams with different resolutions.
By default, the stream with the highest resolution is selected (sorted by width multiplied by height).
Selecting a stream
Use the selectM3uStream
option to select a stream.
tsx
import {parseMedia } from '@remotion/media-parser';constmedia = awaitparseMedia ({src : 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',selectM3uStream : ({streams }) => {for (conststream ofstreams ) {console .log (stream .resolution ); // {width: 1920, height: 1080}console .log (stream .bandwidth ); // 4400000console .log (stream .url ); // "https://test-streams.mux.dev/x36xhzz/193039199_mp4_h264_aac_hd_7.m3u8"console .log (stream .averageBandwidth ); // nullconsole .log (stream .codecs ); // ["avc1.640028", "mp4a.40.2"]console .log (stream .associatedPlaylists ); // See below}returnstreams [0].id ;},});
Show a stream selection interface
If you want an end user to pick the quality, it is recommended that you use two passes.
You can extract the streams in the first pass and then show a UI to the user to pick the quality.
tsx
import {parseMedia } from '@remotion/media-parser';const {m3uStreams } = awaitparseMedia ({src : 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',fields : {m3uStreams : true,},});
Resorting to default behavior
If you want to resort to the default behavior (selecting the stream with the highest resolution), use the defaultSelectM3uStreamFn
function.
tsx
import {parseMedia ,defaultSelectM3uStreamFn } from '@remotion/media-parser';constmedia = awaitparseMedia ({src : 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',selectM3uStream : (params ) => {// Add custom logic// ...// Resort to default behaviorreturndefaultSelectM3uStreamFn (params );},});
Selecting an audio track
Once a primary stream has been selected, another callback may get invoked allowing you to pick an audio stream.
tsx
import {parseMedia } from '@remotion/media-parser';constmedia = awaitparseMedia ({src : 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',selectM3uAssociatedPlaylists : ({associatedPlaylists }) => {returnassociatedPlaylists .filter ((playlist ) => {// Information relayed from the .m3u8:console .log (playlist .groupId ); // stringconsole .log (playlist .language ); // string | nullconsole .log (playlist .name ); // string | nullconsole .log (playlist .autoselect ); // booleanconsole .log (playlist .default ); // booleanconsole .log (playlist .channels ); // number | nullconsole .log (playlist .url ); // stringreturnplaylist .default ;});},});
The default behavior is to select the single associated playlist if there is only one, and otherwise select all associated playlists with the default: true
attribute. The behavior is implemented by the filter function defaultSelectM3uAssociatedPlaylists
.
tsx
import {parseMedia ,defaultSelectM3uAssociatedPlaylists } from '@remotion/media-parser';constmedia = awaitparseMedia ({src : 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',selectM3uAssociatedPlaylists :defaultSelectM3uAssociatedPlaylists ,});
Each M3uStream
has a field stream.associatedPlaylists
listing the associated audio tracks, which is useful for showing a UI for selecting the audio track.