Для начала необходимо настроить сервер потоковой передачи мультимедиа. Вы можете использовать Wowza, red5 или nginx-rtmp-module . Прочитайте их документацию и настройку на ОС, которую вы хотите.
Все движки поддерживают HLS (протокол Http Live Stream, разработанный Apple). Вы должны прочитать документацию для конфигурации.
Пример с nginx-rtmp-модулем:
rtmp {
server {
listen 1935; # Listen on standard RTMP port
chunk_size 4000;
application show {
live on;
# Turn on HLS
hls on;
hls_path /mnt/hls/;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}
}
}
server {
listen 8080;
location /hls {
# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers' 'Range';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /mnt/;
}
}
После успешной установки и настройки сервера. Вы должны использовать некоторые программы для кодирования rtmp (OBS, wirecast ...) для начала потоковой передачи, такие как youtube или twitchtv.
На стороне клиента (в вашем случае браузер) вы можете использовать Videojs или JWplayer для воспроизведения видео для конечного пользователя. Вы можете сделать что-то вроде ниже для Videojs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Streaming</title>
<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('#player');
</script>
</body>
</html>
Вам не нужно добавлять другие плагины, такие как flash (потому что мы используем HLS, а не rtmp). Этот проигрыватель может хорошо работать с любым браузером без вспышки.