Ë
Kasper-Niclas Andersen By Kasper-Niclas Andersen • November 3, 2017

Tutorial: How To Stream Live Video on a Website

Broadcasting yourself or an event for an audience to watch live might seem like a complicated task, but in reality, it's quite easy. You don't need expensive equipment or even any special programming skills to set up a live video stream on your website. In this tutorial, we will show you how to stream live video using SYNQs stream API. 

Before you start, you need a SYNQ API key. You can get one for free by creating a SYNQ account, it’s completely free and no credit card is required. Create your account here

1. Download and install OBS Studio

For this tutorial, we are going to use OBS Studio, a program that will let us broadcast some video content. Download OBS Studio here.

2. Call the create API

We will be using our API Reference guide to make all API calls. Go to our API Reference guide and navigate to the create function. Insert your API key in the api_key field:

SYNQ Create API screenshot

 

Click send request.

You should get something like this as a response:

Copy the video_id string as we will need that in the next step.

 

3. Call the stream API

Now, we will generate the URLs we need to stream live video. In the API Reference, scroll down to the stream function. Make sure your API key is inserted in the api_key field, then paste your video_id string into the video_id field:

SYNQ Stream API screenshot

 

Click send request. Now you should get something like this returned:

From the above, you will need part of the stream_url and video_id for OBS Studio. For watching the live stream you can open the embed_url in your browser, this will let you watch your live stream using the player that we provide for all SYNQ users. From the stream_url, copy the last forward slash "/" and everything before it

 

4. Broadcast video content using OBS Studio

Open OBS Studio and click on Settings in the bottom right of the window. Go to the Stream settings. In the Stream Type dropdown, select ‘Custom Streaming Server’. Then, in the URL field, paste everything you copied from your stream_url in the last step. In the Stream key field, paste your video_id.

Screenshot of OBS Studio stream settings

Click OK.

Now, let's find something to broadcast. In the Sources box, click on the plus icon to select a source. I will use a video I have stored on my computer for this, so I select Media Source. You can also use your webcam or even broadcast your display.

Screenshot of OBS Studio

Click Start Streaming, you should now be live broadcasting. Open your embed_url in a browser to watch your live video stream:

Screenshot of live video stream playing in a browser

That's it, you are now streaming live video! Our live streaming service supports DVR, meaning that you can pause and resume your live stream. The stream is recorded, and will be available at the same embed_url for later viewing.

5. Embed your live stream on a webpage

This step is optional, but if you want to show your live stream on your website, you can do so simply by placing your embed_url in an iframe:

The above HTML code will result in an embedded video:

 

Tip: You can customize the looks of the player by adding string query parameters to your embed_url. Read more about player customization here

As always, leave your comments below, or send us an email if you have any questions or feedback about live video streaming. You can also discuss live streaming and other SYNQ services in our developer community.


Get started with your live video streaming project, sign up for a free 14-day trial!

START YOUR FREE TRIAL


 

Related posts: