شرح تفصيلي لأفكار تنفيذ وظيفة البث المباشر للفيديو بلغة HTML5

منذ وقت ليس ببعيد، أخذت وقتًا لإجراء بعض البحث والاستكشاف حول البث المباشر للفيديو الشائع حاليًا، وفهم عملية التنفيذ الشاملة، واستكشاف جدوى البث المباشر بتنسيق HTML5 على الهاتف المحمول.

لقد وجد أن حلول البث المباشر للفيديو السائدة حاليًا على الويب هي HLS وRTMP. ويعتمد طرف WEB المحمول حاليًا على HLS (يحتوي HLS على مشكلات زمن الوصول، ويمكن أيضًا استخدام RTMP بمساعدة video.js). تعتمد نهاية الكمبيوتر الشخصي على RTMP، الذي يتمتع بأداء أفضل في الوقت الفعلي، ثم سنبدأ في مشاركة موضوع البث المباشر H5 حول هذين البروتوكولين لبث الفيديو.

HTTP Live Streaming (HLS باختصار) هو بروتوكول بث فيديو يستند إلى HTTP ويتم تنفيذه بواسطة Apple، QuickTime وSafari على نظام التشغيل Mac وSafari على iOS، جميعها تدعم HLS بشكل جيد. بعض العملاء الشائعين مثل MPlayerX وVLC يدعمون أيضًا بروتوكول HLS.

يعتمد بروتوكول HLS على HTTP، ويحتاج الخادم الذي يوفر HLS إلى القيام بأمرين:

التشفير: تشفير الصور بتنسيق H.263، وترميز الأصوات بتنسيق MP3 أو HE-AAC، وأخيرًا تجميعها في حاويات MPEG-2 TS (Transport Stream) تقسيم: قص ملفات TS المشفرة إلى أطوال متساوية في ملف صغير مع اللاحقة ts ويقوم بإنشاء ملف فهرس نصي عادي ‎.m3u8؛ ويستخدم المتصفح ملفات m3u8. m3u8 يشبه إلى حد كبير تنسيق قائمة الصوت m3u. يمكنك ببساطة التفكير في m3u8 كقائمة تشغيل تحتوي على ملفات ts متعددة. يقوم اللاعب بتشغيلها واحدة تلو الأخرى بالترتيب، ثم يطلب ملف m3u8 بعد تشغيلها جميعًا، ويحصل على قائمة التشغيل التي تحتوي على أحدث ملف ts لمواصلة اللعب، وتبدأ الدورة مرة أخرى. تعتمد عملية البث المباشر بأكملها على m3u8 الذي يتم تحديثه باستمرار ويجب تحديث مجموعة من ملفات m3u8 ديناميكيًا، ويمكن أن تمر ts عبر CDN. تنسيق ملف m3u8 النموذجي هو كما يلي:

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:معرف البرنامج=1، عرض النطاق الترددي=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777gear4/prog_index.m3u8

يمكن ملاحظة أن جوهر بروتوكول HLS لا يزال عبارة عن طلب/استجابة HTTP واحدة، لذا فهو يتمتع بقدرة جيدة على التكيف ولن يتأثر بجدران الحماية. ولكن لديها أيضًا نقطة ضعف قاتلة: التأخير واضح جدًا. إذا تم تقسيم كل ts إلى 5 ثوانٍ وكان m3u8 يحتوي على 6 فهارس ts، فسوف يتسبب ذلك في تأخير لمدة 30 ثانية على الأقل. إذا قمت بتقليل طول كل ts وتقليل عدد الفهارس في m3u8، فسيتم تقليل التأخير بالفعل، ولكنه سيؤدي إلى مزيد من التخزين المؤقت المتكرر وسيزداد أيضًا ضغط الطلب على الخادم بشكل كبير. لذلك لا يمكننا التوصل إلى نقطة حل وسط إلا على أساس الوضع الفعلي.

بالنسبة للمتصفحات التي تدعم HLS، فقط اكتب هذا للعب:

 <video src=./bipbopall.m3u8″ الارتفاع=300″ العرض=400″ التحميل المسبق=التشغيل التلقائي التلقائي=حلقة التشغيل التلقائي=حلقة webkit-playsinline=true></video>

ملاحظة: يدعم HLS متصفح Safari على جهاز الكمبيوتر فقط، على غرار متصفح Chrome الذي يستخدم فيديو HTML5

لا يمكن للعلامة تشغيل تنسيق m3u8. يمكنك مباشرة استخدام بعض الحلول الناضجة نسبيًا على الإنترنت، مثل: Sewise-player وMediaElement وvideojs-contrib-hls وjwplayer.

