Safari 录制的 Angular 8 中的视频加速问题

Posted 2023-02-19

【中文标题】Safari 录制的 Angular 8 中的视频加速问题

【英文标题】：safari recorded video speed up issue in angular 8

【发布时间】：2021-11-16 14:25:48

【问题描述】：

我已经在我的 Angular 项目中实现了 WebRTC 来录制视频。保存后我们可以将其发送到附件。这在 Windows 操作系统中正常工作，但在 mac safari 中，视频加速，30 秒视频仅变为 3 秒。这只发生在 safari 中。

这里开始视频。

  mediaDevices.getUserMedia( video: true, audio: true )
  .then(webcamStream => 
    this.webcamStream = webcamStream;
  )

MediaRecorder 代码：

this.recorder = new MediaRecorder(this.webcamStream, mimeType: 'video/mp4');
this.recorder.onstart = () => 
    this.zone.run(() => 
      this.behaviorService.isRecording(true); 
    );
this.recorder.onstop = this.onRecorderStopped;
this.recorder.ondataavailable = (event) => 
    this.zone.run(() =>  
      this.data = [...this.data, event.data]; 
  ); 
this.recorder.start();

当视频停止时，它会保存在 video/webm;codecs=h264 这个 mimeType 中。 我也试过 video/mp4 但它也不起作用

我可以得到任何适用于这两种操作系统的解决方案吗？

【问题讨论】：

您的 ondataavailable() 处理程序应该执行 this.data.push(event.data) 而不是您所拥有的。而且，当你去保存数据时，你如何处理数据。请edit您的问题。当您在评论中发布代码时，它很难阅读。

【参考方案1】：

Safari 因.getUserMedia() 和 MediaRecorder 类而臭名昭著。

我可以得到在这两种操作系统中都可以使用的任何解决方案吗？

还没有。纠缠苹果。同时在 MacOS 上使用 Chrome：它可以工作。

可能有一些技巧可以推荐以使其变得更好。但是您没有向我们展示您的 MediaRecorder 代码：这是压缩流的地方。

【讨论】：

在 MediaRecorder 中，我使用了以下代码，this.recorder = new MediaRecorder(this.webcamStream, mimeType: 'video/mp4'); this.recorder.onstart = () => this.zone.run(() => this.behaviorService.isRecording(true); ); this.recorder.onstop = this.onRecorderStopped; this.recorder.ondataavailable = (event) => this.zone.run(() => this.data = [...this.data, event.data]; ); this.recorder.start();