How to save MediaRecorder stream to OGG file in PHP? Including Metadata

Question

I am providing audio recording to my users within the browser, using Javascript:

navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => 
{
    stream = _stream;
    recorder = new MediaRecorder(stream);

    recorder.ondataavailable = e => 
    {
        // push data to chunks
        chunks.push(e.data);

        // recording has been stopped
        if(recorder.state == 'inactive') 
        {
            blob = new Blob(chunks, {type: media.type });
            blob_url = URL.createObjectURL(blob);
            
            $('.rec_result_audio').attr({
                'src': blob_url
            });
            
            // send data to server
            // append file to object to be sent
            var filedata = new FormData();
            filedata.append('recfile', blob, blob_url);

            // send by AJAX/POST
        }
    };
}

In PHP I get and store the stream like this:

if(!empty($_FILES)) 
{
    $filename = $_FILES['recfile']['name'];
    $file_locationtmp = $_FILES['recfile']['tmp_name'];
    $filetype = $_FILES['recfile']['type'];
    $filesize_bytes = $_FILES['recfile']['size'];
    
    // add file extension to string
    $_FILES['recfile']['name'] = $_FILES['recfile']['name'].'.ogg';

    // save to filesystem
}

Now the OGG file (webm with opus codec) is stored on the server. However, all the metadata is missing. And thus the playbar does not work. See here for more info: HTML5 Audio - Progressbar/Playbar is not working for OGG audio file / Issue with 206 Partial Content

Length is missing. Also the Bit rate, Channels and Audio sample rate.

Obviously the direct saving to the file system with PHP is not enough.

What is missing in the PHP code, so that the file is recognized as an OGG file later on?

Do I have to add metadata, and if so, how?

Related: https://stackoverflow.com/questions/63640361/how-to-add-duration-to-metadata-of-files-recorder-by-mediarecorder — chiliNUT, Apr 13 '21 at 05:29
Thank you for the hint. This Javascript library would add 21 KB to my main JS file. That's a lot. Is there any way of doing this directly with PHP serverside? — Avatar, Apr 13 '21 at 12:19
I just stumbled over https://github.com/JamesHeinrich/getID3 and will report back if this helps to solve the issue. — Avatar, Apr 13 '21 at 12:23
As it seems, writing metadata to this webm/audio format is not supported. https://github.com/JamesHeinrich/getID3/issues/307 — Avatar, Apr 15 '21 at 05:57

score 1 · Answer 1 · answered Apr 30 '21 at 22:32

1

I am probably missing something obvious, but - shouldn't you specify that you want the Javascript stream to be OGG/Vorbis?

recorder = new MediaRecorder(stream, { mimeType: "audio/ogg; codecs=vorbis" });

I might be mistaken, but the file you get:

Now the OGG file (webm with opus codec) is stored on the server. However, all the metadata is missing.

is not actually an OGG file -- it is a WEBM file. As such, giving it an .ogg extension instead of .webm, as you do, probably confuses the system, and that's why the file appears "unreadable and missing metadata".

answered Apr 30 '21 at 22:32

LSerni

55,617
10
65
107

In Chrome I get "Uncaught (in promise) DOMException: Failed to construct 'MediaRecorder': Failed to initialize native MediaRecorder the type provided (audio/ogg; codecs=vorbis) is not supported." – Avatar May 02 '21 at 09:03
Well, I am afraid that's your answer then. You need to download the stream in whatever format the browser supports, and then convert it in OGG format (unless you keep it as .webm. what happens if you use a .webm file extension?). – LSerni May 02 '21 at 09:13

score 0 · Answer 2 · answered Apr 13 '21 at 12:51

0

The easiest solution is to download an already compiled ffmpeg binary and point your script to it. On the FFmpeg Download page refer to the Get the packages section for links to recent static builds for Linux, Windows, and macOS.

You can use shell_exec() as shown in FFmpeg Wiki: PHP and provide the full path to the downloaded binary.

answered Apr 13 '21 at 12:51

javad shariaty

939
10
14

Could you add the necessary PHP code to your answer? I have never used ffmpeg before. – Avatar Apr 15 '21 at 05:58
1

ffmpeg -i input.mp4 -codec:v libtheora -qscale:v 3 -codec:a libvorbis \ -qscale:a 3 -f ogv output.ogv – javad shariaty Apr 15 '21 at 10:57
But I am trying to find a PHP solution that also works on servers that don't come with ffmpeg. – Avatar Apr 25 '21 at 14:18

Avatar · Answer 3 · 2021-10-18T04:09:01.477

For now I solved the problem only by using ffmpeg for converting the file serverside to oga format - but not directly in PHP.

Install ffmpeg on your server with sudo apt install ffmpeg
Use ffmpeg in your PHP script:

// physical path to uploaded file
$filelocationtmp = $_FILES['recfile']['tmp_name'];

// call ffmpeg script to convert file
shell_exec("ffmpeg -y -i ".$filelocationtmp." -c:a libvorbis -vn -b:a 48k ".$filelocationtmp.".oga");

// rename oga file to original file (overrides original)
shell_exec("mv ".$filelocationtmp.".oga ".$filelocationtmp);

Note: ffmpeg cannot read input file and write output file the same time. That's why the second command line is necessary.

⚠️ This is not a pure PHP solution. So the question is still open.

Martin Zeitler · Answer 4 · 2021-04-28T07:18:26.593

0

Another option would be to write with the ogg:// wrapper, which knows about the meta-data.
The PECL libvorbis package looks a little dated, but eventually it would still build for PHP 7.

edited Apr 28 '21 at 07:18

answered Apr 28 '21 at 07:12

Martin Zeitler

1
19
155
216

How to save MediaRecorder stream to OGG file in PHP? Including Metadata

4 Answers4

Linked