بروتوكول المراسلة في الوقت الحقيقي (RTMP للاختصار) عبارة عن مجموعة من بروتوكولات البث المباشر للفيديو التي طورتها شركة Macromedia وهي الآن مملوكة لشركة Adobe. يتطلب هذا الحل إنشاء خدمة بث RTMP متخصصة مثل Adobe Media Server، ويمكن استخدام Flash فقط لتنفيذ المشغل في المتصفح. أداءه في الوقت الفعلي جيد جدًا والتأخير صغير جدًا، لكن عيبه هو أنه لا يمكنه دعم تشغيل الويب على الهاتف المحمول.

على الرغم من أنه لا يمكن تشغيله على صفحة H5 لنظام التشغيل iOS، إلا أنه يمكنك كتابة فك التشفير والتحليل الخاص بك لتطبيقات iOS الأصلية التي تتمتع بزمن انتقال منخفض وأداء جيد في الوقت الفعلي. جانب المتصفح، فيديو HTML5

لا يمكن للعلامة تشغيل مقاطع فيديو بروتوكول RTMP، وهو ما يمكن تحقيقه من خلال video.js.

 <link href=http://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet><video id=example_video_1″ class=video-js vjs-default-skin الضوابط التحميل المسبق=العرض التلقائي=640 height=264 حلقة=loop webkit-playsinline><source src=rtmp://10.14.221.17:1935/rtmplive/home type='rtmp/flv '></video><script src=http://vjs.zencdn.net/5.8.8/video.js>< /script><script>videojs.options.flash.swf = 'video.swf ';videojs('example_video_1').ready(function() {this.play();});</script>

في الوقت الحاضر، عادةً ما تهيمن صفحات مثل YY Live وYingke Live على تنسيقات عرض البث المباشر. يمكنك أن ترى أن هيكلها يمكن تقسيمه إلى ثلاث طبقات:

① طبقة فيديو الخلفية

② وحدة المتابعة والتعليق

③ مثل الرسوم المتحركة

تشبه H5 الحالية صفحة البث المباشر، وتنفيذها ليس صعبًا من الناحية الفنية، ويمكن تقسيمها إلى:

① تستخدم خلفية الفيديو في الأسفل علامة الفيديو للتشغيل

② تستخدم وحدة المتابعة والتعليق WebScoket لإرسال واستقبال الرسائل الجديدة في الوقت الفعلي من خلال DOM وCSS3.

③ الإعجاب واستخدام الرسوم المتحركة CSS3

بعد فهم تنسيق البث المباشر، دعونا نفهم عملية البث المباشر ككل.

يمكن تقسيم عملية البث المباشر الشاملة تقريبًا إلى:

نهاية جمع الفيديو: يمكن أن يكون جهاز إدخال الصوت والفيديو على الكمبيوتر، أو الكاميرا أو الميكروفون على الهاتف المحمول، حاليًا، فيديو الهاتف المحمول هو الشيء الرئيسي.

خادم بث الفيديو المباشر: يجمع خادم Nginx دفق الفيديو (تشفير H264/ACC) المنقول من طرف تسجيل الفيديو، ويوزعه وترميزه على جانب الخادم، ويدفع دفق الفيديو بتنسيق RTMP/HLS إلى نهاية تشغيل الفيديو.

مشغل الفيديو: يمكن أن يكون المشغل على الكمبيوتر (QuickTime Player، VLC)، أو المشغل الأصلي على الهاتف المحمول، أو علامة الفيديو H5، وما إلى ذلك. حاليًا، المشغل الأصلي على الهاتف المحمول هو المشغل الرئيسي.

(مجموعة تبادل التعلم الأمامية للويب: 328058344. الدردشة محظورة. إذا لم تكن مهتمًا، فيرجى عدم الدخول!)

لتسجيل فيديو H5، يمكنك استخدام webRTC (اتصال الويب في الوقت الحقيقي)، وهي تقنية تدعم متصفحات الويب لإجراء محادثات صوتية أو محادثات فيديو في الوقت الفعلي. العيب هو أنها مدعومة بشكل جيد فقط على Chrome على جهاز الكمبيوتر وليس جيدًا جدًا على الأجهزة المحمولة.

العملية الأساسية لتسجيل الفيديو باستخدام webRTC

① استدعاء window.navigator.webkitGetUserMedia()

احصل على بيانات فيديو كاميرا الكمبيوتر الشخصي للمستخدم.

② تحويل بيانات دفق الفيديو التي تم الحصول عليها إلى window.webkitRTCPeerConnection

(تنسيق بيانات دفق الفيديو).

③ استخدم WebScoket

نقل بيانات دفق الفيديو إلى الخادم.

يلاحظ:

