تجربة استخدام WebRTC. محاضرة ياندكس

ما الأفضل لاستخدامه عند تطوير البرامج - تقنيات أصلية أو تقنيات ويب؟ لن ينتهي Holivar حول هذا الموضوع قريبًا ، لكن القليل سيجادل في أنه من المفيد تكرار الوظائف الأصلية للاستخدام في المتصفحات أو WebView. وإذا كانت تطبيقات المكالمات موجودة بشكل منفصل حصريًا عن المتصفح ، فمن السهل الآن تنفيذها على الويب. شرح المطور Grigory Kuznetsov كيفية استخدام تقنية WebRTC لاتصالات P2P.


- كما تعلمون جميعًا ، في السنوات الأخيرة كان هناك الكثير من التطبيقات القائمة على التبادل المباشر للبيانات بين متصفحين ، أي P2P. هذه هي جميع أنواع الرسائل الفورية والدردشات والطلبات ومؤتمرات الفيديو. قد تكون أيضًا تطبيقات تؤدي نوعًا من الحوسبة الموزعة. حدود الخيال ليست محدودة بأي شكل من الأشكال.

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

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

بادئ ذي بدء ، تقنية Adobe Flash القديمة التي تحتضر. إنها تموت حقًا ، وستتوقف Adobe عن دعمها بحلول عام 2020. ستسمح لك التكنولوجيا حقًا بالوصول إلى أجهزة الوسائط الخاصة بك ، حيث يمكنك من خلالها تنفيذ جميع الآليات اللازمة لمساعدة المتصفحات على الاتصال ، بحيث تبدأ في نقل معلومات P2P ، ولكنك ستبتكر دراجتك مرة أخرى ، لأنه لا يوجد معيار واحد ، وهو نهج واحد لتنفيذ هذه الطريقة نقل البيانات.

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

وهناك تقنية WebRTC - تعمل Google Hangouts و Facebook Messenger معها. يستخدمه Voximplant حتى تتمكن من إجراء مكالماتك. دعونا نتناولها بمزيد من التفصيل. هذه تقنية جديدة متطورة ، ظهرت في عام 2011 وتستمر في التطور. ماذا تسمح لها أن تفعل؟ الحصول على الكاميرا والميكروفون. قم بإنشاء اتصال P2P بين جهازي كمبيوتر ومتصفحين. بطبيعة الحال ، يسمح لك بنقل تدفقات الوسائط في الوقت الحقيقي. بالإضافة إلى ذلك ، يسمح لك بنقل المعلومات ، أي أي تاريخ ثنائي ، يمكنك أيضًا نقل P2P ، يمكنك إنشاء نظام الحوسبة الموزع الخاص بك.

نقطة مهمة: لا يوفر WebRTC للمتصفحات طريقة للعثور على بعضها البعض. يمكننا إنشاء جميع المعلومات الوصفية اللازمة عن أحبائنا ، ولكن كيف يمكن لمتصفح واحد أن يتعرف على وجود متصفح آخر؟ كيفية توصيلها؟ تأمل في مثال.



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

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

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

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

دعونا نلقي نظرة فاحصة على ما يتبادله العملاء بالضبط ؛ إنهم يتبادلون مخطط بيانات SDP ، بروتوكول وصف الجلسة.



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

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



دعنا نتنحى ونرى كيف يعمل NAT. على الإنترنت ، يتم إخفاء العديد من أجهزة الكمبيوتر خلف أجهزة التوجيه. هناك شبكات محلية تعرف فيها أجهزة الكمبيوتر عناوينها ، وهناك جهاز توجيه له عنوان IP خارجي ، وتلتزم جميع أجهزة الكمبيوتر هذه بعنوان IP الخاص بجهاز التوجيه هذا. عندما تنتقل حزمة من جهاز كمبيوتر موجود على الشبكة المحلية إلى جهاز التوجيه ، ينظر جهاز التوجيه في مكان إعادة توجيهه. إذا كان على شبكة أخرى من هذه الشبكة المحلية ، فإنه ببساطة يقوم بترحيلها ، وإذا كنت بحاجة إلى إرسالها للخارج ، إلى الإنترنت ، يتم تجميع جدول التوجيه.



