Record Plugin : MimeType MP4 (All browsers)

[visualight]

Hello,

I use the record te plugin and I notice that on Chrome the blob generated is audio/webm and on safari the blog is audio/mp4.

Audio/mp4 seems to pass on all browsers.

How can I force Audio/Mp4 or another MimeType into the record plugin?

The code below systematically returns an error (mime does not exist)

this.record = this.wavesurfer.registerPlugin(this.$recordPlugin.create({
        mimeType: 'audio/mp4'
      }));

Is there, otherwise, an all-purpose mime (on all browsers) that doesn't require a special encoding tool?

Thanks

[katspaugh]

I guess we should move mp4 to the beginning of this list: https://github.com/katspaugh/wavesurfer.js/pull/2892/files#diff-fa9340af669d868ea6c73e1f704f43158f57401114951faf6455512ac81a524bR19

[visualight]

Hello, unfortunately this doesn't work.

Google Chrome only uses the webm format. So I had to set up an audio transcoding microservice to encode the streams in MP4 (Safari obviously only reads this format).

For those interested, here's the server-side transcoding code:

sudo apt-get install ffmpeg

<?php

namespace App\Http\Controllers\Backoffice;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use Symfony\Component\HttpFoundation\Response;

class AudioController extends Controller
{
    /**
     * Encode the audio blob to mp4 format and upload it to S3.
     *
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function encodeAudio(Request $request)
    {
        $this->validate($request, [
            'audio_blob' => 'required|file'
        ]);

        $audioBlob = $request->file('audio_blob');

        $mp4Audio = $this->convertToMp4($audioBlob);

        if (!$mp4Audio) {
            return response()->json(['error' => 'Audio conversion failed'], Response::HTTP_BAD_REQUEST);
        }

        $s3Path = $this->uploadToS3($mp4Audio);

        return response()->json(['s3_path' => $s3Path], Response::HTTP_OK);
    }

    /**
     * Convert the audio blob to mp4 format using FFmpeg.
     *
     * @param string $audioBlob
     * @return string|bool Returns the mp4 audio as a string or false on failure.
     */
    private function convertToMp4($audioBlob)
    {
        $outputFilePath = storage_path('app/' . Str::random(40) . '.mp4');

        $ffmpegCommand = "ffmpeg -i {$audioBlob->getRealPath()} -c:v libx264 -c:a aac -strict -2 {$outputFilePath} 2>&1";
        exec($ffmpegCommand, $output, $returnCode);

        if ($returnCode === 0) {
            $mp4Audio = file_get_contents($outputFilePath);
            unlink($outputFilePath);
            return $mp4Audio;
        }

        return false;
    }


    /**
     * Upload the m4a audio to S3.
     *
     * @param string $mp4Audio
     * @return string|bool Returns the S3 URL of the uploaded m4a audio or false on failure.
     */
    private function uploadToS3($mp4Audio)
    {
        // Initialize the AWS S3 client with your credentials and region
        $s3 = new \Aws\S3\S3Client([
            'version' => 'latest',
            'region' => 'xxx',
            'credentials' => [
                'key' => 'xxx',
                'secret' => 'xxx',
            ],
        ]);

        // Generate a unique filename for the mp4 audio
        $filename = 'audio/' . Str::random(40) . '.mp4';

        // Upload the mp4 audio to your S3 bucket
        $bucketName = 'myBucket';
        $result = $s3->putObject([
            'Bucket' => $bucketName,
            'Key' => $filename,
            'Body' => $mp4Audio,
            'ACL' => 'public-read',
            'ContentType' => 'audio/mp4',
        ]);

        if ($result['@metadata']['statusCode'] === 200) {
            $s3Url = "https://{$bucketName}.s3.amazonaws.com/{$filename}";
            return $s3Url;
        }

        return false;
    }
}