ZUJONOW
Book a demo
Book a demo
    Realtime communication
  • →   Tutorial

Steps

  1. Generate access token (server-side)
  2. Create live stream
  3. Start broadcasting
  4. Start streaming

1. Generate access token

An access token is required to call the ZujoNow APIs. You can generate one with the API key and secret mentioned in the developer portal at ZujoNow 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.

const jwt = require("jsonwebtoken");
const options = { expiresIn: "10m", algorithm: "HS256" };
const payload = {
apikey: apikey,
};
const token = jwt.sign(payload, secret, options);
// Send `token` in the "Authorization" header with all API requests

2. Create live stream

Use the "Create live stream" Rest API to create a new live stream. It will return the upstream and downstream URLs in response.

// This function will return json object with livestream details
async function createLivestream() {
const options = {
method: "POST",
headers: {
Authorization: "`token` generated in Step 1 goes here",
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "Nickname for livestream", // nickname for livestream
record: true, // use false to disable recording
}),
};
const res = await fetch("https://api.zujonow.com/api/livestreams", options);
const json = await res.json();
return json;
}

Response

{
"record": true,
"id": "60348faca9cedd724c20cf63",
"name": "Nickname for livestream",
"streamKey": "0893a39c-0f3f-4ac8-8700-06151a1f68ed",
"upstreamUrl": "rtmp://live.zujonow.com/live/...",
"downstreamUrl": "https://live.zujonow.com/.../index.m3u8",
"recordingUrl": "https://live.zujonow.com/.../storage/index.m3u8",
"createdAt": "2021-02-23T05:16:28.219Z",
"updatedAt": "2021-02-23T05:16:28.219Z"
}

3. Start broadcasting

Use any RTMP supported broadcasting software like OBS studio, to publish the video. Following are the steps for OBS studio.

  1. Download and install OBS Studio on your platform.
  2. Add media source: In the sources section, choose a video feed to share.obs media source
  3. Set streaming URL and key.obs streaming config
  4. Start streaming!obs start streaming
  5. Hurray! You are live now.

4. Start streaming

Use any HLS supported video player like video.js, to play the video. Create and html file, paste the below code and replace the url with the downstreamUrl received in response of step 2.

<head>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup="{}"
>
<source
src="https://live.zujonow.com/live/cae23d5b-0c34-4429-a70b-0d597e5e0e96/index.m3u8"
type="application/x-mpegURL"
/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script>
videojs.Hls.xhr.beforeRequest = (options) => {
options.headers = {
...options.headers,
Authorization: "`token` generated in step 1",
};
return options;
};
</script>
</body>

ZUJONOW

Make your app engaging.

API/SDKRealtime communicationLive streamingOn Demand VideoContent delivery

Copyright © 2021 ZUJONOW