Tutorials

Create a Live Stream

May 4, 2020 - Doug

Live streaming your content is a great way to connect with your audience. In this tutorial, we'll walk through he steps you need to follow to set up a video livestream.

Note: we have exmaple code of setting up a live stream in the browser, with Zoom and with OBS.

In order to establish a video livestream, we must establish a live stream on a server, but also create a live video stream to send over the connection.

For simplicity, the live stream will be created with OBS, free and open source software for video streaming.

Creating Live Stream

Step 1: Authenticate

You need an access_token in order to create and upload a video.

You will need your API key to obtain the access_token. You can find your API key at my.api.video.

This tutorial uses the sandbox endpoint. To upload your video in production, simply replace all sandbox.api.video instances with ws.api.video.

First, call the authentication endpoint and get your access token.

Example - Curl Request

 curl -X POST \
  https://sandbox.api.video/auth/api-key \
  -H 'Content-Type: application/json' \
  -d '{"apiKey": "your_api_key"}'

Example - Http Request

 POST /auth/api-key HTTP/1.1
  Host: sandbox.api.video
  Content-Type: application/json
  
  {
  	"apiKey": "your_api_key"
  }

Example - Json Response

{
    "token_type": "Bearer",
    "expires_in": 3600,
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImFiYjcxNmNiY2ZiNmY4MDc2OWEzZmQ1MjlhMjZiZWRkY2EwMzhlYzA3NDk5M2ZiMTA0YjhiZGMwOTI5MzgxN2M3NmNkNzI4ZDIzOGMzZmNlIn0.eyJhdWQiOiJsaWJjYXN0IiwianRpIjoiYWJiNzE2Y2JjZmI2ZjgwNzY5YTNmZDUyOWEyNmJlZGRjYTAzOGVjMDc0OTkzZmIxMDRiOGJkYzA5MjkzODE3Yzc2Y2Q3MjhkMjM4YzNmY2UiLCJpYXQiOjE1MjY1NDgzMDEsIm5iZiI6MTUyNjU0ODMwMSwiZXhwIjoxNTI2NTUxOTAxLCJzdWIiOiJ1c01vbml0b3IiLCJzY29wZXMiOlsibW9uaXRvci5saWJjYXN0LmNvbSJdLCJjb250ZXh0Ijp7InVzZXIiOiJ1c01vbml0b3IiLCJwcm9qZWN0IjoicHJNb25pdG9yIiwibWVtYmVyIjoibWVNb25pdG9yIn19.jWHC18iEur69FzD5dm78wAwNzh2cPKTRvKuspyQNQKPvhEbYa2v4XhqVNh0TTw8JeNxBtcePBTMHl4S9nWsw7pW4KD8zbqzUjCZNYlaYDpu8vu_tmWVO2JccglJIjuQEaiTbkUsfLdgtsb_9DJ3frk1-WgAKuzu0HewhcGb80xivdJPqNYA6I1Ig8GOief9LTUNNJoqqZn1A1-UiGRTXDag7_yODuxzpMFaAzbaisfK0gYti-PnjyHGWhpGwRplMKPPJk6rSAp1d9TWWXVgg-bNqUzz4_sr33ICJTx7_qZzfamMqk5PDZbHOwpIj8L2DBfo3isvt6QliWmgFEOuvog",
    "refresh_token": "def502001d5c8aeb3f921c833f0c90fbbb9ef2be1f25e476d7acf999010c435c043bf382f462bd48e82c9253ee0bcad1dd07c07b827552ef540b1429e032acdb78325d17401d54a4baf421e41eaed4b545938f3539428ea52297cb8760269b95284da8c89c55d72c9584ced47510976a9f3106a034173dd3e39c3bf4f7119c4722fda4f70c15241a392be79ba5a1ff9e4f3edfa204c22ad9f9776258fb511137e6e0f40a917866158bc13c7536243146bb35b5f6edf59f6d2d346721fcbc22810364fdb4236949db605e4eb1de1578af97866e850fe535b1febb21ab52dfc0dfe91719d5c81c477ba4c979c993e404d6ed3e51d549a239cc486c17e5e3f414ad66fa71e1a16eba2124eaaba97fc9c8729109b8294c8a440e0cd78f8c9b0006c15a8e32e19eb364f9d644a3510735301ff525aa856728791b240523f8a85d2a57754c221e49de80b690a5908f3d599b43aec5164bab7dd4dce10b5f336140d32315ba64ee4cf3b68e9babea65f493db6cfb28f53c5e2dcaf440f4509c39bfda2076c6e9b8efcb"
}

Step 2: Create the Live Stream

Now we create the live stream. In the JSON parameter, feel free to edit the name of the live stream from "Your Stream Name."

Example - Curl Request

