Skip to main content

Deploying

Once you are happy with your video, it's time to share it with the world.

Deployment checklist​

  1. Build in production mode
  2. Ensure fat-fingers etc. for mobile
  3. Make sure that mouseUp events are appropriately intercepted.
  4. Join audio files into a single file.
  5. Convert audio recordings
  6. Generate thumbnails and add highlights.
  7. Make sure there is CSS to load custom fonts etc.
  8. Make sure the hosting page is including the fake fullscreen patch
  9. Make static recordings for social media/discoverability

Building​

To create an optimized production build of your project, use the liqvid build command.

liqvid build

This will bundle your project into ./dist. You then upload that directory to your production site. You can also preview it from http://localhost:8000/dist/.

Audio​

Joining audio​

It can be convenient to record several audio segments separately. However, due to the Web Autoplay Policy, you need to join them into a single audio file when you are finished. We provide a helper command for this:

liqvid audio join -o audio.webm audio-1.webm audio-2.webm audio-3.webm

This will join audio-1.webm, audio-2.webm, and audio-3.webm into audio.webm. See liqvid audio join for more information.

Transforming audio​

If you are recording audio in the browser, the audio file will not have the correct metadata for seeking. Additionally, you need to provide the audio in mp4, since iOS does not support webm. We provide the liqvid audio convert command to help with this:

liqvid audio convert audio.webm

Other tips​

How to do noise reduction using ffmpeg and sox (skip steps 1 and 5)

Static video​

You may want a "static" (traditional mp4/webm) version of your video so that you can upload it to Facebook/YouTube/Twitter (and then link to the interactive version). You can make these with the liqvid render command:

liqvid render -a ./audio/audio.mp4 -u http://localhost:8080 -o out.mp4

For this you will need to have ffmpeg installed. In case you have have issues installing it, this guide may help.

Thumbnails​

Your video will be a lot easier to navigate if you have thumbnail previews on the scrubber bar. These can be generated with the liqvid thumbs command:

liqvid thumbs -u http://localhost:8080

These are then passed to the thumbs prop of Player.