نقوم بملء عنوان IP الداخلي للكمبيوتر الذي يريد إعادة توجيه الحزمة ومنفذها وتعيين عنوان IP الخارجي وعنوان IP الخاص بالموجه ، كما نقوم بتغيير المنفذ. ما هو؟ تخيل وصول جهازي كمبيوتر إلى نفس المورد ، ونحتاج إلى توجيه حزم الاستجابة بشكل صحيح. سنقوم بتحديدها حسب المنفذ ، سيكون المنفذ فريدًا لكل جهاز كمبيوتر ، بينما سيتطابق عنوان IP الخارجي.

كيف نعيش إذا كان هناك NAT ، إذا بقيت أجهزة الكمبيوتر تحت عنوان IP نفسه ، ولكن من الداخل يعرفون بعضهم البعض عن طريق الآخر؟

يأتي إطار عمل ICE الخاص بتأسيس اتصال الإنترنت لإنقاذه. يصف طرق تجاوز NAT ، وكيفية إنشاء اتصال إذا كان لدينا NAT.

يستخدم هذا الإطار ما يسمى سمة خادم STUN.



هذا خادم خاص ، في إشارة إلى أنه يمكنك معرفة عنوان IP الخارجي الخاص بك. وبالتالي ، أثناء عملية إنشاء اتصال P2P ، يجب على كل عميل تقديم طلب إلى خادم STUN هذا من أجل معرفة عنوان IP الخاص به ، وإنشاء معلومات إضافية ، IceCandidate ، وكذلك استخدام IceCandidate لتبادل آلية الإشارات هذه. ثم سيعرف العملاء عن بعضهم البعض باستخدام عناوين IP الصحيحة ، وسيكونون قادرين على إنشاء اتصال P2P.

ومع ذلك ، هناك حالات أكثر تعقيدًا. على سبيل المثال ، عندما يكون الكمبيوتر مخفيًا خلف NAT مزدوج. في هذه الحالة ، يتطلب إطار عمل ICE استخدام خادم TURN.



هذا خادم خاص يحول اتصال العميل - العميل ، P2P ، إلى اتصال عميل - خادم - عميل ، أي أنه يعمل كترحيل. الخبر السار للمطورين هو أنه بغض النظر عن أي من السيناريوهات الثلاثة التي تم الاتصال بها ، سواء كنا على الشبكة المحلية ، أو إذا كنا بحاجة إلى التحول إلى خادم STUN أو TURN ، فإن تقنية API ستكون متطابقة بالنسبة لنا. نشير ببساطة في البداية إلى تكوين خوادم ICE و TURN ، ونشير إلى كيفية الوصول إليها ، وبعد ذلك تقوم التكنولوجيا بكل شيء بالنسبة لنا تحت غطاء المحرك.



ملخص قصير. لإنشاء اتصال ، تحتاج إلى تحديد وتنفيذ نوع من آلية الإشارة ، وسيط معين سيساعدنا في إرسال المعلومات الوصفية. سيقدم لنا WebRTC كل ما يلزم من البيانات الوصفية لذلك.

علينا أن نقاتل مع NAT ، وهذا هو عدونا الرئيسي في هذه المرحلة. ولكن للتغلب على ذلك ، نستخدم خادم STUN لمعرفة عنوان IP الخارجي الخاص بنا ، ونستخدم خادم TURN كترحيل.

ما الذي نرسله بالضبط؟ حول تدفقات الوسائط.



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

كيفية الوصول إلى الوسائط من متصفح؟ لنتحدث عن API.



هناك طريقة getUserMedia تقبل مجموعة من الثوابت كمدخل. هذا كائن خاص حيث تشير إلى الأجهزة التي تريد الوصول إليها ، والكاميرا ، والميكروفون. يمكنك تحديد الخصائص التي تريدها ، أي دقة ، وهناك أيضًا وسيطتان - SuccessCallback و errorCallback ، والتي يتم استدعاؤها في حالة النجاح أو الفشل. المزيد من تطبيقات التكنولوجيا الحديثة تستخدم الوعود.

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



