Solution: Video on a website - EyevinnOSC/community GitHub Wiki

Video on a website

Background and starting point

This tutorial is based on the use case where you have video files on your machine and want to stream them on your website or web app. We will use Open Source Cloud solutions for the entire process, from storage to transcoding and then we will use the Eyevinn web player to play our video. We will also quickly see how we can use the player embedded on our website.

Prerequisites

  1. If you have not already done so, sign up for an OSC account, you can create one on osaas.io.
  2. 5 remaining services on your subscription plan or individually purchased the services included in this solution.
  3. Minio CLI installed on your system, you can find how to install it on your system on https://min.io/docs/minio/kubernetes/upstream/index.html (choose your system in the menu, k8s by default).

This solution is based on the following open source projects made available as a service:

  • Encore Callback Listener
  • Encore Packager
  • minio
  • SVT Encore
  • Valkey
  • Filestash (Optional)

This Tutorial expands on Solution VOD Transcoding and some of the steps will be referred to that tutorial. The VOD Transcoding tutorial also has a good visualisation chart of the pipeline.

Step 1: Create and Setup minio server

Go to the OSC web interface and navigate to the minio service. If you like to protect your user name and password go to the tab "Service Secrets" and create a secret for each of them (or only one if you like i.e password). Keep in mind that you have to remember your secret since you won't be able to access them in plain text until the minio server is up and running.

Go back to the tab "Myobjstorages" and click "Create Objstorage". Now we can give our minio storage a name and set our root user and password. Now you can choose to use your secrets.

Step 2: Setup minio alias and storage buckets

If you have not yet installed the minio CLI, go ahead and do so now.

When installed the first thing we want to do is to copy the URL to our minio server we created on OSC.

Next, open a terminal of your choice and create a alias for your server:

mc alias set ALIAS HOSTNAME ACCESS_KEY SECRET_KEY
  • ALIAS: The name that your server will get
  • HOSTNAME: the url that we copied from our instance card on OSC
  • ACCESS_KEY: the user name you gave the instance (Service Secret)
  • SECRET_KEY: the password you gave the instance (Service Secret)

To check if we succeeded to create our alias we can get some info on our server:

mc admin info ALIAS

You should get something like this:

Now we need to setup two buckets, one where we store our video files and one where we store our transcoded videos. You can name your buckets as you wish, we are going to create one that we call "videos" and one called "transcode".

Go ahead and create your buckets with the following command(You need to run it once for each bucket you want to create):

mc mb ALIAS/BUCKET_NAME

We can now watch our buckets(make sure you type the alias you gave your server and do not type "alias"):

mc ls ALIAS

Now we have two buckets on our minio server, "videos" and "transcode". Later we need to be able to download our HLS-playlist (index.m3u8) therefore we are going to set the permission to download to our transcode bucket:

mc anonymous set download ALIAS/BUCKET_NAME

Step 3: Upload your video file to minio

Now we are soon ready to start transcoding our video file but first we need to upload the file to our video bucket. To do this we have prepared a script that does this for us. Follow the instructions found in the repository README, you find everything here: https://github.com/EyevinnOSC/minio-share-script (save the share URL the script returns, we will use it later).

NOTE!: There are other options to upload your video

Filestash Option

You have the option to use Filestash either as a service on OSC or in the browser. We won't go through how to set it up with OSC in this tutorial but if you visit https://www.filestash.app/s3-browser.html you can quickly get a visualisation of your storage and handle upload in the GUI:

CLI Option

Since we installed the minio CLI we can use it directly in our terminal to upload the video to our bucket. We use the cp option to copy our video and upload it. We need to specify the path to our video and the target i.e our bucket. Here is a example:

mc cp ~/data/myVideo.mp4 ALIAS/MY_BUCKET/

NOTE!: Specify --recursive to recursively copy the contents of that directory or bucket. If you omit the --recursive argument, cp only copies objects in the top level of the specified directory or bucket (If you only have one video file that you like to upload this does not matter, but if you have a folder with several videos please consider checking the minio docs).

Presigned URL

(If you used the share-minio-script to upload your video this step is not required since you already got the url in return from the script)

To be able to transcode our video we need to reach it in some way. We can do this by creating a presigned URL that we later will use when we create the transcode job.

