MP4 / MPEG recordings?

[bagwaa]

Description

WebM is wonderful, but it doesn't work on all browsers and/or devices at the moment, is there any way to have videojs-record record in anything other than WebM? I have seen the mime type settings but I still get WebM when trying that? :(

[thijstriemstra]

@bagwaa can you use ffmpeg's ffprobe tool on the resulting file and report the output?

[thijstriemstra]

And also post the usual, player config, browser version, recordrtc etc.

[bagwaa]

ffprobe version 3.3 Copyright (c) 2007-2017 the FFmpeg developers
  built with Apple LLVM version 8.1.0 (clang-802.0.41)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/3.3 --enable-shared --enable-pthreads --enable-gpl --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-libmp3lame --enable-libx264 --enable-libxvid --enable-opencl --disable-lzma --enable-vda
  libavutil      55. 58.100 / 55. 58.100
  libavcodec     57. 89.100 / 57. 89.100
  libavformat    57. 71.100 / 57. 71.100
  libavdevice    57.  6.100 / 57.  6.100
  libavfilter     6. 82.100 /  6. 82.100
  libavresample   3.  5.  0 /  3.  5.  0
  libswscale      4.  6.100 /  4.  6.100
  libswresample   2.  7.100 /  2.  7.100
  libpostproc    54.  5.100 / 54.  5.100
Input #0, matroska,webm, from 'solve-9152.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    Stream #0:1(eng): Video: h264 (Baseline), yuv420p(progressive), 640x480 [SAR 1:1 DAR 4:3], 25 fps, 25 tbr, 1k tbn, 50 tbc (default)

Just downloads as a webm still, and not able to play it in Safari, trying to get these videos working across as many browsers as possible. Previously I was using AWS elastic transcoder to change these on upload, but that gets expensive so looking so save in MP4 format thats playable in all browsers (if possible)

Config

vm.recorder = videojs("#myVideo", {
                controls: false,
                width: 320,
                height: 240,
                plugins: {
                    record: {
                        audio: true,
                        video: true,
                        maxLength: 60 * 5,
                        debug: true,
                        audioEngine: 'recordrtc',
                        videoMimeType: 'video/webm;codecs=H264'
                    }
                }
            });

[bagwaa]

Seems like the major issue at the moment is that video recorded in Chrome can't be watched in FF

[thijstriemstra]

Just because it's downloaded as an webm file doesn't mean it's content is webm (ffprobe shows it's Video: h264 (Baseline)). Simply rename the clip to mp4 or hardcode the extension you want in the code. Safari doesn't playback webm (only with a plugin https://www.reddit.com/r/apple/comments/40b3y3/this_is_how_you_can_play_webm_in_safari/) but it does playback MP4: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

[thijstriemstra]

Is it possible the other way around: watching recorded firefox clips in Chrome?

[bagwaa]

The weird thing is, when I convert the webm to an mp4 using ffmpeg I am able to use the scrub bar, but when I do this with the webm file or even rename that file to mp4, it still doesn't give me this

[bagwaa]

Yeah, recording on FF and watching that clip on Chrome seems ok

[thijstriemstra]

@bagwaa the scrubbar will only work when there's duration metadata in the video file. Unfortunately none of the browsers currently inject this duration metadata in their recorded files so scrubbing will not work without ffmpeg conversion (see #31).

[bagwaa]

thanks @thijstriemstra you've helped make all this a little bit clearer for me now 👍

[thijstriemstra]

@bagwaa no problem, recording video in the browser just sucks at the moment as you can see. People hate Flash but at least that worked consistently across all browsers.

[bagwaa]

this is very true, its for a site I have done (for a hobby) for rubix cube solving and giving the ability to film solves easily, works flawlessly in Chrome, firefox is kinda OK .. everything else just doesn't work. But I think for now its a waiting game.

As it stands I just have one user (me) who's videos goto a premium s3 bucket that transcodes everything to mp4 as well as uses the uploaded webm as fallback.

example : https://cubetimer.io/watch/9252

thanks for your help again

[thijstriemstra]

It is now possible to inject the missing metadata using the ts-ebml plugin, see https://github.com/collab-project/videojs-record/wiki/Plugins#ts-ebml