Zunächst müssen Sie einen Media-Streaming-Server einrichten. Sie können Wowza, red5 oder nginx-rtmp-module verwenden . Lesen Sie die Dokumentation und Einrichtung auf dem gewünschten Betriebssystem. Alle Engines unterstützen HLS (Http Live Stream-Protokoll, das von Apple entwickelt wurde). Sie sollten die Dokumentation zur Konfiguration lesen. Beispiel mit nginx-rtmp-Modul:
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/;
}
}
Nachdem der Server eingerichtet und die Konfiguration erfolgreich war. Sie müssen eine RTMP-Encoder-Software (OBS, Wirecast ...) verwenden, um das Streaming wie YouTube oder Twitchtv zu starten.
Auf der Clientseite (in Ihrem Fall im Browser) können Sie Videojs oder JWplayer verwenden, um Videos für Endbenutzer abzuspielen. Sie können für Videojs wie folgt vorgehen:
<!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>
Sie müssen kein anderes Plugin wie Flash hinzufügen (da wir HLS und nicht rtmp verwenden). Dieser Player kann ohne Flash gut Cross-Browser arbeiten.