Skip to main content

Stream Video Files Tutorial

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

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

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/uploads/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>