To create the presigned url we need to use the CLI, in your terminal use the following command:

mc share download --recursive ALIAS/MY_BUCKET/MY_VIDEO.mp4

This will return a presigned URL, save this for the transcoding job.

Step 4: Setup transcoding pipeline and create job

Now, when we have setup our storage bucket and have our video file in the cloud, it's time to start transcoding and make the file ready to be streamed. For a more in depth tutorial and explanation of what each service does see the VOD Transcoding solution docs.

We are now going to use 4 services to setup our transcoding pipeline, SVT Encore > Valkey > Encore Callback Listener > Encore Packager

Setting up SVT Encore:

The SVT Encore service has multiple options that could be added, we only need to give it a name in our case and you can skip the other options (they are optional regardless).

Copy and save the URL, you find it as usual on the instance card:

Creating a Valkey queue

Navigate to the Valkey service and create your Valkey queue, you only need to provide a name for your queue, and this can be any name you like. The Valkey will provide you with a TCP that we refer to as our Redis URL.

The URL will in our case be redis://172.232.131.169:10513, save our URL for later.

Setup Encore Callback Listener

Now we need a callback listener! This service will use the Encore URL that we saved and our redis URL. We will also give a name to our queue, I'm going to call it package.

IMPORTANT The URL to the SVT Encore instance is without the trailing slash when setting up the Callback Listener! In this case it will be: https://eyevinnlab-webvideosolution.encore.prod.osaas.io - So don't forget to remove the trailing slash when pasting the URL!

It should look like this(enter your specific Encore url and redis url):

Creating Encore Packager instance:

  • Make sure the OutputFolder is the one you created for your transcoded files, if you follow the syntax in this tutorial it should be s3://transcode/.
  • It says AwsAccessKeyId and AwsSecretAccessKey, ignore the naming, this is the username and password you gave your minio server.
  • AwsRegion can be skipped in our case.
  • S3EndpointUrl, this is the url that you copy from the minio instance card.
  • The Personal Access Token can be found in the GUI under settings > API.

It's recommended that you at least create a secret for your PAT (Personal access token), I'm creating one for PAT, minio username and password.

With the syntax used to setup buckets etc it should look like this:

Creating transcode Job

Now we are ready to start transcoding!!

Go back to the SVT Encore service and find your instance. In the upper right corner of the card you find the menu (three vertical dots). Click on it and in the menu click on Open API docs.

This opens up the swagger for your instance, here we can trigger our transcoding job.

You will se several endpoints with different CURL operations (GET, POST etc). We want to create a job so we will use the POST/encoreJobs endpoint. Go ahead and click on that row to open it up. To activate it, click on try it out. Now we can edit the JSON data that we send to the endpoint, our job.

For this use case the JSON should look like this:

The input URI is the URL to our video on our bucket, it's the presigned URL pointing to the video that we created earlier.

Click on Execute to start the job/transcoding. This will take a moment and you can follow the process if you navigate to the Callback Listener service and click on the logs-button (bottom right corner) on the instance card. When the transcoding is done we can move on to the next step.

Step 5: Access our transcoded files

Now we should have our transcoded files in our bucket transcode. The path should look something like this:

ALIAS/transcode/FOLDER_WITH_SAME_NAME_AS_ORIGINAL_FILE/FOLDER_NAMED_AFTER_JOB_ID/TRANSCODED_FILES

Earlier we updated the permissions in our transcoded folder, that means we now can access our HLS-Playlist (index.m3u8). The URL is build up as follows:

URL_TO_YOUR_MINIO_SERVER/transcode/FOLDER_WITH_SAME_NAME_AS_ORIGINAL_FILE/FOLDER_NAMED_AFTER_JOB_ID/index.m3u8

Step 6: Streaming video and usage suggestion

Let's try stream our video, we will use the Eyevinn web player for this. Go to player type (or paste) in the url to your HLS-Playlist in the input and click the load button. Now you should se your video run in the player! Congratulations 🎉 You succeeded to transcode your video!

Embedded usage

You can use the video in a embedded version. Click the button named Embed. Now a snippet of code will show under the video player. Use this code in your project to embed the video on your website.