Альтернативная трансляция HTML5 v2
Возникла задача организовать закрытую трансляцию камер на сайте. Ни один из стандартных вариантов (https://devline.ru/translation/) не подошёл, предложенные на форуме способы тоже не устроили. На скорую руку было набросано решение на nginx (нужен для корректной работы по HTTPS) и Video.js (собственно сам плеер).
Плюсы:
Полноценное HTML5 видео со всеми вытекающими.
Поддерживается Internet Explorer (по меньшей мере Windows 7/IE11 или новее, на более старых не проверял).
Поддержка работы по HTTPS без каких-либо предупреждений.
Скрыт реальный адрес сервера с «Линия IP».
Не используются сторонние сайты.
Разграничение доступа по пользователям.
Минусы:
Весь трафик идёт через ваш сервер.
В конфиг nginx надо будет добавить:
server {
listen 443 ssl http2;
root /usr/local/www/video;
server_name video.example.com;
ssl_certificate fullchain.pem;
ssl_certificate_key privkey.pem;
location / {
auth_basic "My video server";
auth_basic_user_file htpasswd;
}
location /cameras/ {
proxy_pass http://devline.server.local:9786/cameras/;
}
}
Вместо devline.server.local указываем имя или IP-адрес вашего сервер «Линия IP». В файле htpasswd необходимо прописать имена пользователей и пароли (по паролям читаем документацию), которые совпадают с соответствующими пользователями на сервере «Линия IP» и которым необходимо дать доступ к трансляции.
Для работы потокового вещания потребуется библиотека HLS для Video.js. Пример кода:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Видеонаблюдение</title>
<link href="css/video-js.min.css" rel="stylesheet">
<script src="js/videojs-ie8.min.js"></script>
<script src="js/video.js"></script>
<script src="js/lang/ru.js"></script>
<script src="js/videojs-flash.min.js"></script>
<script src="js/videojs-http-streaming.min.js"></script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" width="640" height="360"
poster="//video.example.com/cameras/0/image?resolution=640x360"
preload="none" controls data-setup='{"language": "ru"}'>
<source
src="//video.example.com/cameras/0/streaming/main.m3u8"
type="application/x-mpegURL" />
<p class="vjs-no-js">Для просмотра этого видео, пожалуйста, включите JavaScript и убедитесь, что ваш браузер поддерживает HTML5-видео.</p>
</video>
</body>
</html>