Angular应用WebM视频无法在Safari预览，寻求跨浏览器通用格式方案

前端录制优先采用MP4格式 #

直接让Chrome/Edge和Safari统一录制MP4（H.264视频编码+AAC音频编码），从源头避免格式兼容问题：

1. 在Angular中录制前，先检测浏览器是否支持MP4格式的MediaRecorder：

const mp4MimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const isMp4Supported = MediaRecorder.isTypeSupported(mp4MimeType);

if (isMp4Supported) {
  // 使用MP4格式初始化MediaRecorder
  this.mediaRecorder = new MediaRecorder(stream, { mimeType: mp4MimeType });
} else {
  // 降级使用WebM（仅作为兜底）
  this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
}

• 这个MIME类型参数对应标准H.264 baseline级别编码，几乎所有现代主流浏览器（Chrome 60+、Edge、Safari 14.1+）都支持。

后端转码兜底处理 #

如果遇到部分旧浏览器不支持MP4录制、生成了WebM文件，通过.NET Core API配合转码工具统一转换成MP4：

方案1：使用Azure Media Services转码 #

1. 当WebM文件上传到Azure Blob Storage后，触发Azure Media Services的转码作业，指定输出格式为H.264 + AAC的MP4。
2. 转码完成后，将生成的MP4文件替换原WebM文件（或存储为新文件），前端预览时优先调用MP4版本。

方案2：在.NET Core中集成FFmpeg转码 #

1. 引入FFmpeg.NET库（或直接调用FFmpeg命令行），在API接收WebM文件后立即转码：

using FFmpeg.NET;
using FFmpeg.NET.Enums;

public async Task ConvertWebmToMp4(string inputFilePath, string outputFilePath)
{
    var ffmpeg = new Engine(@"path/to/ffmpeg.exe"); // 部署时需确保FFmpeg可执行文件存在
    var input = new MediaFile(inputFilePath);
    var output = new MediaFile(outputFilePath);
    
    var conversionOptions = new ConversionOptions
    {
        VideoCodec = VideoCodec.H264,
        AudioCodec = AudioCodec.Aac,
        Preset = Preset.Fast // 根据需求调整速度/质量平衡
    };
    
    await ffmpeg.ConvertAsync(input, output, conversionOptions);
}

2. 转码完成后将MP4文件上传到Azure Blob Storage，返回该文件的访问地址给前端预览。

预览层统一使用MP4 #

无论前端录制的是MP4还是WebM，后端最终存储的都是兼容所有浏览器的MP4文件，前端<video>标签直接引用MP4地址即可：

<video controls>
  <source [src]="videoUrl" type="video/mp4">
</video>

内容的提问来源于stack exchange，提问作者Mukesh Arora