Нам потребуется nginx, модуль для nginx https://github.com/arut/nginx-rtmp-module, ffmpeg и сама web камера. В качестве плейера будем использовать https://videojs.com/ Я перепробовал довольно много вариантов, но только этот захотел работать одновременно в firefox, chrome, safari ipad/iphone/macbook.
Я опишу сам процесс, как понял его я.
rtmp модуль запускает ffmpeg, который берет поток из /dev/video0 используя плагин video4linux и записывает в rtmp канал hls/movie. Модуль nginx rtmp принимает данные и раскладывает данные по файликам, параллельно обновляя файл movie.m3u8 в папке /mnt/hls. Потом nginx отдает содержимое папки /mnt/hls по протоколу http, что он умеет делать очень хорошо.
Надо отметить, что этот метод не лишен недостатков. С текущими настройками, есть временной лаг и довольно приличный. Данные пишутся на диск (от этого диск будет деградировать), создатель плагина рекомендует располагать данные в tmpfs или в оперативной памяти.
Конфиг для nginx
http {
....
server {
listen 8080;
root /mnt;
index index.html;
location / {
}
location /stat {
rtmp_stat all;
# Use this stylesheet to view XML as web page
# in browser
# https://github.com/arut/nginx-rtmp-module/blob/master/stat.xsl
rtmp_stat_stylesheet stat.xsl;
}
location /hls {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
add_header Cache-Control no-cache;
}
}
}
rtmp {
server {
listen 1935;
chunk_size 4000;
application hls {
live on;
hls on;
hls_path /mnt/hls;
exec_static ffmpeg -re -f video4linux2 -i /dev/video0 -vcodec libx264 -pix_fmt yuv420p -vprofile baseline -f flv rtmp://localhost:1935/hls/movie;
}
}
}
Создаем /mnt/index.html со следующим содержанием
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Streaming</title>
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming@1.8.0/dist/videojs-http-streaming.min.js"></script>
</head>
<body>
<video-js id="vid1" width=600 height=300 class="vjs-default-skin" controls>
<source src="http://127.0.0.1:8080/hls/movie.m3u8" type="application/x-mpegURL">
</video-js>
<script>
var player = videojs('vid1');
player.play();
</script>
</body>
</html>
