تدفق مكالمة فيديو RTMP

اليوم ، أصبحت منصات البث المباشر في ذروة شعبيتها ، حيث يشارك ملايين من الموهوبين بانتظام معارفهم - قراءة ، يستخدمون البث على أكمل وجه. نظرًا لتنامي هذا السوق ، هناك العديد من التطبيقات التي يمكنها بث الفيديو المباشر باستخدام كاميرا الهاتف الذكي أو الكمبيوتر المحمول. ربما تريد أيضًا إدخال هذه الوظيفة في التطبيق الخاص بك ؛ إذا كان الأمر كذلك ، فإننا نسارع إلى الإرضاء - الآن يسمح لك Voximplant بإعادة توجيه مكالمات الفيديو عبر RTMP إلى أي CDN يدعم هذا البروتوكول.

أصبحت هذه الوظيفة ممكنة بفضل وحدة Voxengine الجديدة - StreamingAgent . تحت الخفض الذي تنتظره 5 خطوات لتكوين هذا التكامل ، مرحبًا!

مخطط

تأتي مكالمة الفيديو من أحد تطبيقات الجوال / الويب أو SIP إلى السحابة الخاصة بنا ، والتي توجهها إلى CDN المتدفقة. بدوره ، يرسل CDN دفق الصوت والفيديو إلى المستخدمين النهائيين - كما يفعل عادة. يرجى ملاحظة أن RTMP يدعم H.264 فقط ، لذلك من المهم جدًا تحديد برنامج الترميز هذا بوضوح عند التدفق.

سوف تحتاج

• حساب على خدمة البث ، على سبيل المثال ، Twitch أو Youtube ؛
• حساب Voximplant. إذا لم يكن لديك ذلك ، فسيتم التسجيل هنا ؛
• تطبيق Voximplant ، بالإضافة إلى برنامج نصي وقاعدة ومستخدم واحد. سننشئ كل هذا في هذا البرنامج التعليمي ؛
• عميل الويب لالتقاط الفيديو والصوت - سنستخدم دردشة الفيديو التوضيحية لدينا

1. إعدادات التدفق

بادئ ذي بدء ، ستحتاج إلى الحصول على قيم المعلمتين ، والتي نستخدمها في البرنامج النصي السحابي - اسم / مفتاح الدفق وعنوان URL الخاص بالخادم . يوضح التالي كيفية الحصول على هذه القيم باستخدام Twitch و YouTube كأمثلة.

نشل

تسجيل الدخول إلى حسابك ، انقر على صورة الملف الشخصي في الزاوية اليمنى العليا واختر Video Producer.



في قسم "الإعدادات" ، حدد "قناة" ، ثم انقر فوق "نسخ" في أعلى الصفحة للحصول على مفتاح الدفق الأساسي. يرجى ملاحظة أن المفتاح متاح فقط مع تنشيط المصادقة الثنائية. الصق هذه القيمة في محرر النصوص أو اترك هذه الصفحة مفتوحة لنسخ القيمة لاحقًا.

للعثور على عنوان url الخاص بالخادم ، انتقل إلى صفحة stream.twitch.tv/ingests ، وحدد أحد الخوادم الموصى بها وانسخها دون الشرطة المائلة الأخيرة ، على سبيل المثال: rtmp: //live-sfo.twitch.tv/app

يوتيوب

سجّل الدخول إلى حسابك ، وانقر على الصورة الرمزية في الزاوية العلوية اليمنى وحدد YouTube Studio (تجريبي).



إذا لم يكن لديك قناة على YouTube ، فسيظهر مربع حوار حول إنشاء قناة. انقر فوق "إنشاء قناة" وسترى لوحة تحكم للقناة التي تم إنشاؤها مع إشعار بأن البث سيكون ممكنًا خلال 24 ساعة.



أثناء تواجدك في YouTube Studio ، انتقل إلى ميزات أخرى -> البث المباشر الآن من خلال القائمة الموجودة على اليسار. يتم فتح صفحة جديدة ، في أسفلها كتلة إعداد Encoder. من هنا ، تحتاج إلى أخذ عنوان URL للخادم وقيم اسم / دفق القيم (أو ترك الصفحة مفتوحة).

2. إعدادات VOXIMPLANT

الآن تحتاج إلى إجراء الإعدادات من جانب Voximplant. سجل الدخول أولاً إلى حسابك: https://manage.voximplant.com/auth . في القائمة الموجودة على اليسار ، انقر فوق "التطبيقات" ، ثم "تطبيق جديد" وإنشاء تطبيق يسمى الدفق. انتقل إلى التطبيق الجديد ، وانتقل إلى علامة التبويب "البرامج النصية" لإنشاء برنامج نصي لبدء التشغيل باستخدام هذا الرمز (لا تنسَ استبدال القيم من الخطوة السابقة في السطور 8 و 9):

