Actuellement, la plupart des caméras Web transmettent des flux vidéo via le protocole RTSP, mais HTML ne prend généralement pas en charge les flux RTSP. À l'exception du navigateur Firefox, qui peut lire directement les flux RTSP, presque aucun autre navigateur ne peut lire directement les flux RTSP. Les applications Electron sont basées sur le noyau Chromium, elles ne peuvent donc pas lire directement les flux RTSP.
A l'aide de certains outils, les flux RTSP peuvent être lus sur des pages Web. La méthode présentée dans cet article peut être appliquée aux applications Web traditionnelles et aux applications Electron. La seule différence est que le processus principal de l'application Electron est utilisé comme serveur de l'application Web traditionnelle.
Il existe actuellement des comparatifs de solutions de lecture RTSPPuisqu’il s’agit d’une diffusion en direct, le délai doit être faible. Lorsque la caméra se déconnecte, une certaine invite d'événement devrait également s'afficher. Sur ces deux points, nous comparerons les solutions de lecture RTSP existantes mises en œuvre sans achat de licence (nous ne les analyserons pas pour l'instant dans la phase principale).
J'ai implémenté les quatre méthodes et la quatrième méthode a le meilleur effet global. Elle utilise moins de ports, a une faible latence, une vitesse de rendu rapide et est facile à gérer les événements hors ligne.
Solution de lecture RTSP basée sur flv.jsflv.js est un navigateur HTML5 open source de Bilibili. S'appuyant sur Media Source Extension pour la lecture vidéo, la vidéo est transmise via le protocole HTTP-FLV ou WebSocket-FLV, et le format vidéo doit être au format FLV.
Côté serveur (processus principal)Le côté serveur est écrit à l'aide du framework express + express-ws Lorsqu'une requête HTTP est envoyée à l'adresse spécifiée, le programme de streaming ffmpeg est démarré, le flux RTSP est directement encapsulé dans un flux vidéo au format FLV et poussé vers le serveur. flux de réponse WebSocket spécifié.
importer * comme express depuis express; importer * comme expressWebSocket depuis express-ws; importer ffmpeg depuis fluent-ffmpeg; importer webSocketStream depuis websocket-stream/stream; importer WebSocket depuis websocket-stream; importer * comme http depuis http; fonction 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 écouté)}function rtspRequestHandle(ws, req) { console.log(descripteur de requête rtsp) ; const stream = webSocketStream(ws, { binaire : true, browserBufferTimeout : 1000000 }, { browserBufferTimeout : 1000000 }); let url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); , tcp, -buffer_size, 102400) // Vous pouvez ajouter du RTSP ici Paramètres optimisés.on(start, function () { console.log(url, Stream démarré.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Traitement en ligne de la caméra} ) .on(erreur, fonction (err) { console.log(url, Une erreur s'est produite : , err.message); }) .on(end, function () { console.log(url, Stream end!); // Gestion de la déconnexion de la caméra}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream); catch (error) { console.log(error }}Afin de réduire le temps de chargement, vous pouvez ajouter les paramètres suivants à ffmpeg :
Bien entendu, cette mise en œuvre reste encore relativement approximative. Lorsqu'il y a plusieurs demandes pour la même adresse, la sortie de ffmpeg doit être augmentée au lieu de démarrer un nouveau flux de processus ffmpeg.
Côté navigateur (processus de rendu)L'exemple utilise le framework Vue pour la conception de pages.
<template> <div> <video class=demo-video ref=player></video> </div></template><script>importer des flvjs depuis flv.js ;exporter par défaut { props : { rtsp : String, id : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, Mounted () { 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 (erreur) { console.log(error); } } }, beforeDestroy () { this.player.destory( }} /script><style> .demo-video { largeur maximale : 480 px ; hauteur maximale : 360 px }</style ; Affichage des effetsLa page Electron est utilisée pour afficher 7 caméras Hikvison NVR, qui peuvent atteindre une faible latence, une faible utilisation du processeur et aucune distorsion de l'écran. Pour des raisons de confidentialité, je ne publierai pas de captures d'écran ici.
De la même manière, j'ai joué 9 vidéos locales 1080p "White Deer Plain" pour voir l'effet.
L'effet de lecture est très bon, il n'y a aucun décalage ni flou et l'utilisation du processeur n'est pas élevée.
Exemple de référentiel de code : WhuRS-FGis/html5-rtsp Exemple de référentiel de code :
RésumerCe qui précède est l'exemple de code pour lire une vidéo RTSP en HTML5 présenté par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !