Artikelverzeichnis
Verweis zu den Lerninhalten
ffmpeg verwendet VLC, um RTSP-Liveübertragungen auf Abruf zu erstellen
[Front-End] So spielen Sie RTSP- und RTMP-Videostreams ab
Erstellen und konfigurieren Sie Nginx Streamen Sie unter Windows Media Server und führen Sie Push- und Pull-Tests von RTMP-Streams durch (Der Test war effektiv, aber nach einer Weile der Wiedergabe hörte er auf, ich weiß nicht, was passiert ist)
Erstellen Sie einen Nginx-RTMP-Server unter Windows und verwenden Sie FFmpeg, um lokales Video-Streaming zu implementieren
Wie man HTML5 dazu bringt, RTSP-Videostreams abzuspielen, ohne Geld auszugeben (erster Punkt)
Implementieren Sie FFmpeg+nginx unter FFmpeg-Linux, um einen RTMP- und FLV-Streaming-Medienserver zu erstellen, um Überwachung und anderes zu realisieren Videos für Web-Live-Übertragungen
Grundlegende Einführung in RTMP, HLS, FLV
Konfiguration des HTTP-FLV-Live-Broadcast-Moduls (nginx-http-flv-module)
[http-flv]flv.js und nginx-http-flv Push-and-Pull-Streaming!! ! ! Nützlich
[nginx-rtmp]ffmpeg+video-js Push- und Pull-Streaming (nicht empfohlen)
nginx-http-flv-module Modulnutzung Einführung Gitee-Adresse
Bilibili flv.js
Java implementiert die Überwachung des RTSP-Flusses zu FLV und die Front-End-Wiedergabe (sowohl Front-End- als auch Back-End-Codes) (Internetnutzer in den Kommentarenrtsp-converter-flv- Spring-Boot-Starter-Code-Gitee-Adresse, wurde geforkt)
Erstellen Sie über Nginx einen Live-Streaming-Medienserver basierend auf http-flv
Lokale Videodateien als Datenquelle
Schritte schieben
Klicken Sie auf „Medien->Streamen“
Klicken Sie auf „Hinzufügen“, wählen Sie die Videodatei aus und klicken Sie dann auf „Streamen“
Klicken Sie nach dem Klicken auf „Streamen“ auf „Weiter“ und Sie werden sehen, dass der Stream gestartet wird Klicken Sie auf Stream Wählen Sie den TS-Stream wie in der Abbildung gezeigt aus (markieren Sie ihn, um ihn zu aktivieren). Transkodierung Oh), klicken Sie auf Weiter Geben Sie den Pfad manuell ein und klicken Sie auf „Weiter“.
Klicken Sie nach der Auswahl von rtsp auf „Hinzufügen“.
Streaming-Schritte
Klicken Sie auf die Medien->Netzwerk-Streaming öffnen
Geben Sie die RTSP-Push-Adresse manuell ein
Es beginnt sich unten zu bewegen
Dann warten Sie einen Moment und Sie können sehen, wie das Video abgespielt wird
Lokale Kamera als Datenquelle
Wie oben, klicken Sie auf „Medien->Stream“.
Klicken Sie auf „Weiter“
Wählen Sie rtsp aus und klicken Sie auf Hinzufügen
Geben Sie die Adresse manuell wie folgt ein:
Wählen Sie „ts“ aus und klicken Sie auf „Weiter“.
Sie können die Push-Adresse sehen. Klicken Sie auf „Stream“.
Fangen Sie erneut an zu schieben
Streaming-Schritte
Geben Sie die Adresse von rtsp ein und klicken Sie auf „Wiedergabe“.
Spielen Sie das Video der Kamera ab
vlc + ffmpeg + nginx + flv.js realisieren Web-Video-Live-Übertragung
verallgemeinern
Ungefährer Betriebsablauf
- Sehen Sie sich den obigen Link an. Verwenden Sie zunächst VLC, um diese Basiskamera in einen RTSP-Videostream zu konvertieren.
- Verwenden Sie dann ffmeg, um den RTSP-Videostream in einen RTMP-Videostream zu konvertieren und ihn an myapp zu übertragen, das im RTMP-Modul von Nginx konfiguriert ist (Nginx muss das Modul Nginx-http-flv-module installieren).
- Und Nginx verwendet flv_live unter /live im http-Modul, um die HTTP-Wiedergabe-FLV-Livestream-Funktion zu öffnen.
- Auf diese Weise können Sie die flvjs-Nutzungsadresse von bilibili im Frontend verwenden: http://127.0.0.1/live?port=1935&app=myapp&stream=mystream, um das von der Kamera aufgenommene Video anzuzeigen.
VLC öffnet die Kamera und stellt einen RTSP-Videostream bereit
Die Schritte sind die gleichen wie in den vorherigen Screenshots
Nginx-Konfiguration
Sie müssen das Modul nginx-http-flv-module installieren. Hier ist der direkte Download von nginx, der von anderen kompiliert wurde (dieses Modul ist bereits darin enthalten, Link: https://pan.baidu.com/s/1NfK8EtPKWldTuT7ZktgolQ?pwd =yqxy Extraktionscode: yqxy), dann starten Sie nginx
Nginx-Konfigurationsdatei http-flv.conf
Mein Verständnis der folgenden Konfiguration lautet: Durch Hinzufügen des konfigurierten RTMP-Moduls kann Nginx den von ffmpeg auf MyApp übertragenen Videostream empfangen, und MyApp kann dann auch den Push-Stream übertragen (da ich zu diesem Zeitpunkt auch ein anderes VLC-Fenster öffnen kann). Verwenden Sie die Adresse: rtmp://127.0.0.1:1935/myapp/mystream und sehen Sie sich das Video von der Kamera an. Da wir dann die Wiedergabe auf der Webseite realisieren möchten, wird ein domänenübergreifender Fehler gemeldet, wenn wir die Videoadresse rtmp://127.0.0.1:1935/myapp/mystream direkt auf der Webseite verwenden. Das haben wir nicht Ich habe eine Lösung gefunden, also verwenden wir den HTTP-Dienst zum Öffnen / Live-Adressen und verwenden flv_live zum Öffnen von HTTP, um die FLV-Live-Übertragungsfunktion abzuspielen (Sie müssen also das Modul nginx-http-flv-module installieren, um es zu unterstützen), damit Sie Kann domänenübergreifende Anforderungsheader hinzufügen und auch auf Anforderungsparametern basieren. Der Port, die App und der Stream finden MyApp, die mit ffmpeg gepusht wurden.
worker_processes 1;
error_log logs/error.log error;
events {
worker_connections 4096;
}
http {
include mime.types;
default_type application/octet-stream;
keepalive_timeout 65;
server {
listen 80;
location / {
root www;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /live {
flv_live on; #打开HTTP播放FLV直播流功能
chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复
add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
}
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root temp;
add_header 'Cache-Control' 'no-cache';
}
location /dash {
root temp;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#推流播放和录制统计数据的配置
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root www/rtmp; #指定stat.xsl的位置
}
#如果需要JSON风格的stat, 不用指定stat.xsl
#但是需要指定一个新的配置项rtmp_stat_format
#location /stat {
# rtmp_stat all;
# rtmp_stat_format json;
#}
location /control {
rtmp_control all; #rtmp控制模块的配置
}
}
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir temp;
rtmp {
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 15s;
drop_idle_publisher 15s;
log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
log_size 1m; #log模块用来记录日志的缓冲区大小
server {
listen 1935;
#server_name www.test.*; #用于虚拟主机名后缀通配
application myapp {
live on;
gop_cache on; #打开GOP缓存，减少首屏等待时间
}
application hls {
live on;
hls on;
hls_path temp/hls;
}
application dash {
live on;
dash on;
dash_path temp/dash;
}
}
}
ffmpeg konvertiert den RTSP-Videostream in RTMP und überträgt ihn an Nginx
Geben Sie den folgenden Befehl ein
ffmpeg -i rtsp://127.0.0.1:8554/rtsp01 -vcodec copy -acodec copy -f flv -an -b 1024k -y rtmp://127.0.0.1:1935/myapp/mystream
flv.html
Laden Sie flv.js auf Github herunter
Adresse:flv.js-Download
Chrome erfordert, dass das Video nicht direkt abgespielt werden kann und der Benutzer es manuell auslösen muss, bevor es möglich ist abgespielt, daher ist das Folgende eine Anleitung. Die Schaltfläche löst die Videowiedergabe aus.
<html>
<head>
<title>Live</title>
<meta charset="utf-8">
</head>
<body >
<h2 >推流测试</h2>
<button id="startVideoBtn">开始</button>
<script src="flv.js"></script>
<video id="videoElement"></video>
<script>
function start() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url:'http://127.0.0.1/live?port=1935&app=myapp&stream=mystream'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}
let startVideoBtn = document.getElementById('startVideoBtn')
startVideoBtn.onclick = ()=>{
start()
}
</script>
</body>
</html>
Wirkung
Die Verzögerung ist etwas hoch, 15 Sekunden Verzögerung
