我正在尝试以可以在移动 safari 上播放的格式在节点的后端将 .webm 转换为 .mp4。
这样做的原因是我们使用 getUserMedia() 和 getDisplayMedia 来记录用户的相机/屏幕,而 webm 不能在移动 ios safari 上播放。
在这个答案的第二部分之后 - https://stackoverflow.com/a/63463669
在前端 -
mediaStreamConstraints: {
video: { width: 1280, height: 720, frameRate: { min: 24, ideal: 30, max: 60 } },
audio: true,
...mediaStreamConstraints,
},
mediaRecorderOptions: {
videoBitsPerSecond: 4000000,
mimeType: 'video/webm;codecs=h264',
},
});
在后端
async uploadVideo(id: string, readableStream: stream.Readable, options: UploadBlobOptions) {
if (disableVideoEncoding) {
return this.uploadBlob(id, readableStream, options);
}
const buffer = await readableStreamToBuffer(readableStream);
const inputData = new Uint8Array(buffer);
const result = ffmpeg({
MEMFS: [{ name: 'input', data: inputData }],
print: () => {},
printErr: () => {},
arguments: [
...['-i', 'input'],
// Encode audio with AAC https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs#choosing_an_audio_codec
...['-c:a', 'aac'],
// Copy video
...['-c:v', 'copy'],
// Output
'output.mp4',
],
});
const out = result.MEMFS[0];
const outStream = new Duplex();
if (out) {
outStream.push(out.data);
outStream.push(null);
} else {
throw new Error('Could not find output file');
}
return this.uploadBlob(id, outStream, {
...options,
mimeType: 'video/mp4',
});
}
输出视频以 chrome 格式运行,格式为 .mp4,但仍无法在 safari 中播放。如果有人能解决我不胜感激!!
这是使用上述代码生成的视频:
这是我不久前上传的另一个视频,它在 safari 中工作: https ://tendon-user-files-public.s3.eu-west-1.amazonaws.com/tendon-production/bafybeihjwawyuvirf4ymwununm25skxvzedlsd33ztav3rbofekv7z6yzu.mp4