Watching a Livestream

With your api.video livestream you 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.

Here the response from the live stream:

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

When the livestream ends, the video is re-encoded as video on demand (VOD). 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.

	//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.

That's it! Thank you for reading.

How are you using live video in your projects? We'd love to know - leave a note over on our community forum. If you haven't created your api.video account yet, you can do that in just a few seconds here.