require(Modules.StreamingAgent); VoxEngine.setVideoCodec("H264"); VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); e.call.sendMediaTo(streaming); streaming.addEventListener(StreamingAgentEvents.Connected, function (e) { Logger.write("LOG: StreamingAgentEvents.Connected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Disconnected, function (e) { Logger.write("LOG: StreamingAgentEvents.Disconnected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.ConnectionFailed, function (e) { Logger.write("LOG: StreamingAgentEvents.ConnectionFailed: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Error, function (e) { Logger.write("LOG: StreamingAgentEvents.Error: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStarted, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStarted: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamError, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamError: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStopped, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStopped: " + e.reason); }); e.call.answer(); e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); }); 

هذا هو برنامج نصي بسيط يبدأ دفقًا ويتولى أيضًا مراقبة جميع حالاته المحتملة ، مثل: متصل ، فشل الاتصال ، بدء تشغيل StreamStart ، إلخ. - تفاصيل البرنامج النصي ستكون أقل قليلا. تحتاج الآن إلى الانتقال إلى علامة التبويب "التوجيه" في طلبك والنقر على "قاعدة جديدة". سمّها streamRule ، حدد البرنامج النصي startStream واترك القناع الافتراضي (. *).


آخر ما يجب فعله في هذه المرحلة هو إنشاء مستخدم. انتقل إلى علامة التبويب "المستخدمون" ، وانقر فوق "إنشاء مستخدم" ، وحدد اسمًا (على سبيل المثال ، user1) وكلمة المرور ، ثم انقر فوق "إنشاء". سنحتاج إلى زوج اسم المستخدم / كلمة المرور هذا للمصادقة في عميل الويب.


اكتمال تكوين Voximplant ، لكن قبل أن ننتقل إلى عميل الويب ، أقترح أن نفهم كيف تعمل وحدة StreamingAgent في السيناريو الخاص بنا.

3. السيناريو

تتيح وحدة StreamingAgent للمطورين تشغيل تدفقات RTMP إلى منصات التحفيز الشائعة. لاستخدام وظيفة الوحدة ، يجب أن نقوم بتوصيلها في بداية البرنامج النصي:

 require(Modules.StreamingAgent); 

بعد ذلك ، يجب عليك تحديد برنامج الترميز بشكل صريح سيتم استخدامه عند التدفق. نظرًا لأن العديد من المنصات (بما في ذلك Twitch و YouTube) تستخدم RTMP ، والتي بدورها تدعم H.264 ، فهذا ما سنشير إليه:

 VoxEngine.setVideoCodec("H264"); 

إذا لم يتم تحديد برنامج الترميز ، فقد يتم رفع الحدث StreamingAgentEvents.StreamError ، والذي يحتوي على نص الخطأ:

 "Video codec mismatch. " + codecName + " granted, but should be H.264" 

ثم نضيف معالجًا لحدث CallAlerting للتعامل مع مكالمة الفيديو من عميل الويب (نعم ، سنصل إليها قريبًا). بادئ ذي بدء ، سنضيف مكالمة إلى أسلوب createStreamingAgent إلى المعالج . تحتوي الطريقة على المعلمات التالية ، معظمها مطلوب ، ويتم تمييزها بشكل منفصل:

• بروتوكول - حتى الآن يتم دعم RTMP فقط ؛
• عنوان URL - الخادم ، انظر الخطوة 1 ؛
• streamName - اسم / مفتاح الدفق ، راجع الخطوة 1 ؛
• applicationName (اختياري) - جزء من streamName ، على سبيل المثال live2. استخدم هذا الخيار إذا كان النظام الأساسي المحدد يتطلب ذلك ؛
• keyframeInterval (اختياري ، ثانية) - عدد مرات إنشاء إطار المفتاح في الدفق. إذا لم تكن محددة ، فإن القيمة الافتراضية هي 2.

في قائمة البرامج النصية أعلاه ، تبدو الدعوة إلى أسلوب createStreamingAgent كما يلي:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); 

ولكن يمكننا حذف keyframeInterval واستخدام applicationName ، مثل هذا:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://a.rtmp.youtube.com/", applicationName: "live2", streamName: "somename" }); 

بعد إنشاء كائن الدفق ، يستمر البرنامج النصي في معالجة المكالمة داخل المعالج. تتمثل الخطوة التالية في توجيه دفق الفيديو الوارد من عميل الويب إلى كائن الدفق الذي تم إنشاؤه:

 e.call.sendMediaTo(streaming); 

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

بعد معالجة الأحداث ، يرد البرنامج النصي على المكالمة الواردة:

 e.call.answer(); 

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

 e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); 

من خلال فهم منطق السيناريو ، نحن على استعداد لبدء الجزء الأخير - وليس الأقل - من التكوين الخاص بنا.

4. عميل الويب

استنساخ أو قم بتنزيل عرض الفيديو الخاص بنا. ثم انتقل إلى مجلد المخزون وافتح ملف WebApp / JS / app.js في محرر نصوص / IDE. قم بتغيير اسم التطبيق في السطر 5 واحفظ الملف:


في الواقع ، هذا كل شيء.

5. بدء التدفق

تحتاج إلى تشغيل مجلد WebApp محليًا أو على خادم الويب الخاص بك. للتشغيل محليًا ، يمكنك استخدام الأداة المساعدة للخادم المباشر أو خادم الويب لتطبيق Chrome . عند بدء تشغيل عميل الويب ، يجب أن تعطيه اسم حساب Voximplant الخاص بك ، على سبيل المثال:

  http://127.0.0.1:8080/index.html#accname=johngalt 

بعد بدء تشغيل العميل ، أدخل زوج كلمة مرور تسجيل الدخول من الخطوة 2:


أدخل أي مجموعة أحرف بجانب العلامة @ واضغط على Call. إذا تم كل شيء بشكل صحيح ، فستبدأ ساحة مشاركاتك قريبًا :) تدفقات ناجحة وتنمية إنتاجية لك