2تضمين دفق RTSP مباشر في صفحة ويب

كنت أعمل مؤخرًا على إعداد المنزل الذكي وأحد الأشياء التي كنت أقصد إعدادها هو جهاز لوحي مزود بواجهة ويب تعمل باللمس لإدارة منزلي الذكي. كانت إحدى المشاكل الأولى التي واجهتني هي كيفية بث موجز cctv إلى متصفح الويب ...

المشكلة

الكاميرا الخاصة بي CCTV, مثل الكثير, يوفر فقط دفق RTSP. لا يوجد متصفحات ويب حديثة تدعم RTSP.

البحث والمتطلبات

لم يعد Google كما كان عليه من قبل واستغرق الأمر عدة أيام من البحث للعثور على حل مقبول يلبي جميع متطلباتي ...

• كنت أرغب في عمل شيء غير متصل تمامًا دون الحاجة إلى خوادم جهات خارجية.
• أردت شيئًا خاليًا تمامًا من الناحية القانونية, مصدر مفتوح بشكل مثالي
• أردت شيئًا لا يعمل على تحويل الفيديو أو الصوت لأن هذا من شأنه أن يهدر موارد المعالجة

الحل

لقد وجدت دليل مفيد حقا الذي شرح طريقة للقيام بذلك مع القليل من JavaScript و ffmpeg, كلاهما متاحان مجانًا.

لتشغيل ffmpeg استخدمت الأمر التالي, التي قمت بتشغيلها على النوافذ كخدمة, تم إنشاؤها باستخدام nssm ...
ffmpeg -i rtsp://your_rtsp_ip:port/path/to/file.stream -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/video.m3u8

لتضمين الفيديو قمت بتنزيل ملف css التالي و 2 شبيبة الملفات

• HTTPS://vjs.zencdn.net/7.2.3/video-js.css
• HTTPS://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js
• HTTPS://vjs.zencdn.net/7.2.3/video.js

ثم استخدمت الرمز من الدليل (مع مسارات معدلة للملفات المحلية) لتضمين الفيديو الذي يعمل على الفور. يستخدم ffmpeg حولها 0.2% استخدام وحدة المعالجة المركزية وبضعة ميغا بايت من الذاكرة على الخادم الذي يستضيف موقع الويب.

ملاحظة أخيرة, في حالة ما يهم - كنت بناء ثابت win64 من ffmpeg 4.2.2