Run front-end web application to upload and stream video

Deploy Front-end source code

Clone the front-end source code from https://github.com/hdthinh1012/aws-workshop-0-hls-streaming-fe.

Run npm install to install all the dependencies and open .env

Edit the IP address and port that your backend is currently listening on.

Run npm run dev to start the Vite React App in hot-reload mode.

Upload and stream video demo

Open the http://localhost:5173/upload: Click Choose File button and upload your video (Recommend an MP4 file format with H264 video and AAC audio encoding). Then click Upload Video button, the front end will send a initial request for the server to setup uploading process. If the setup succeed, an alert appears showing the file chunk size and number of chunks will be split from file to upload to server. Click OK to start the uploading process The server will start uploading chunks, then merge chunks into original video file, and finally run FFMPEG command to generate HLS master playlist (which contains several folder with .ts file contain video sequence and .m3u8 contain metadata for video sequence order) The uploaded video original file saved in uploads folder The generate HLS playlist saved in streams folder Back to the front-end web application, change to stream tab. All the HLS playlist folder generated and saved in streams is listed here. Click Click here button to open video stream page The video is adaptively streamed from the server by first loading the streams/sintel_trailer.mp4/master.m3u8 file, then hls.js npm package will handle the streaming process. The network inspector show that hls.js automatically chose 360P resolution based on network status. User can choose between 360P, 480P, 720P, 1080P in the select form below the video.