HTML5-Beispielcode zum Abspielen von RTSP-Videos

Derzeit übertragen die meisten Webcams Videostreams über das RTSP-Protokoll, HTML unterstützt RTSP-Streams jedoch standardmäßig nicht. Außer dem Firefox-Browser, der RTSP-Streams direkt abspielen kann, können fast keine anderen Browser RTSP-Streams direkt abspielen. Electron-Anwendungen basieren auf dem Chromium-Kernel und können daher RTSP-Streams nicht direkt abspielen.

Mit Hilfe bestimmter Tools können RTSP-Streams auf Webseiten abgespielt werden. Die in diesem Artikel vorgestellte Methode kann auf herkömmliche Webanwendungen und Electron-Anwendungen angewendet werden. Der einzige Unterschied besteht darin, dass der Hauptprozess der Electron-Anwendung als Server der herkömmlichen Webanwendung verwendet wird.

Da es sich um eine Live-Übertragung handelt, muss die Verzögerung gering sein. Wenn die Kamera offline geht, sollte es auch eine bestimmte Ereignisaufforderung geben. An diesen beiden Punkten werden wir die bestehenden RTSP-Wiedergabelösungen vergleichen, die ohne den Kauf einer Lizenz implementiert wurden (wir werden sie vorerst nicht in der Prinzipphase analysieren).

Ich habe alle vier Methoden implementiert und die vierte Methode hat den besten Gesamteffekt. Sie benötigt weniger Ports, hat eine geringe Latenz, eine schnelle Rendering-Geschwindigkeit und ist einfach mit Offline-Ereignissen umzugehen.

flv.js ist ein Open-Source-HTML5-Browser von Bilibili. Wenn Sie sich für die Videowiedergabe auf die Media Source Extension verlassen, wird das Video über das HTTP-FLV- oder WebSocket-FLV-Protokoll übertragen und das Videoformat muss das FLV-Format sein.

Die Serverseite wird mit dem Express + Express-WS-Framework geschrieben. Wenn eine HTTP-Anfrage an die angegebene Adresse gesendet wird, wird das ffmpeg-Streamingprogramm gestartet, der RTSP-Stream direkt in einen Videostream im FLV-Format gekapselt und an den gesendet angegebenen WebSocket-Antwortstream.

 import * as express from express;import * as expressWebSocket from express-ws;import ffmpeg from fluent-ffmpeg;import webSocketStream from websocket-stream/stream;import WebSocket from websocket-stream;import * as http from http;function localServer() { let app = express(); app.use(express.static(__dirname)); expressWebSocket(app, null, { perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(express listened)}function rtspRequestHandle(ws, req) { console.log(rtsp request handle) ; const stream = webSocketStream(ws, { Binary: true, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); let url = req.query.url; console.log(rtsp params:, req.params); try { ffmpeg(url) .addInputOption(-rtsp_transport , tcp, -buffer_size, 102400) // Sie können hier etwas RTSP hinzufügen Optimierte Parameter.on(start, function () { console.log(url, Stream gestartet.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Online-Verarbeitung der Kamera} ) .on(error, function (err) { console.log(url, Es ist ein Fehler aufgetreten: , err.message); }) .on(end, function () { console.log(url, Stream end!); // Handhabung der Kameratrennung}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream);

Um eine kürzere Ladezeit zu erreichen, können Sie die folgenden Parameter zu ffmpeg hinzufügen:

• Die Analysefunktion kann die zum Parsen des Codestreams erforderliche Zeit verkürzen
• Ich erinnere mich nicht ganz an die spezifische Funktion von max_delay, die in den Daten geschrieben ist. Der Effekt ist nicht so offensichtlich wie bei der Analyse.

Natürlich ist diese Umsetzung noch relativ grob. Wenn mehrere Anfragen für dieselbe Adresse vorliegen, sollte die Ausgabe von ffmpeg erhöht werden, anstatt einen neuen ffmpeg-Prozessstrom zu starten.

Das Beispiel verwendet das Vue-Framework für die Seitengestaltung.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>flvjs aus flv.js importieren;export default { props: { rtsp: String, id : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, mount () { if (flvjs.isSupported()) { let video = this.$refs.player; if (video) { this.player = flvjs.createPlayer({ type: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); this.player.load(); this.player.play(); } Catch (error) { console.log(error } }, beforeDestroy () { this.player.destory(); /script><style> .demo-video { max-width: 480px; max-height: 360px;

Die Electron-Seite wird zur Anzeige von 7 Hikvison NVR-Kameras verwendet, die eine niedrige Latenz, eine geringe CPU-Auslastung und keine Bildschirmverzerrung erreichen können. Aus Vertraulichkeitsgründen werde ich hier keine Screenshots veröffentlichen.

Auf die gleiche Weise habe ich 9 lokale 1080p-Videos „White Deer Plain“ abgespielt, um den Effekt zu sehen.

Der Wiedergabeeffekt ist sehr gut, es gibt keinerlei Verzögerungen oder Unschärfen und die CPU-Auslastung ist nicht hoch.

Beispielcode-Repository: WhuRS-FGis/html5-rtsp Beispielcode-Repository:

Das Obige ist der vom Herausgeber eingeführte Beispielcode für die Wiedergabe von RTSP-Videos. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!