كود مثال HTML5 لتشغيل فيديو RTSP

حاليًا، تنقل معظم كاميرات الويب تدفقات الفيديو من خلال بروتوكول RTSP، لكن HTML لا يدعم بشكل قياسي تدفقات RTSP. باستثناء متصفح Firefox، الذي يمكنه تشغيل تدفقات RTSP مباشرةً، لا تستطيع أي متصفحات أخرى تقريبًا تشغيل تدفقات RTSP مباشرةً. تعتمد تطبيقات الإلكترون على نواة الكروم، لذلك لا يمكنها تشغيل تدفقات RTSP مباشرة.

وبمساعدة أدوات معينة، يمكن تشغيل تدفقات RTSP على صفحات الويب. يمكن تطبيق الطريقة المقدمة في هذه المقالة على تطبيقات الويب التقليدية وتطبيقات Electron والفرق الوحيد هو أن العملية الرئيسية لتطبيق Electron تُستخدم كخادم لتطبيق الويب التقليدي.

نظرًا لأنه بث مباشر، يجب أن يكون التأخير منخفضًا. عندما تكون الكاميرا غير متصلة بالإنترنت، يجب أن يكون هناك أيضًا مطالبة بحدث معين. في هاتين النقطتين، سنقوم بمقارنة حلول تشغيل RTSP الحالية التي تم تنفيذها دون شراء ترخيص (لن نقوم بتحليلها في الوقت الحالي في المرحلة الأساسية).

لقد قمت بتنفيذ جميع الطرق الأربع، والطريقة الرابعة لها أفضل تأثير إجمالي، فهي تشغل منافذ أقل، ولها زمن وصول منخفض، وتتميز بسرعة عرض سريعة، وتسهل التعامل مع الأحداث غير المتصلة بالإنترنت.

flv.js هو متصفح HTML5 مفتوح المصدر من Bilibili. بالاعتماد على امتداد مصدر الوسائط لتشغيل الفيديو، يتم نقل الفيديو عبر بروتوكول HTTP-FLV أو WebSocket-FLV، ويجب أن يكون تنسيق الفيديو بتنسيق FLV.

تتم كتابة جانب الخادم باستخدام إطار عمل Express + Express-ws. عند إرسال طلب HTTP إلى العنوان المحدد، يبدأ برنامج دفق ffmpeg، ويتم تغليف دفق RTSP مباشرة في دفق فيديو بتنسيق FLV، ويتم دفعه إلى دفق استجابة WebSocket المحدد.

 استيراد * كـ Express من Express؛استيراد * كـ ExpressWebSocket من Express-ws؛استيراد ffmpeg من Fluent-ffmpeg؛استيراد webSocketStream من websocket-stream/stream؛استيراد WebSocket من websocket-stream؛استيراد * كـ http من http؛ الوظيفة localServer() { Let app = Express(); app.use(express.static(__dirname)); perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(expressاستماع)}function rtspRequestHandle(ws, req) { console.log(rtsp request Handle) تيار ثابت = webSocketStream(ws, { ثنائي: صحيح, browserBufferTimeout: 1000000 }, {; browserBufferTimeout: 1000000 }); console.log(rtsp url:, url); console.log(rtsp params:, req.params); ، tcp، -buffer_size، 102400) // يمكنك إضافة بعض RTSP هنا المعلمات المحسنة.on(start, function () { console.log(url, Stream begin.); }) .on(codecData, function () { console.log(url, Stream codecData.) // معالجة الكاميرا عبر الإنترنت} ) .on(خطأ, وظيفة (يخطئ) { console.log(url, حدث خطأ: , err.message); }) .on(end, function () { console.log(url, Stream end!); // معالجة فصل الكاميرا}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream);

من أجل تقليل وقت التحميل، يمكنك إضافة المعلمات التالية إلى ffmpeg:

• يمكن أن يؤدي التحليل إلى تقليل الوقت اللازم لتحليل تدفق التعليمات البرمجية
• لا أتذكر تمامًا الوظيفة المحددة لـ max_delay المكتوبة في البيانات، التأثير ليس واضحًا مثل التحليل.

وبطبيعة الحال، لا يزال هذا التنفيذ صعبا نسبيا. عند وجود طلبات متعددة لنفس العنوان، يجب زيادة مخرجات ffmpeg بدلاً من بدء دفق عملية ffmpeg جديد.

يستخدم المثال إطار عمل Vue لتصميم الصفحة.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>استيراد flvjs من flv.js;تصدير الافتراضي { الدعائم: { rtsp: سلسلة، معرف : 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 (error) { console.log(error } } }, beforeDestroy () { this.player.destory(); /script><style> .demo-video { max-width: 480px; max-height: 360px;

يتم استخدام صفحة Electron لعرض 7 كاميرات Hikvison NVR، والتي يمكن أن تحقق زمن وصول منخفض، واستخدام منخفض لوحدة المعالجة المركزية، وعدم تشويه الشاشة. بسبب السرية، لن أقوم بنشر لقطات الشاشة هنا.

بنفس الطريقة، قمت بتشغيل 9 مقاطع فيديو محلية بدقة 1080 بكسل "White Deer Plain" لرؤية التأثير.

تأثير التشغيل جيد جدًا، ولا يوجد أي تأخير أو ضبابية على الإطلاق، كما أن استخدام وحدة المعالجة المركزية ليس مرتفعًا.

نموذج مستودع التعليمات البرمجية: WhuRS-FGis/html5-rtsp نموذج مستودع التعليمات البرمجية:

ما ورد أعلاه هو نموذج التعليمات البرمجية لتشغيل فيديو RTSP بتنسيق HTML5 الذي قدمه المحرر وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيرد عليك المحرر في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!

إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!