على الرغم من قيام Google بالترويج لـ WebRTC، وظهور العديد من المنتجات الناضجة، إلا أن معظم متصفحات الهاتف المحمول لا تدعم بعد webRTC (أحدث إصدار iOS 10.0 لا يدعمه)، لذلك لا يزال تسجيل الفيديو الحقيقي يعتمد على العميل (iOS، Android)، والتأثير سيكون أفضل.

دعم ويب آر تي سي

دعم ويب آر تي سي

يقوم تطبيق iOS الأصلي باستدعاء الكاميرا لتسجيل عملية الفيديو

① بالنسبة لجمع الصوت والفيديو، يمكن جمع دفق بيانات الصوت والفيديو الأصلي باستخدام AVCaptureSession وAVCaptureDevice.

② تشفير H264 للفيديو وAAC للصوت توجد مكتبات تشفير مغلفة (ترميز x264، وترميز faac، وترميز ffmpeg) في iOS لتشفير الصوت والفيديو.

③ قم بتجميع بيانات الصوت والفيديو المشفرة في حزم.

④ أنشئ اتصال RTMP وادفعه إلى الخادم.

5. بناء نانوغرام

قم بتثبيت nginx، nginx-rtmp-module

① قم أولاً باستنساخ مشروع nginx محليًا:

الصنبور الشراب البيرة / nginx

② تنفيذ وتثبيت وحدة nginx-rtmp

قم بتثبيت nginx-full –with-rtmp-module

2. ملف التكوين nginx.conf، وقم بتكوين RTMP وHLS

ابحث عن ملف التكوين nginx.conf (path/usr/local/etc/nginx/nginx.conf) وقم بتكوين RTMP وHLS.

① أضف محتوى تكوين rtmp قبل عقدة http:

② أضف تكوين hls في http

أعد تشغيل خدمة nginx، وأدخل http://localhost:8080 في المتصفح، وتحقق من ظهور واجهة الترحيب لتأكيد إعادة تشغيل nginx بنجاح.

إعادة تحميل nginx -s

عندما يستقبل الخادم دفق الفيديو المنقول من نهاية تسجيل الفيديو، فإنه يحتاج إلى تحليله وترميزه ودفع دفق الفيديو بتنسيق RTMP/HLS إلى مشغل الفيديو. حلول مكتبة التشفير الشائعة شائعة الاستخدام، مثل تشفير x264، وترميز faac، وترميز ffmpeg، وما إلى ذلك. نظرًا لأن أداة FFmpeg تدمج العديد من ترميزات تنسيقات الصوت والفيديو، فيمكننا إعطاء الأولوية لاستخدام FFmpeg لتحويل التنسيق والتشفير والبث.

1. قم بتثبيت أداة FFmpeg

قم بتثبيت ffmpeg

2. دفع ملفات MP4

عنوان ملف الفيديو:/Users/gao/Desktop/video/test.mp4

عناوين البث بالدفع والسحب: rtmp://localhost:1935/rtmplive/home، rtmp://localhost:1935/rtmplive/home

 // دفق بروتوكول RTMP ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//دفق بروتوكول HLS ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

يلاحظ:

بعد أن ندفع الدفق، يمكننا تثبيت VLC وffplay (مشغل فيديو يدعم بروتوكول rtmp) لسحب الدفق محليًا للعرض التوضيحي.

① ملفات الفيديو للبث المباشر

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101: 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② كاميرا البث المباشر + تسجيل سطح المكتب + الميكروفون للبث المباشر

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -set فائق السرعة مسبقًا /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

لمزيد من الأوامر يرجى الرجوع إلى:

قائمة كاملة بأوامر FFmpeg لمعالجة وسائط دفق RTMP

أوامر الدفق شائعة الاستخدام FFmpeg

تدعم كل من المحطات المتنقلة iOS وAndroid بشكل طبيعي بروتوكول HLS بعد انتهاء مجموعة الفيديو وخدمة دفع دفق الفيديو، يمكنك تكوين علامة الفيديو مباشرة على صفحة H5 لتشغيل الفيديو المباشر.

 <عناصر تحكم الفيديو التحميل المسبق=التشغيل التلقائي التلقائي=حلقة التشغيل التلقائي=حلقة webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >متصفحك لا يدعم فيديو HTML5.</p></video>

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

① يجب أن يكون تقييد H5 HLS بتشفير H264+AAC.

② مشكلة تشغيل H5 HLS عالقة. يمكن لجانب الخادم تنفيذ استراتيجية تجزئة، ووضع ملفات ts على CDN، ويمكن للواجهة الأمامية محاولة تنفيذ التخزين المؤقت لـ DNS، وما إلى ذلك.

③ من أجل تحقيق تفاعل أفضل في الوقت الفعلي، يمكن للبث المباشر لـ H5 أيضًا استخدام بروتوكول RTMP وتحقيق التشغيل من خلال video.js.

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