修复 MediaRecorder 视频

warning

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

使用 MediaRecorder 和 getUserMedia() API 录制视频时，会创建一个 WebM 文件，可能会存在一些播放和兼容性问题。

🌐 When recording a video with the MediaRecorder and getUserMedia() API, a WebM file gets created that may have some playback and compatibility issues.

也就是说，它：

🌐 Namely, it:

在浏览器中不显示视频时长
寻找起来可能很慢
并非在所有浏览器中播放（Safari）

要解决这些问题，你应该重新编码或重新复用该视频。

🌐 To fix these issues, you should either re-encode or re-mux the video.

重新编码 将解码并重新编码帧（如果你想使用不同的编解码器）。它会更慢，但可以使用更兼容的格式，如 MP4。
重新复用 会保留帧，但会拆解并重新组装文件，以便插入寻址点和时长元数据。它非常快速，但不允许改变编解码器。

为什么会这样？

🌐 Why does this happen?

原因是，在录制时，浏览器会打开一个文件并将视频片段追加到文件末尾。然而，像持续时间和查找点这样的重要元数据应该位于文件开头，这样它们才有用。

🌐 The reason is that while recording, browsers open a file and append video chunks to the end.
However, the important metadata such as duration and seeking points should be at the beginning of the file for them to be useful.

通过将元数据放在开头，视频播放器可以获取所需的信息来在视频中进行定位并显示时长。

🌐 By placing the metadata at the beginning, the video player has the information it needs to seek around the video and display the duration.

在服务器上重新编码

🌐 Re-encoding on the server

传统的方法是使用服务器并在其上运行 FFmpeg ：

🌐 The traditional way is to use a server and run FFmpeg on it:

ffmpeg -i input.webm -c:v libx264 -c:a aac output.mp4

或用于重新混流：

🌐 or for re-muxing:

ffmpeg -i input.webm -c copy output.webm

使用 `@remotion/webcodecs` 重新编码

🌐 Re-encoding using @remotion/webcodecs

你还可以使用新的实验性 @remotion/webcodecs 软件包在浏览器中重新编码视频。

🌐 You can also re-encode the video in the browser using the new and experimental @remotion/webcodecs package.

Re-encoding a video
import {convertMedia} from '@remotion/webcodecs';

// The video get from the MediaRecorder as a Blob
const blob = new Blob([], {type: 'video/webm'});

await convertMedia({
  src: blob,
  container: 'mp4',
  videoCodec: 'h264',
  audioCodec: 'aac',
});

💼 关于 @remotion/webcodecs 的重要许可免责声明

This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of @remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.

🚧 不稳定的 API

This package is experimental.
We might change the API at any time, until we remove this notice.

使用 `@remotion/webcodecs` 重新复用

🌐 Re-muxing using @remotion/webcodecs

你也可以不重新编码成 MP4，而是将视频重新混流到一个新的 WebM 文件：

🌐 Instead of re-encoding to an MP4, you can also re-mux the video to a new WebM file:

Re-muxing a video
import {convertMedia} from '@remotion/webcodecs';

// The video get from the MediaRecorder as a Blob
const blob = new Blob([], {type: 'video/webm'});

await convertMedia({
  src: blob,
  container: 'webm',
});

convertMedia() 将把元数据和寻求信息移动到视频的开头。

💼 关于 @remotion/webcodecs 的重要许可免责声明

This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.

🚧 不稳定的 API

This package is experimental.
We might change the API at any time, until we remove this notice.

示例应用

🌐 Sample application

使用 remotion.dev/convert 在线修复 MediaRecorder 视频，使用 WebCodecs。
查看源代码以参考如何实现它。

🌐 Use remotion.dev/convert to fix a MediaRecorder video online using WebCodecs.
See the source code for a reference on how to implement it.

另请参阅

🌐 See also

为什么会这样？​

在服务器上重新编码​

使用 @remotion/webcodecs 重新编码​

使用 @remotion/webcodecs 重新复用​

示例应用​

另请参阅​