الكائن المركزي في API هو RTCPeerConnection. عندما نقوم بالاتصال ، نأخذ فئة RTCPeerConnection ، التي تُرجع كائن peerConnection. كتكوين ، نحدد مجموعة من خوادم ICE ، وهي خوادم STUN و TURN ، والتي سنصل إليها أثناء عملية التثبيت. وهناك حدث مهم واحد مرئي يتم تشغيله في كل مرة نحتاج فيها إلى المساعدة من آلية الإشارة الخاصة بنا. أي أن تقنية WebRTC قدمت طلبًا ، على سبيل المثال ، إلى خادم STUN ، وتعرفنا على عنوان IP الخارجي الخاص بنا ، وظهر ICECandidate جديد ، ونحتاج إلى إعادة توجيهه باستخدام آلية خارجية ، كان الحدث أكثر صرامة.



عندما ننشئ اتصالًا ونرغب في تهيئة المكالمة ، فإننا نستخدم طريقة createOffer () لتشكيل SDP الأولي ، ونقدم SDP ، وهي نفس معلومات التعريف التي يجب إرسالها إلى الشريك.

لتعيينه على PeerConnection ، نستخدم طريقة setLocalDescription (). يتلقى المحاور هذه المعلومات عن طريق آلية الإشارات ، ويقوم بتعيينها لنفسه باستخدام طريقة setRemoteDescription () ، ويقوم بإنشاء استجابة باستخدام طريقة createAnswer () ، والتي يتم إرسالها أيضًا إلى العميل الأول باستخدام آلية الإشارات.



عندما وصلنا إلى الوسائط ، حصلنا على دفق الوسائط ، ننقله إلى اتصال P2P الخاص بنا باستخدام طريقة addStream ، ويكتشف محاورنا ذلك ، لديه حدث onaddstream قلص. سوف يتلقى تيارنا وسيكون قادراً على عرضه.



يمكنك أيضًا العمل مع تدفقات البيانات. وهي تشبه إلى حد كبير تكوين peerConnection عادي ، فقط حدد RtpDataChannels: true واستدعي طريقة createDataChannel (). لن أسهب في الحديث عن هذا بالتفصيل ، لأن هذا العمل مشابه جدًا للعمل مع مآخذ الويب.

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



بالنسبة لدعم المتصفح - يبقى IE ويبقى أحمر. في نهاية العام الماضي ، تمت إضافة دعم Safari ، أي أن جميع المتصفحات الحديثة قادرة بالفعل على العمل مع هذه التقنية ويمكننا استخدامها بأمان.

أريد مشاركة مجموعة من جميع أنواع الأدوات المساعدة التي ستساعدك إذا كنت ترغب في العمل مع WebRTC. هذا هو محول في المقام الأول. تتطور التقنيات باستمرار ، وهناك اختلاف في واجهات برمجة تطبيقات المتصفح. تقضي مكتبة المحولات على هذا الاختلاف وتجعل العمل أسهل. مكتبة ملائمة للعمل مع تدفقات البيانات هي Peerjs . يمكنك أيضًا إلقاء نظرة على تطبيقات المصدر المفتوح لخوادم STUN و TURN . توجد مجموعة كبيرة من الدروس والأمثلة والمقالات على صفحة webrtc الرائعة ، أوصي بها بشدة.

آخر أداة مفيدة لتصحيح الأخطاء هي webrtc-internals. أثناء التطوير ، يمكنك كتابة أمر خاص في شريط العناوين - على سبيل المثال ، في متصفح Chrome ، هذا هو Chrome: // webrtc-internals. سترى صفحة تحتوي على جميع المعلومات حول اتصال WebRTC الحالي. سيكون هناك تسلسل من المكالمات في الأساليب ، ويتم تبادل جميع مخططات البيانات بين المتصفحات ، والرسوم البيانية التي تميز اتصالك بطريقة أو بأخرى. بشكل عام ، سيكون هناك كل المعلومات التي ستكون مطلوبة أثناء التصحيح والتطوير. شكرا لكم على اهتمامكم.

Source: https://habr.com/ru/post/ar419951/


All Articles