在 Safari 中下载 mp4 而不是 application/octet-stream答案

【问题标题】：Download mp4 instead of application/octet-stream in Safari在 Safari 中下载 mp4 而不是 application/octet-stream
【发布时间】：2023-02-03 06:37:04
【问题描述】：

我正在尝试使用 MediaRecorder API 在 Safari 上录制视频并将视频下载为 .mp4 文件。尽管如此，即使我指定了媒体类型 (video/mp4)，下载的文件也有 application/octet-stream。我怎样才能下载正确媒体类型的文件呢？

下载视频后，我会像这样检查媒体类型：

file --mime-type video.mp4

我期望结果是video/mp4，但我得到的是application/octet-stream。

See CodePen example（需要在Safari上打开）

这里也有CodePen中的代码供参考：

<html>
   <body>
      <button onclick="startRecording()">start</button><br>
      <button onclick="endRecording()">end</button>
      <video id="video" autoplay playsInline muted></video>
      <script>
         let blobs = [];
         let stream;
         let mediaRecorder;
         let videoMimeType = "video/mp4";
         async function startRecording()
         {
             stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
             mediaRecorder = new MediaRecorder(stream, {
               mimeType: videoMimeType,
             });
             mediaRecorder.ondataavailable = (event) => {
                // Let's append blobs for now, we could also upload them to the network.
                if (event.data)
                     blobs.push(event.data);
             }
             mediaRecorder.onstop = doPreview;
             // Let's receive 1 second blobs
             mediaRecorder.start(1000);
         }
         function endRecording()
         {
             // Let's stop capture and recording
             mediaRecorder.stop();
             stream.getTracks().forEach(track => track.stop());
         }
         function doPreview()
         {
             if (!blobs.length)
                 return;
             // Let's concatenate blobs to preview the recorded content
         
         const blob = new Blob(blobs, { type: mediaRecorder.mimeType })
                     console.log(blob.type); console.log(mediaRecorder.mimeType);
                     const a = document.createElement('a');
                     document.body.appendChild(a);
                     const url = window.URL.createObjectURL(blob);
                     a.href = url;
                     a.download = "video";
                     a.click();
                     setTimeout(() => {
                       document.body.removeChild(a);
                     }, 0);
         
         
             video.src = url;
         }
      </script>
   </body>
</html>

CodePen 基本上就是same example from WebKit。

有任何想法吗？

【问题讨论】：

尝试做 a.type = 'video/mp4' 。但这仅用于帮助构建浏览器的另存为框建议的文件名。下载的视频能正常播放吗？如果是这样，file 实用程序可能无法正确检测到 mp4 文件。

标签： javascript safari mp4 web-mediarecorder

【解决方案1】：

我对使用 Safari 从 blob 创建的 mp4 文件有同样的问题。

如果检查它们的 mime 类型，它们将被读取为 application/octet-stream; charset=binary（但是另一个检查过的 mp4 文件具有几乎相同的编解码器详细信息 – avc/aac 但编解码器 ID mp42 而不是 iso5 – 正确显示为 video/mp4; charset=binary）。

现在的问题不是，文件本身在下载后无法在 Safari 或外部播放，但将其检测为 video/mp4 以便通过 formData.append 和 POST 将其用于目的地，因为 mimetype 是错误的。

将 const blob = new Blob(chunks, { type: mediaRecorder.mimeType }); 动态设置或静态设置为 video/mp4 没有任何区别，通过 const file = new File([blob], "name", { type: window.mediaRecorder.mimeType }); 或 const file = new File([blob], "name", { type: blob.type }); 帮助从 blob 创建文件也没有任何区别。

【讨论】：