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

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