轨道变换

warning

我们正在逐步淘汰 Remotion WebCodecs，并转向 Mediabunny！

在转换媒体时，每个音频或视频轨道可以进行多种操作：

🌐 When transforming media, there are multiple thing that can be done for each audio or video track:

• 在不重新编码的情况下复制音轨
• 将音轨重新编码为不同的编解码器
• 移除轨道

[@remotion/webcodecs](/docs/webcodecs) 允许你为每一首曲目决定如何处理它。

使用默认设置

🌐 Using the defaults

最少的配置是仅指定一个 src 和一个输出 container。

🌐 The minimum amount of configuration is to only specify a src and an output container.

Using the default codecs
import {convertMedia} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
});

默认编解码器由 getDefaultAudioCodec() 和 getDefaultVideoCodec() 定义。

🌐 The default codecs are defined by getDefaultAudioCodec() and getDefaultVideoCodec().

选择编解码器

🌐 Choosing codecs

你可以使用 videoCodec 和 audioCodec 选项将所有音轨转换为你指定的编码格式。

🌐 You can use the videoCodec and audioCodec options to transform all tracks to the codecs you specify.

Choosing video and audio codecs
import {convertMedia} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  videoCodec: 'vp8',
  audioCodec: 'opus',
});

单独处理每一条轨道

🌐 Handle each track individually

使用 onVideoTrack 和 onAudioTrack 回调，你可以为每个轨道决定如何处理它。

🌐 With the onVideoTrack and onAudioTrack callbacks, you can decide for each track what to do with it.

Using the onVideoTrack() API
import {convertMedia} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  audioCodec: 'opus',
  onVideoTrack: ({track}) => {
    if (track.codecEnum === 'vp8') {
      return {type: 'copy'};
    }

    return {type: 'reencode', videoCodec: 'vp8'};
  },
});

onVideoTrack 和 onAudioTrack 的优先级高于 videoCodec 和 audioCodec。

视频编解码器的选项有：

🌐 The options for video codecs are:

• {"type": "copy"} - 在不重新编码的情况下复制音轨
• {"type": "reencode", "videoCodec": ConvertMediaVideoCodec} - 将音轨重新编码为指定的编解码器
• {"type": "drop"} - 从输出中移除曲目
• {"type": "fail"} - 失败并停止转换过程

音频编解码器的选项有：

🌐 The options for audio codecs are:

• {"type": "copy"} - 在不重新编码的情况下复制音轨
• {"type": "reencode", "audioCodec": ConvertMediaAudioCodec; bitrate: number; sampleRate: number | null;} - 将曲目重新编码为指定的编解码器。建议使用的比特率是 128000。采样率可以为 null，使用原始曲目的采样率。
• {"type": "drop"} - 从输出中移除曲目
• {"type": "fail"} - 失败并停止转换过程

枚举 ConvertMediaVideoCodec 和 ConvertMediaAudioCodec 可以从 @remotion/webcodecs 导入。

🌐 The enums ConvertMediaVideoCodec and ConvertMediaAudioCodec can be imported from @remotion/webcodecs.

正在检查曲目是否可以复制

🌐 Checking if a track can be copied

要检查是否可以返回 {"type": "copy"}，你可以使用从 onVideoTrack 获取的 canCopyTrack 属性。

🌐 To check if it is possible to return {"type": "copy"}, you can use canCopyTrack property you get from onVideoTrack.

Using the canCopyVideoTrack() API
import {convertMedia} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  audioCodec: 'opus',
  onVideoTrack: ({track, inputContainer, outputContainer, canCopyTrack}) => {
    if (canCopyTrack) {
      return {type: 'copy'};
    }

    return {type: 'reencode', videoCodec: 'vp8'};
  },
});

要在 onVideoTrack 处理程序之外进行检查，你也可以使用 canCopyVideoTrack() 和 canCopyAudioTrack() API

🌐 To check outside of a onVideoTrack handler, you can also use the the canCopyVideoTrack() and canCopyAudioTrack() APIs

正在检查曲目是否可以重新编码

