HLS (HTTP Live Streaming) Support

What is HLS (HTTP Live Streaming)

HLS is video and music streaming protocol which is developed by Apple. HLS file consists of a .m3u8 playlist and a .ts file which is segmented into several seconds. User play back video/music while downloading and decrypting .m3u8 file continuously.

Why HLS is beneficial?

Enbables playback on the mobile devices

The small memory size on mobile devices limits encryption and playback of large data such as video. Instead of downloading all the data, it enables playback of large data in mobile with limited memory by downloading divided files each files.

Improve UX

User can playback as soon as the downloading segmented file is completed, so it enables shorter loading times and smoother UX and playback from the middle of the video.

How to use

Prerequiste

• NodeJs: Node. js is an open-source, cross-platform JavaScript runtime environment and library for running web applications outside the client's browser.
• FFmpeg: FFmpeg is an open source multimedia framework that provides video and audio processing, conversion, and streaming.

Generating HLS Support file

VWBL SDK provides asyncMakeEncryptedHls method which generate HLS Support file (.m3u8 and .ts file).

// asyncMakeEncryptedHls interface
await asyncMakeEncryptedHls(
    filePath: string,       // path where content file
    key: string,            // encryption/decryption key
    duration?: number,      // playback time of a single segmented file
    iv?: number,            // initialization vector of AES
    outputFileName?: string // ${output_directory}/${file_name}.m3u8
                            // `.m3u8` and `.ts` file are stored in ${output_directory}
)

SDK also provides the following utility functions

• calcSplitNumber: Calculate the number of file divisions from playback time of a single segmented file
• calcDuration: Calculate playback time of a single segmented file from number of file divisions
• uploadDirectoryToS3: Upload all files in directory to AWS S3.

Playback HLS Support file

This below code use React and vwbl-hls.js to create video/music player and playback HLS support file. vwbl-hls.js is fork from hls.js which is HLS client library, customized to playback with decryption key which is retrieved from VWBL Network. To create hls player, run hls.attachMedia and attach the video element to hls client instance. When MEDIA_ATTACHED event of HLS occured, loading the source of the HLS support file.

We can run below example code on this codesandbox.

// example
import * as React from "react";
import { render } from "react-dom";
import Hls from "vwbl-hls.js";
import "./styles.css";

function App() {
  // decryption key which is retrieved from VWBL Network.
  const decryptKey = "65c631a2-babc-4b98-b595-b86df0e380ec";
  const encoder = new TextEncoder();
  const encoded = encoder.encode(decryptKey);
  const [hls, setHls] = React.useState(new Hls({ decryptKey: encoded }));
  const videoEl = React.useRef(null);
  // this url is extract from nft metadata (https://d2sjoxqcgrnibx.cloudfront.net/metadata/ef0ea9e3-3172-44bf-a04e-9b3372195d51)
  const encryptedDataUrl = "https://d2sjoxqcgrnibx.cloudfront.net/hlsout-ef0ea9e3-3172-44bf-a04e-9b3372195d51/2gb_file.m3u8";
  React.useEffect(() => {
    if (videoEl.current) {
      hls.attachMedia(videoEl.current);
      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
        hls.loadSource(
          encryptedDataUrl
        );
      });
    }

    return () => {
      if (hls) {
        hls.destroy();
      }
      setHls(null);
    };
  });

  return (
    <div className="App">
      <video ref={videoEl} controls />
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);