[Webkit-unassigned] [Bug 248242] New: Download mp4 instead of application/octet-stream in Safari

Tue Nov 22 11:38:57 PST 2022

https://bugs.webkit.org/show_bug.cgi?id=248242

            Bug ID: 248242
           Summary: Download mp4 instead of application/octet-stream in
                    Safari
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Media
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: six.aps at gmail.com

I'm trying to record a video on Safari using MediaRecorder API and download the video as a .mp4 file. Nevertheless even tho' I specify the media type (`video/mp4`), the file downloaded has `application/octet-stream`. How can I download the file with the correct media type instead?

Once I download the video, I check the mediatype like this:

`file --mime-type video.mp4`

I'm expecting that result to be `video/mp4` but I get `application/octet-stream`.

[See CodePen example](https://codepen.io/eliannyl/pen/GRGQdzv) (need to open on Safari)

Here's the code in CodePen for reference too:

```
<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>
```

The CodePen it's basically the [same example from WebKit](https://webkit.org/blog/11353/mediarecorder-api/). 

Any ideas?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221122/d48cabb8/attachment-0001.htm>