Play HLS stream via HTML 5 Video

Nginx

Install Nginx

sudo apt install nginx

default nginx web root: /var/www/html

Start nginx service

service nginx start

FFmpeg

Install ffmpeg

sudo apt install ffmpeg

run ffmpeg commands

Open a terminal, run the command below:

ffmpeg -y \
 -i rtsp://admin:[email protected]:554/av0_0 \
 -codec copy \
 -bsf h264_mp4toannexb \
 -map 0 \
 -f segment \
 -segment_time 3 \
 -segment_format mpegts \
 -segment_list "/var/www/html/camera.m3u8" \
 -segment_list_type m3u8 \
 "/var/www/html/stream%d.ts"

restart nginx service

service nginx restart

HTML & JS

HTML

import libs

Javascript

$(document).ready(function(){
    var player = videojs('video-js-player');
    player.src({
        src: "http://192.168.57.165:80/camera.m3u8",
        type: "application/x-mpegURL",
        withCredentials: true
    });
    player.play();
}