How to create a conversion to transform videos to WebM?

[AlejandroAkbal]

Hi, I'm trying to optimize all videos that are added to my Post Model.
I try to accomplish this goal by converting videos to WebM format.

This is my Post Model:

class Post extends Model implements HasMedia
{
    use InteractsWithMedia;

    public bool $registerMediaConversionsUsingModelInstance = true;

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('default')
            ->singleFile()
            ->acceptsFile(function (File $file): bool {
                return
                    Str::startsWith($file->mimeType, 'image/')
                    ||
                    Str::startsWith($file->mimeType, 'video/');
            });
    }

    /**
     * @throws InvalidManipulation
     */
    public function registerMediaConversions(\Spatie\MediaLibrary\MediaCollections\Models\Media $media = null): void
    {
        if (!$media) {
            return;
        }

        switch ($media->type === 'video') {

            case true:
                $this->addMediaConversion('default')
                    ->extractVideoFrameAtSecond(1)
                    ->quality(90)
                    ->withResponsiveImages();
                break;

            case false:
                $this->addMediaConversion('default')
                    ->quality(90)
                    ->format('webp')
                    ->withResponsiveImages();
                break;
        }
    }
}

I currently transform the videos by listening to the MediaHasBeenAdded event

class EventServiceProvider extends ServiceProvider
{
    protected $listen = [
        MediaHasBeenAdded::class => [
            ProcessVideoFromMedia::class,
        ],
}

And then running some chained jobs.
In that ProcessVideoFromMedia class I replace the current Post Media with a WebM version by adding it again to the Media collection
E.g.

        $media->model
            ->addMedia($webmMediaPath)
            ->toMediaCollection();

While this works, I'm creating two Models in the database and wasting some CDN data and queries by uploading the content twice.

What I would like to do is create a Media Manipulation/Conversion that transforms any video to WebM.

Ideally like this:

public function registerMediaConversions(\Spatie\MediaLibrary\MediaCollections\Models\Media $media = null): void
    {
        $this->addMediaConversion('default')
                    ->format('webm') // Important bit
                    ->optimize();
    }
    

I've seen some solutions like #1279 and #1277, but I cannot get them to work.

Can someone help me?

[AlejandroAkbal]

@nicolasbeauvais @sp4r74cus @Nks @freekmurze

Sorry for tagging all of you, but I think you are the most knowledgeable in this area 🙇

[AlejandroAkbal]

@PaolaRuby you might also know how to deal with this.
I appreciate all help I can get.

[AlejandroAkbal]

I still need help, would be willing to pay for it 😅

[sp4r74cus]

Hi @AlejandroAkbal ,
I ended up using an external service for that (transload.it)
listening to MediaHasBeenAdded event i get the instance of the Media object and send it to transloadit for conversion, and uploading it to S3 compatible storage (original upload is done to the same storage, so i get the path and use it for the new conversion upload)

this sample is used for converting to hls/dash, but you can of course use it for any type of conversion.

use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Spatie\MediaLibrary\MediaCollections\Events\MediaHasBeenAdded;
use transloadit\Transloadit;

class MediaVideoConverterListener implements ShouldQueue
{

	use InteractsWithQueue;
	use SerializesModels;

	private ?Transloadit $transloadit = null;

	/**
	 * Create the event listener.
	 *
	 */
	public function __construct()
	{
		$this->transloadit = new Transloadit([
				'key'    => config('transloadit.key'),
				'secret' => config('transloadit.secret'),
			]);
	}

	/**
	 * Handle the event.
	 *
	 * @return void
	 */
	public function handle(MediaHasBeenAdded $event)
	{

		$this->transloadit->createAssembly([
			'params' => [
				"steps" => [
					"import"           => [
						"robot"       => "/digitalocean/import",
						"credentials" => "CREDENTIALS_NAME",
						"path"        => $event->media->getPath(),
					],
					"hls_low"          => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "hls-480p",
					],
					"hls_mid"          => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "hls-720p",
					],
					"hls_high"         => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "hls-1080p",
					],
					"video_hls"        => [
						"use"           => [
							"steps"        => [
								"hls_low",
								"hls_mid",
								"hls_high",
							],
							"bundle_steps" => true,
						],
						"robot"         => "/video/adaptive",
						"ffmpeg_stack"  => "v4.3.1",
						"playlist_name" => $event->media->name.".m3u8",
						"technique"     => "hls",
					],
					"dash_480p_video"  => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "dash-480p-video",
					],
					"dash_720p_video"  => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "dash-720p-video",
					],
					"dash_1080p_video" => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "dash-1080p-video",
					],
					"dash_32k_audio"   => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "dash-32k_audio",
					],
					"dash_64k_audio"   => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "dash-64k_audio",
					],
					"dash_128k_audio"  => [
						"use"          => "import",
						"robot"        => "/video/encode",
						"ffmpeg_stack" => "v4.3.1",
						"preset"       => "dash-128k_audio",
					],
					"video_dash"       => [
						"use"           => [
							"steps"        => [
								"dash_480p_video",
								"dash_720p_video",
								"dash_1080p_video",
								"dash_32k_audio",
								"dash_64k_audio",
								"dash_128k_audio",
							],
							"bundle_steps" => true,
						],
						"robot"         => "/video/adaptive",
						"ffmpeg_stack"  => "v4.3.1",
						"playlist_name" => $event->media->name.".mpd",
						"technique"     => "dash",
					],
					"export"           => [
						"use"         => [
							"video_hls",
							"video_dash",
						],
						"robot"       => "/digitalocean/store",
						"credentials" => "CREDENTIALS_NAME",
						"path"        => pathinfo($event->media->getPath(),
								PATHINFO_DIRNAME).'/transcode/${file.meta.relative_path}/${file.url_name}',
					],
				],
			],
		]);
	}

[AlejandroAkbal]

Thanks @sp4r74cus, that's really helpful!

[AlejandroAkbal]

Still in need of help...