Skip to main content

Quickstart video on demand using REST API

Step by step guide to integrate video on demand api in your app#

This tutorial explains steps to integrate video streaming in your app.

note

Also check out this example code on github to get started quickly.

Step 1: Generate access token#

An access token is required to call the VideoSDK APIs. You can generate one with the API key and secret mentioned in the developer portal at VideoSDK console.

Note: Please note that this code is meant to be written on your backend server. Do not reveal your secret key to anyone. This sample is in Node.js but you can write the same in any other programming language with the help of a JWT library. Please check jwt.io website for more details.

server.js
const express = require("express");const jwt = require("jsonwebtoken");const cors = require("cors");const request = require("request");
const app = express();const port = 9000;app.use(cors());app.use(express.json());app.use(express.urlencoded({ extended: true }));
app.get("/get-token", (req, res) => {  const API_KEY = process.env.VIDEOSDK_API_KEY;  const SECRET_KEY = process.env.VIDEOSDK_SECRET_KEY;  const options = { expiresIn: "10m", algorithm: "HS256" };  const payload = {    apikey: API_KEY,  };  const token = jwt.sign(payload, SECRET_KEY, options);  res.json({ token });});
app.listen(port, () => {  console.log(`Example app listening at http://localhost:${port}`);});

Step 2: Create URL to upload video file#

To upload your video on our servers, you first have to create signed URL.

curl --L --X POST 'https://api.videosdk.live/v1/files' \--header 'Authorization: `jwt token goes here`'

Step 3: Upload video file to signed URL#

After creating signed URL, next step is to upload file on our server.

curl --L --X POST 'https://storage-api.videosdk.live/v1/files' \--header 'Authorization: `jwt token goes here`' \--header 'Content-Type: multipart/form-data'--form 'file=mock-video.mp4"'

Step 4: Submit encoding job#

Encoding API converts source video into compressed version in multiple resolutions up to 4K resolutions.

curl --L --X POST 'https://api.videosdk.live/v1/encoder/jobs' \--header 'Authorization: `your token goes here`' \--header 'Content-Type: application/json' \--data-raw '{    "videoId": "6053115ebba24b4d700c8c49",    "presets": [        {            "resolutions": ["240", "360", "480"],            "format": "hls"        }, {            "resolutions": ["360"],            "format": "mp4"        }    ],    "thumbnails": [        {            "timestamp": "00:00:03",            "resolutions": ["360"],            "formats": ["jpg", "webp"],            "filters": ["none", "blur"]        }    ],    "webhookUrl":"https://<your-website-address>/<path>"}'

Step 5: Wait until encoding webhook triggers#

As soon as you submit encoding job, We will download file on our server and start encoding video in multiple resolutions.

When the video is ready for playback, the asset "status" changes to "completed".

The best way to get notified is to use webhooks. We will send you notification as soon as video will be ready to play.

Step 6: Watch video#

To play video, fetch fileUrl of video either from webhook or from the details API.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video  id="my-player"  controls  style="width: 100%; max-width: 500px;"/>
<script>  const video = document.querySelector('#my-player');  const src = 'https://cdn.videosdk.live/files/videos/605311d9bba24b4d700c8c4d/index.m3u8';  if (video.canPlayType('application/vnd.apple.mpegurl')) {    // Some browers (safari and ie edge) support HLS natively    video.src = src;  } else if (Hls.isSupported()) {    const hls = new Hls();    hls.loadSource(src)    hls.attachMedia(video);  } else {    console.error("This is a legacy browser that doesn't support MSE");  }</script>