api.video
SearchCtrl K

Features

Developers

Watching a Livestream

January 4, 2021 - Doug Sillars in Live stream status, Video list, NodeJS

With your api.video livestream you'll can have video streaming out to the internet in no time. (If you don't have an api.video livestream yet, here's how to create a livestream.) We have demos on how to stream with your browser, Zoom, OBS, with a Raspberry Pi, and you can expect more tutorials in the future! Every stream that you create has a player that can be embeded on any webpage.

In this post, we'll create a very simple webpage to host your livestream using NodeJS. This page will show the current livestream (if it is broadcasting), and a few recent recordings from the stream.

Is the Stream Broadcasting?

When you request the live stream status API endpoint, you'll receive a JSON response with a lot of details about your stream.

For example, here is the respose from the livestream.a.video stream:

{
  liveStreamId: 'li400mYKSgQ6xs7taUeSaEKr',
  streamKey: '30087931-229e-42cf-b5f9-e91bcc1f7332',
  name: 'Live Stream',
  record: true,
  broadcasting: false,
  assets: {
    iframe: '<iframe src="https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>',
    player: 'https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr',
    hls: 'https://live.api.video/li400mYKSgQ6xs7taUeSaEKr.m3u8',
    thumbnail: 'https://cdn.api.video/live/li400mYKSgQ6xs7taUeSaEKr/thumbnail.jpg'
  }
}

You'll notice the broadcasting parameter. If this value is true - the stream is live! At the moment I made this request, the livestream was not active.

Our Node application calls the live status, and if the stream is broadcasting, the site is served an iframe with the video, and if not, we serve the thumbnail image:

		if(broadcasting){
			liveResult = "Here is your Live Video:";
			videoIframe = "iframe src=\""+liveStream.assets.player+"#autoplay\" width=\"100%\" height=\"50%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\true\"";
		}else{
			videoIframe = "img src ="+liveStream.assets.thumbnail +" width=\"100%\"";
		}

If you look closely, I don't use the exact iframe returned in the response. I build an iframe with the player url, and I add '#autoplay' to the end of the url. This tells the player to autoplay the video as soon as it loads.

Video recordings

In the JSON response above, we also can make user of the "record" attribute. If this parameter is set to true, the video is re-encoded as video on demand (VOD) when the livestream ends. These videos have a 'liveStreamId' parameter linking them back to the original livestream.

If we request the video search endpoint with the livestreamId, we get a list of all the videos that have been saved from the stream. In the below code, we sort by newest videos first, and save the first 5 (most recent) videos into an array. This array is used by Pug and Express to create a list of the videos this is displayed on the page.

	//Now we can get the most recent VOD from the stream.
		    let videoList = client.videos.search({'liveStreamId': liveStreamId, sortOrder: 'desc', sortBy: 'publishedAt'});
			videoList.then(function(liveStreamList){
				//console.log(liveStreamList);

				//loop through all the videos, we'll show 5, and if there are more than 20 - delete them
				
				for(i=0; i< liveStreamList.length; i++){
					if(i<5){
						var iframe = "iframe src=\""+liveStreamList[i].assets.player+"\" width=\"50%\" height=\"25%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\true\"";
						var name = liveStreamList[i].title;
						var data = {
							"name": name, 
							"iframe":iframe
						};
						recordedVideos.push(data);
					}else if(i>20){
						//delete the videos...
						var videoId = liveStreamList[i].videoId;
						let deleteVid = client.videos.delete(videoId);
						deleteVid.then(function(statusCode) {
		  					console.log(videoId, "deleted");
		  					console.log(statusCode);
						}).catch(function(error) {
		  					console.error(error);
						});	
					}


				}
				//now we have an array with all the videos to show:
				console.log(recordedVideos);
				return res.render('live', {liveResult, videoIframe, recordedVideos});
			}).catch((err) => {
				console.log(err);
			});

NB the second part of this if/else. If there are over 20 videos, we delete all of the oldest videos (ensuring there are never more than 20 stored in my account). This is my super simplistic approach to remove older recordings from my account, but is not unlike security systems that delete all videos over X days old.

Try it yourself

We've launched this website at watch.a.video/broadcast. By default, it shows the livestream out of the window of my house, but by adding the ?streamId={livestreamid} you can see any other livestream in my account. You could try the livestream.a.video id (streamId=li400mYKSgQ6xs7taUeSaEKr) to see if anyone is using that endpoint.

Check it out, and let us know what you think! You can also grab the code on Github.

How are you using live video in your projects? We'd love to know - leave a note over at our community forum.

Doug Sillars

Head of Developer Relations

Create your free account

Start building with video now