🌐 Checking if a track can be re-encoded

要检查是否可以返回 {"type": "reencode"}，你可以使用 canReencodeVideoTrack() 和 canReencodeAudioTrack() API。

🌐 To check if it is possible to return {"type": "reencode"}, you can use the canReencodeVideoTrack() and canReencodeAudioTrack() APIs.

Using the canReencodeVideoTrack() API
import {convertMedia, canReencodeVideoTrack} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  audioCodec: 'opus',
  onVideoTrack: async ({track}) => {
    const canReencode = await canReencodeVideoTrack({
      videoCodec: 'vp8',
      track,
      resizeOperation: null,
      rotate: 0,
    });

    if (canReencode) {
      return {type: 'reencode', videoCodec: 'vp8'};
    }

    return {type: 'drop'};
  },
});

异步确定动作

🌐 Asynchronously determining action

onAudioTrack 和 onVideoTrack 回调可以是异步的。 在操作尚未完成时，输入填充的读取会被暂停。

🌐 The onAudioTrack and onVideoTrack callbacks can be asynchronous.
While the operations are unresolved, reading of the input fill is paused.

提前决定行为

🌐 Decide behavior upfront

如果你想在转换开始前显示一个让用户选择编解码器设置的界面，你可以这样做。

🌐 If you want to display a UI letting the user choose codec settings before the conversion starts, you can do so.

使用 parseMedia() 分别获取视频和音频轨道：

🌐 Use parseMedia() to get video and audio tracks respectively:

Using parseMedia() to get tracks upfront.
import {parseMedia} from '@remotion/media-parser';

const {tracks} = await parseMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  fields: {
    tracks: true,
  },
});

你现在有一个包含 VideoTrack 和 AudioTrack 对象的两个数组的对象。

🌐 You now have an object of two arrays of VideoTrack and AudioTrack objects.

你现在可以使用 canReencodeAudioTrack()、canReencodeVideoTrack()、canCopyAudioTrack() 和 canCopyVideoTrack() 来确定显示哪些选项。

🌐 You can now use canReencodeAudioTrack(), canReencodeVideoTrack(), canCopyAudioTrack(), and canCopyVideoTrack() to determine which options to show.

使用 onVideoTrack 和 onAudioTrack 回调来返回用户选择。
你可以使用 trackId 字段作为每个曲目的唯一键。

🌐 Use the onVideoTrack and onAudioTrack callbacks to return the user selection.
You can use the trackId field as the unique key for each track.

回退到默认

🌐 Falling back to default

[onVideoTrack](/docs/webcodecs/convert-media#onvideotrack) 和 onAudioTrack 的默认值分别是函数 [defaultOnVideoTrackHandler](/docs/webcodecs/default-on-video-track-handler) 和 defaultOnAudioTrackHandler 。

🌐 The default values for onVideoTrack and onAudioTrack are the functions defaultOnVideoTrackHandler and defaultOnAudioTrackHandler respectively.

如果你只想覆盖部分逻辑，你可以在逻辑的末尾返回默认的解析器函数。

🌐 If you only want to override part of the logic, you can return the default resolver functions at the end of your logic.

Falling back to the default behavior
import {convertMedia, defaultOnAudioTrackHandler} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  onAudioTrack: (params) => {
    // Custom logic for handling video tracks
    // ...

    // Fall back to the default behavior
    return defaultOnAudioTrackHandler(params);
  },
});

调试

🌐 Debugging

将 logLevel: "verbose" 传递给 convertMedia() 以在控制台中查看调试信息，包括默认值如何决定采取哪些操作。

🌐 Pass logLevel: "verbose" to convertMedia() to see debug information in the console, including how the defaults have decided which operations to take.

参考实现

🌐 Reference implementation

访问 source code 查看 convert.remotion.dev 的参考实现，这是一个在线视频转换器，显示所有可能选项的用户界面。

🌐 Visit the source code for convert.remotion.dev to see a reference implementation for an online video converter that displays a user interface for all possible options.

另请参阅

🌐 See also

• @remotion/webcodecs
• convertMedia()