curl -X POST https://sandbox.api.video/live-streams \
-H 'Content-Type: application/json'  \
-H 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImFiYjcxNmNiY2ZiNmY4MDc2OWEzZmQ1MjlhMjZiZWRkY2EwMzhlYzA3NDk5M2ZiMTA0YjhiZGMwOTI5MzgxN2M3NmNkNzI4ZDIzOGMzZmNlIn0.eyJhdWQiOiJsaWJjYXN0IiwianRpIjoiYWJiNzE2Y2JjZmI2ZjgwNzY5YTNmZDUyOWEyNmJlZGRjYTAzOGVjMDc0OTkzZmIxMDRiOGJkYzA5MjkzODE3Yzc2Y2Q3MjhkMjM4YzNmY2UiLCJpYXQiOjE1MjY1NDgzMDEsIm5iZiI6MTUyNjU0ODMwMSwiZXhwIjoxNTI2NTUxOTAxLCJzdWIiOiJ1c01vbml0b3IiLCJzY29wZXMiOlsibW9uaXRvci5saWJjYXN0LmNvbSJdLCJjb250ZXh0Ijp7InVzZXIiOiJ1c01vbml0b3IiLCJwcm9qZWN0IjoicHJNb25pdG9yIiwibWVtYmVyIjoibWVNb25pdG9yIn19.jWHC18iEur69FzD5dm78wAwNzh2cPKTRvKuspyQNQKPvhEbYa2v4XhqVNh0TTw8JeNxBtcePBTMHl4S9nWsw7pW4KD8zbqzUjCZNYlaYDpu8vu_tmWVO2JccglJIjuQEaiTbkUsfLdgtsb_9DJ3frk1-WgAKuzu0HewhcGb80xivdJPqNYA6I1Ig8GOief9LTUNNJoqqZn1A1-UiGRTXDag7_yODuxzpMFaAzbaisfK0gYti-PnjyHGWhpGwRplMKPPJk6rSAp1d9TWWXVgg-bNqUzz4_sr33ICJTx7_qZzfamMqk5PDZbHOwpIj8L2DBfo3isvt6QliWmgFEOuvog'\
-d '{"name":"Your Stream Name"}'

Example - Json Response

{"liveStreamId":"li400mYKSgQ6xs7taUeSaEKr",
"streamKey":"30087931-229e-42cf-b5f9-e91bcc1f7332",
"name":"Your Stream Name",
"Record":false,
"Broadcasting":false,
"Assets":{
"iframe":"<iframe src=\"https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"\"></iframe>",
"player":"https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr",
"hls":"https://live.api.video/li400mYKSgQ6xs7taUeSaEKr.m3u8",
"thumbnail":"https://cdn.api.video/live/li400mYKSgQ6xs7taUeSaEKr/thumbnail.jpg"}}

Now the server is ready to accept our live stream, and once bradcast begins (Json above shows broadcasting:false), it will be viewable on the urls listed in the Json response.

Connecting Live Video

The JSON response above lists your live stream's streamKey, which will be needed in OBS to connect your video to the server.

in the OBS application:

Esablish a source. In the sources section, choose a video feed to share. You could choose to share your screen, or to share your camera (on a Mac: Video Capture Device, and then in the "Device" dropdown choose the camera). You should now see the video source in the main OBS window.
Connect OBS to api.video. Under Settings, choose Stream. You'll see a choice for service - choose custom.
The server should be rtmp://broadcast.api.video/s and the streamKey is the value you received in the Json when you created the stream. Click OK to accept the changes.
Press Start Streaming.
Share the embed, iFrame, so that others can watch your stream!

Extra Step: The default video poster that your users will see is api.video branded. You can update the thumbnail with an image of your choice:

curl -X POST  https://sandbox.api.video/live-streams/<liveStreamId>//thumbnail \ 
-H 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImFiYjcxNmNiY2ZiNmY4MDc2OWEzZmQ1MjlhMjZiZWRkY2EwMzhlYzA3NDk5M2ZiMTA0YjhiZGMwOTI5MzgxN2M3NmNkNzI4ZDIzOGMzZmNlIn0.eyJhdWQiOiJsaWJjYXN0IiwianRpIjoiYWJiNzE2Y2JjZmI2ZjgwNzY5YTNmZDUyOWEyNmJlZGRjYTAzOGVjMDc0OTkzZmIxMDRiOGJkYzA5MjkzODE3Yzc2Y2Q3MjhkMjM4YzNmY2UiLCJpYXQiOjE1MjY1NDgzMDEsIm5iZiI6MTUyNjU0ODMwMSwiZXhwIjoxNTI2NTUxOTAxLCJzdWIiOiJ1c01vbml0b3IiLCJzY29wZXMiOlsibW9uaXRvci5saWJjYXN0LmNvbSJdLCJjb250ZXh0Ijp7InVzZXIiOiJ1c01vbml0b3IiLCJwcm9qZWN0IjoicHJNb25pdG9yIiwibWVtYmVyIjoibWVNb25pdG9yIn19.jWHC18iEur69FzD5dm78wAwNzh2cPKTRvKuspyQNQKPvhEbYa2v4XhqVNh0TTw8JeNxBtcePBTMHl4S9nWsw7pW4KD8zbqzUjCZNYlaYDpu8vu_tmWVO2JccglJIjuQEaiTbkUsfLdgtsb_9DJ3frk1-WgAKuzu0HewhcGb80xivdJPqNYA6I1Ig8GOief9LTUNNJoqqZn1A1-UiGRTXDag7_yODuxzpMFaAzbaisfK0gYti-PnjyHGWhpGwRplMKPPJk6rSAp1d9TWWXVgg-bNqUzz4_sr33ICJTx7_qZzfamMqk5PDZbHOwpIj8L2DBfo3isvt6QliWmgFEOuvog' \
-F file=@/path/to/image>

Doug

Developer Evangelist

Follow our latest news by subscribing to our newsletter

Get started now

Connect your users with videos

Get started Contact us