AWS Kinesis video stream for live video. Part 2— Consumer

To make your users enjoy watching live stream video firstly we need to get live stream link. You have to have preinstalled aws-sdk module for that.

Start with creating new KinesisVideo instance and pass your region as config param. Here you can read a bit more about it https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/KinesisVideo.html.

Now we can use getLiveStream method to receive HLS(HTTP Live Streaming) session url. HLS and DASH are the most common formats used for delivering adaptive bitrate video. HLS is older and wider supported, DASH is newer, more efficient nut not supported natively within HTML5. We selected HLS format. Note that in case producer(device with camera) is not streaming, you will not be able to get link.

Once link is retrieved you can display video stream in your client application.

AWS recommends 3 players for that if HLS format is selected:

1. HLS
2. Shaka Player
3. Video js

I have tried all options and would highly recommend to use the 1st one, due to varieties of custom setting and easy interface.

As from HLS docs we check if HLS is supported in the browser and create new HLS instance, then load stream from url and attach to videoplayer.

const video = document.getElementById('video');
const url = 'yourHLSSessionURL';
if(Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(url);
    hls.attachMedia();
}

I used React library to build my application, therefore we have to use reference to element instead of selector.

<video
    preload="none"
    ref={(playerRef) => {
        if(Hls.isSupported()) {
           const hls = new Hls();
           hls.loadSource('https://youHLSstreamUrl');
           hls.attachMedia(playerRef);
        }}
    }
    autoPlay
/>

Video is being played however latency is a bit high and can reach 10s. Having played with hls player params I ended with next configurations and reduced twice.

const hls = new Hls({
  // Maximum buffer length in sec., hls will never exceed   
   maxMaxBufferLength: 1, 
   liveSyncDuration: 0.5,
   liveMaxLatencyDuration: 1,
   backBufferLength: 0,
   nudgeMaxRetry: 10,
});

I can also advice to save value of playerRef and hls locally in variable, so you can stop loading stream when it is required (button is pressed or component is unmounted). Use useRef hook to store values you want to keep an eye.

In order to stop loading stream we can create next function:

const stopLoadingStream = () => {
    playerRef.current.pause();
    hlsRef.current.stopLoad();
}

In order to stop playback on component unmount simply pass it as return value in useEffect hook

useEffect(() => stopLoadingStream, [])

Congrats, now you can create stream from your home webcam and monitor in browser/mobile app how your cat is eating your favorite plant while you are saving the world.