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?
I cannot reproduce this, but also not sure if I fully understand the issue. The `file` tool looks at signatures within the file to determine its type, and if it says `application/octet-stream`, that just means that it couldn't determine the type. When I try to reproduce, I actually get "video/mp4" printed by the tool. - What versions of Safari and macOS are you using? - What does `which file` say? Perhaps you have a non-default version installed. - Could you please attach an affected file here, so that we could inspect its actual format?
(In reply to Alexey Proskuryakov from comment #1) > I cannot reproduce this, but also not sure if I fully understand the issue. > The `file` tool looks at signatures within the file to determine its type, > and if it says `application/octet-stream`, that just means that it couldn't > determine the type. > > When I try to reproduce, I actually get "video/mp4" printed by the tool. > > - What versions of Safari and macOS are you using? > > - What does `which file` say? Perhaps you have a non-default version > installed. > > - Could you please attach an affected file here, so that we could inspect > its actual format? Hi Alexey, thanks for following up. - I'm using macOS Monterey (12.6) with Safari (16.1). - /usr/bin/file - I attached one to the case. (which I got from the CodePen linked in the original question).
Created attachment 463758 [details] Example of exported file from Safari
`file` on macOS Ventura says "ISO Media, MP4 Base Media v5". QuickTime Player says that video format is "H.264", and audio is "MPEG-4 AAC, 44100 Hz". Looks like WebKit behaves correctly, and it's just that the older version of `file` doesn't recognize the format.