По-перше, вам потрібно налаштувати сервер потокового передавання медіа. Ви можете використовувати Wowza, red5 або nginx-rtmp-модуль . Прочитайте їх документацію та налаштування на потрібну ОС. Весь движок підтримує HLS (протокол Http Live Stream, розроблений Apple). Вам слід прочитати документацію для конфігурації. Приклад з модулем nginx-rtmp:
rtmp {
server {
listen 1935;
chunk_size 4000;
application show {
live on;
hls on;
hls_path /mnt/hls/;
hls_fragment 3;
hls_playlist_length 60;
deny play all;
}
}
}
server {
listen 8080;
location /hls {
add_header Cache-Control no-cache;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers' 'Range';
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>
Вам не потрібно додавати інші плагіни, такі як флеш (оскільки ми використовуємо HLS, а не rtmp). Цей плеєр може добре працювати в браузері без спалаху.