DEV Community

Sagar Kava for Video SDK

Posted on • Edited on • Originally published at videosdk.live

Build Your Own Live Streaming Application in 5 Steps | 2022

Do you have an idea for a Live Streaming App? No worries, there is no need to hire a developer. This book will help you build your Live Streaming App easily and also teach you how to run it at maximum profit in minimum time.

Build Your own Live Streaming Application in 4 Steps with Video SDK

What is Video Live Streaming SDK?

Video Live Streaming SDK enables app developers to easily integrate live video streaming functionality within their applications. The SDK works on iOS and Android by leveraging the native built-in camera player and media services to provide live streaming. It is designed to work across all networks, devices, and performance levels.

HLS Live streaming Streaming videos are usually broadcast from video servers that you don't have access to. HLS solves this problem by partitioning all of the broadcaster's streams into small (usually 1–3 minutes) chunks. When the new chunk is available, your device either downloads it or starts playing it. As the chunks are small, you immediately see content with only a brief (1–2 second) delay. You can easily pause a live stream, and our service optimizes the quality of video based on available bandwidth. Since Apple devices do not require an app for streaming, HLS is great for mobile devices.

The easiest way to stream live video over HTTP is with HLS. Apple's HTTP Live Streaming (HLS) is a technique to transmit live and on-demand audio, video, and related metadata using the Hypertext Transfer Protocol (HTTP). The server presents a Playlist file in a M3U8 format to the client written in Restream's open RTMP streaming protocol. The client then requests, one at a time, the individual M3U8 files from the server using Range Requests. The request contains all of the information necessary for the server to begin streaming each requested M3U8 file as quickly as possible. This article aims to explain how HLS works in theory and how to build a sys- tem for your own network or business.

Live Streaming is easier than ever after you have the audio and video signals from your computer (audio enters on the Left Channel and Video is on the Right Channel). To do Live Streaming, you need a device that accepts both wired (as in not wireless) signals, with HDMI out. As for streaming, I dont know what that means so will not comment.

Video SDK Live Streaming is a media server. It enables a high-quality live streaming experience with the support of thousands of viewers.

  • It allows users to record live streams, so users can watch them later.
  • Users can also Restream to other platforms such as Youtube, Facebook, etc.
  • RTMP support for live streaming.
  • Compatible with OBS studio, Streamyard, etc.
  • Adaptive live streaming based on screen resolution and internet bandwidth.
  • Record your live streaming for playback.
  • Private streaming with authentication.
  • Embedded live streaming player.

Build Your own Live Streaming App in 5 Steps with Video SDK

So, here are 5 Steps to create a live streaming app.

This tutorial explains the steps to integrate live video streaming into your app.

1. Sign up for a free Video SDK and Generate API Key

Go to Dashboard, navigate to Settings > API Keys and click on ADD NEW button.

Build Your own Live Streaming App in 4 Steps with Video SDK

2. Generate access token

For security, every user that connects to live streaming needs an access token. By substituting apiKey and secretKey in it.

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 the JWT.io website for more details.


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}`);
});
Enter fullscreen mode Exit fullscreen mode

This guide will provide an overview of how to create live stream using generated token in previous step Authentication.

No Property Name Type Description
1 Name string Name of your live stream.
2 Record boolean Whether you are the recording or not. true for the record, false for not the record, you can follow the Recording Guide.
3 Restream Optional Array RTMP URL and stream key from the provided platforms such as Youtube or Facebook, you can follow Restream on Social Media.

Step 3: Create a 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.


app.get("/live", async (req, res) => {
  const token = req.headers.authorization;
  const options = {
    method: "POST",
    headers: {
      Authorization: token,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name: "Nickname for livestream", // nickname for livestream
      record: true, // use false to disable recording
    }),
  };
  const response = await request(
    "https://api.videosdk.live/v1/livestreams",
    options
  );
  const json = await response.json();
  return res.json(json);
});
Enter fullscreen mode Exit fullscreen mode

Step 4: Start Broadcasting

Use any RTMP-supported broadcasting software like OBS studio, to publish the video. Following are the steps for OBS Studio, Streamlabs, VideoLan, Ant Media, etc.

  1. Add media source: In the sources section, choose a video feed to share.
  2. Set streaming URL and key.

Build Your own Live Streaming App in 4 Steps with Video SDK
Set streaming URL and key.

3 . Start streaming!

4 . Hurray! You are live now.

Step 5: Supports HTML5 video


<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.videosdk.live/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>
Enter fullscreen mode Exit fullscreen mode

Build Your own Live Streaming App in 4 Steps with Video SDK

Official Standard Live Streaming Documents

Stream with ease. Grasp the crystal clear pricing with cost-effective plans and supreme quality.

Live stream at budget-friendly pricing. Easy, simple, and cost-effective fit for your application. Now integrate live streaming hassle-free with videosdk.live

Live streaming platforms have taken over the world for sure, and if you act fast, then you can make great profits out of it. With the help of the right live streaming app, companies and brands can reach more people and increase engagement rates as well. By creating a live streaming app, you will not only get success but also give other people a chance to make it big. You can take the help of an agency as well that has experienced professionals. Taking the help of professionals will surely help you to make the best app possible, and in case of any problem, you will get expert guidance as well.

Top comments (0)