اليوم، Webrtc هي تقنية ساخنة لتدفق الصوت والفيديو في المتصفحات. تكنولوجيات المحافظة، مثل تدفق HTTP وفلاش، أكثر ملاءمة لتوزيع المحتوى المسجل (الفيديو عند الطلب) وأدنى بشكل كبير من WebRTC من حيث الفترة من الوقت الفعلي والبث عبر الإنترنت، أي حيث يلزم الحد الأدنى من تأخير الفيديو، مما يسمح للجمهور بمعرفة ما يحدث "مباشر".

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

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

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

من أجل التحقق من تقنية WebRTC في القضية وتشغيل البث البسيط عبر الإنترنت على ذلك، استخدمنا الخادم على خادم Flashphoner Webrtc Media وخادم البث. في الميزات، القدرة على بث تدفقات Webrtc في واحدة إلى العديد من الوضع "(واحد إلى Maany)، وكذلك دعم كاميرات IP وأنظمة مراقبة الفيديو من خلال بروتوكول RTSP؛ في هذا الاستعراض، نركز على البث على شبكة الإنترنت وميزاتها.

تثبيت Webrtc Media & Broadcasting Server

نظرا لأن نظام إصدار الخادم لم يكن للنوافذ، فإنه لا يرغب في تثبيت نوع VMWare + Linux الظاهري، واختبار البث عبر الإنترنت على كمبيوتر Windows Home لم يعمل. من أجل توفير الوقت قررت أخذ حالات على استضافة سحابة مثل هذا:

كان Centos X86_64 الإصدار 6.5 دون أي برنامج مثبت مسبقا في مركز البيانات في أمستردام. وبالتالي، فإن كل ما تلقيناه متاح هو الخادم والوصول إلى SSH إليها. بالنسبة لأولئك الذين هم على دراية بأوامر وحدة التحكم Linux، يعد تثبيت خادم Webrtc بالذهاب بسهولة وغير مؤلمة. إذن ما فعلناه:

1. تحميل الأرشيف:

$ wget https: //syt/download-wcs5-server.tar.gz

2. أفرغ

$ tar -xzf تنزيل-wcs5-server.tar.gz

3. تثبيت:

$ cd flashphonerwebcallserver.

أثناء تثبيت عنوان IP للخادم: xxx.xxx.xxx.xxx

4. تنشيط الترخيص:

$ cd / usr / المحلية / flashphonerwebcallserver / bin

$. / التنشيط

5. تشغيل خادم WCS:

$ خدمة WebCallServer ابدأ

6. تحقق من السجل:

$ الذيل - f /usr/local/flashphonerwebcallserver/logs/flashphoner_manager.log

7. تحقق من أن عملية اثنين في المكان:

PS Aux | Grep Flashphoner.

اكتمال عملية التثبيت.

اختبار Webrtc البث عبر الإنترنت

تحولت عمليات الاختبار إلى غير موصوفة. بالإضافة إلى الخادم، يوجد عميل ويب يتكون من عشرة جافا سكريبت وملفات HTML و CSS وتم نشره على مجلد / var / www / html في مرحلة التثبيت. الشيء الوحيد الذي كان يجب القيام به هو إدخال عنوان IP الخاص بالخادم لتكوين Flashphoner.xml بحيث يمكن لعميل الويب الاتصال بخادم WebSockets HTML5. وصفنا عملية الاختبار.

1. افتح صفحة عميل اختبار Index.html في متصفح Chrome:

2. من أجل بدء البث، تحتاج إلى النقر فوق الزر "ابدأ" في منتصف الشاشة.
قبل أن تفعل ذلك، تحتاج إلى التأكد من أن كاميرا الويب متصلة وجاهزة للعمل. لا توجد متطلبات خاصة لكاميرا الويب، على سبيل المثال، استخدم الكاميرا القياسية المدمجة في الكمبيوتر المحمول بدقة 1280 × 800.

بالتأكيد سيسطل متصفح Chrome الوصول إلى الكاميرا والميكروفون من أجل فهم المستخدم أنه سيتم إرسال مقطع الفيديو الخاص به إلى خادم الإنترنت وسمح له بذلك.

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

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

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

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

Webrtc نتائج اختبار خادم الترجمة عبر الإنترنت

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

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

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

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

اختبار الفيديو البث من كاميرا الويب
عبر خادم Webrtc

WebRTC (الاتصالات في الوقت الحقيقي على الويب) هو قياسي يصف نقل بيانات الصوت بثبات الصوت وبيانات الفيديو والمحتوى من المتصفح وإلى المتصفح في الوقت الفعلي دون تثبيت المكونات الإضافية أو الملحقات الأخرى. يتيح لك المعيار تحويل المستعرض إلى محطة المحطة الطرفية لمؤتمرات الفيديو، ما عليك سوى فتح صفحة الويب لبدء التواصل.

ما هو Webrtc؟

في هذه المقالة، سننظر في كل ما تحتاج لمعرفته حول تقنية Webrtc للمستخدم العاديين. النظر في مزايا وعيوب المشروع، تكشف عن بعض الأسرار، وسوف نخبرك كيف تعمل، حيث وماذا يتم تطبيق WebTC.

ما تحتاج لمعرفته حول Webrtc؟

تطور المعايير والتقنيات الاتصالات الفيديو

سيرجي Yutzaytis، سيسكو، فيديو + مؤتمر 2016

كيف يعمل Webrtc

على جانب العميل

• يقوم المستخدم بفتح صفحة تحتوي على علامة HTML5
• يطلب المتصفح الوصول إلى كاميرا ويب وميكروفون المستخدم.
• يتحكم رمز JavaScript في صفحة المستخدم في التحكم في معلمات الاتصال (عناوين IP و Webrtc Server أو عملاء Webrtc الآخر) لتجاوز NAT و WARTEWALL.
• عند تلقي معلومات حول المحاور أو دفق مع المؤتمر، يبدأ المتصفح في مطابقة برامج ترميز الصوت والفيديو المستخدمة.
• تبدأ عملية ترميز وتحويل بيانات البث بين عملاء Webrtc (في حالتنا، بين المتصفح والخادم).

على جانب خادم Webrtc

بالنسبة لتبادل البيانات بين المشاركين، لا يلزم خادم الفيديو، ولكن إذا كنت بحاجة إلى الجمع بين العديد من المشاركين في مؤتمر واحد، فإن الخادم ضروري.

سيتلقى خادم الفيديو حركة مرور الوسائط من مصادر مختلفة، وتحويله وإرساله إلى المستخدمين الذين يستخدمون WebRTC كحطة.

سوف يتلقى WebRTC Server أيضا حركة مرور الوسائط من Peters Webrtc ونقل المشاركين في المؤتمر الذين يستخدمون التطبيقات لأجهزة الكمبيوتر المكتبية أو الأجهزة المحمولة، إن وجدت.

مزايا المعيار

• لا يلزم التثبيت.
• الاتصالات ذات جودة عالية جدا بسبب:
  • باستخدام الفيديو الحديث (VP8، H.264) ورمادي الصوت (OPUS).
  • التعديل التلقائي لجودة الدفق تحت حالة الاتصال.
  • مدمج في نظام الصدى والحد من الضوضاء.
  • التعديل التلقائي لحساسية الميكروفونات للمشاركين (ARU).
• ارتفاع الأمان: جميع الاتصالات محمية ومشفرة وفقا لبروتوكولات TLS و SRTP.
• هناك آلية استغلال محتوى مدمجة، مثل سطح المكتب.
• القدرة على تنفيذ أي واجهة إدارة HTML5 و JavaScript.
• القدرة على دمج واجهة مع أي أنظمة خلفية باستخدام WebSockets.
• مشروع مفتوح المصدر - يمكن تنفيذها في المنتج أو الخدمة الخاصة بك.
• Real Cross-Platform: سيعمل تطبيق Webrtc نفسه بشكل جيد بنفس القدر على أي نظام تشغيل أو سطح المكتب أو الهاتف المحمول، شريطة أن يدعم المستعرض WebRTC. هذا يحفظ بشكل كبير الموارد لتطوير البرامج.

عيوب المعيار

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

أسرار WebRTC: كيف يستفيد البائعون من تقنية الويب اختراق

Tsakhi Levent Levi، Bloggeek.me، فيديو + مؤتمر 2015

Webrtc للسوق VKS

زيادة عدد محطات VKS

كان لدى Webrtc Technology تأثير قوي على تطوير سوق VKS. بعد مغادرته المتصفحات الأولى بدعم WebRTC في عام 2013، ارتفع عدد محطات مؤتمرات الفيديو المحتملة في جميع أنحاء العالم بمقدار مليار جهاز. في جوهرها، أصبح كل متصفح محطة CSM، وليس أدنى من نظائر الأجهزة الخاصة به من وجهة نظر العطاءات.

استخدام في الحلول المتخصصة

باستخدام العديد من مكتبات JavaScript و Webrtc Cloud Service API يتيح لك إضافة دعم ارتباط الفيديو بسهولة إلى أي مشاريع ويب. في السابق، نقل البيانات في المطورين في الوقت الفعلي، كان من الضروري دراسة مبادئ البروتوكولات واستخدام تطورات الشركات الأخرى التي طالب في معظم الأحيان بترخيص إضافي، مما زاد من التكاليف. بالفعل، يتم استخدام WebRTC بنشاط في "موقع الاتصال"، "دعم الدردشة عبر الإنترنت"، إلخ.

المستخدمين السابقين سكايب لينكس

في عام 2014، أعلنت Microsoft عن إنهاء دعم مشروع Skype لنظام Linux، الذي تسبب في تهيج كبير من أخصائيي تكنولوجيا المعلومات. لا يتم ربط تقنية Webrtc بنظام التشغيل، وتنفيذها على مستوى المتصفح، أي سيتمكن مستخدمو Linux من رؤية المنتجات والخدمات القائمة على استبدال Skype الكامل WebRTC.

المنافسة مع فلاش.

أصبحت Webrtc و HTML5 ضربة قاتلة لتكنولوجيا الفلاش، والتي والقلق جدا من بعيد عن أفضل سنوات. منذ عام 2017، توقفت المتصفحات الرائدة رسميا لدعم الفلاش والتكنولوجيا اختفت أخيرا من السوق. لكنك تحتاج إلى إعطاء فلاش مستحقا، بعد كل شيء كان من قام بإنشاء سوق مؤتمرات الويب والفرص التقنية المقترحة للاتصالات الحية في المتصفحات.

عرض الفيديو Webrtc.

ديمتري أودينتسوف، ترويسونف، فيديو + مؤتمر أكتوبر 2017

برامج الترميز في Webrtc.

ترميز الصوت

لضغط حركة مرور الصوت في Webrtc، يتم استخدام برامج الترميز OPUS و G.711.

G.711. - أقدم ترميز صوت مع معدل بت كبير (64 كيلو بت في الثانية)، والذي يستخدم في معظم الأحيان في أنظمة الاتصالات الهاتفية التقليدية. الميزة الرئيسية هي الحد الأدنى للحمل الحسابي بسبب استخدام خوارزميات ضغط الضوء. تتميز برنامج الترميز بمستوى منخفض من ضغط إشارة الصوت ولا يؤدي إلى تأخير صوت إضافي أثناء الاتصال بين المستخدمين.

يتم دعم G.711 من قبل عدد كبير من الأجهزة. النظم التي يستخدم فيها برنامج الترميز هذا أسهل في الاستخدام من تلك القائمة على رموز الصوت الأخرى (G.723، G.726، G.728، إلخ.). من حيث الجودة G.711، قدرت 4.2 في اختبار MOS (تقدير في حدود 4-5 هي أعلى جودة ويعني نوعية جيدة، مماثلة لجودة انتقال حركة المرور الصوتي في ISDN وحتى أعلى).

أوبوس. - هذا هو برنامج ترميز مع تأخير ترميز منخفض (2.5 مللي ثانية إلى 60 مللي ثانية)، ودعم معدل عنب متغير ومستوى عال من الضغط، وهو مثالي لإرسال إشارة صوتية تدفق في الشبكات مع عرض النطاق الترددي المتغير. OPUS هو حل هجين يجمع بين أفضل خصائص برامج الترميز الحريرية (ضغط الصوت، وحل تشويه الكلام البشري) و Celt (ترميز البيانات الصوتية). إن برنامج الترميز هو في وصول مجاني، والمطورين الذين يستخدمونها، لا يحتاجون إلى دفع الخصومات لحاملي حقوق الطبع والنشر. بالمقارنة مع الرموز الصوتية الأخرى، يفوز OPUS، بلا شك في العديد من المؤشرات. انه eclipsed برامج ترميز شعبية للغاية مع معدل معدل منخفض، مثل MP3، Vorbis، AAC LC. يقوم OPUS باستعادة الأكبر من "الصورة" الأصلية من AMR-WB و Speex. وراء هذا الترميز - المستقبل، وهذا هو السبب في أن تكنولوجيات Webrtc قد أدرجتها في مجموعة إلزامية من المواد السارية المدعومة.

ترميز الفيديو

استغرق اختيار برنامج ترميز الفيديو ل Webrtc عدة سنوات من المطورين، نتيجة لذلك، قررنا استخدام H.264 و VP8. تقريبا جميع المتصفحات الحديثة تدعم كلا الترميز. خوادم مؤتمرات الفيديو للعمل مع WebRTC الدعم بما فيه الكفاية واحدة فقط.

VP8. - يتميز الفيديو المجاني المشفرة بترخيص مفتوح، من خلال سرعة فك التشفير من دفق الفيديو وزيادة المقاومة لفقدان الإطارات. برنامج الترميز عالمي، من السهل إدخاله في منصات الأجهزة، لذلك في كثير من الأحيان استخدام أنظمة مؤتمرات الفيديو في منتجاتهم.

برنامج ترميز الفيديو المدفوع H.264. أصبح معروفا في وقت سابق بكثير من زميله. هذا برنامج ترميز بدرجة عالية من ضغط دفق الفيديو مع الحفاظ على الفيديو عالي الجودة. تنطوي معدل الانتشار المرتفع لهذا الترميز بين أنظمة أجهزة المؤتمرات عبر الفيديو استخدامها في معيار Webrtc.

تقوم Google و Mozilla بنشاط بترويج ترميز VP8، و Microsoft و Apple و Cisco - H.264 (لضمان التوافق مع أنظمة مؤتمرات الفيديو التقليدية). وهنا مشكلة كبيرة جدا لمطوري حلول Webrtc Cloud Webrtc، لأنه إذا كان جميع المشاركين في المؤتمر يستخدمون متصفح واحد، فإن المؤتمر يكفي لخلط مرة واحدة مع برنامج ترميز واحد، وإذا كان هناك متصفحات مختلفة وهناك سفاري / حافة المتصفحات، ثم يجب ترميز المؤتمر مرتين برامج الترميز المختلفة، والتي ستضاعف متطلبات النظام لخادم الوسائط، ونتيجة لذلك، تكلفة الاشتراكات في خدمات WebRTC.

Webrtc API.

تعتمد تقنية Webrtc على ثلاثة أبيس رئيسي:

• (مسؤول عن قبول إشارة صوت ومتصفح ويب من كاميرا أو سطح مكتب المستخدم).
• rtcpeerconnection. (المسؤولة عن العلاقة بين المتصفحات ل "تبادل" المستلمة من الكاميرا والميكروفون وسطح المكتب. في "واجبات" هذه API يدخل معالجة الإشارات (تنظيفه من الغرباء، وضبط حجم الميكروفون) والتحكم فيه رموز الصوت والفيديو المستخدمة).
• قناة rtcdata (يوفر انتقال البيانات الثنائية من خلال الاتصال المحدد).

قبل الوصول إلى ميكروفون وكاميرا المستخدم، يطلب المتصفح إذن. في Google Chrome، يمكنك ضبط مقدما في قسم "الإعدادات"، في Opera و Firefox، يتم تنفيذ اختيار الأجهزة مباشرة في وقت الوصول، من القائمة المنسدلة. سيظهر طلب القرار دائما عند استخدام بروتوكول HTTP وبمجرد إذا كنت تستخدم HTTPS:

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

• يرسل المشارك البادئ المشارك الثاني في العرض SDP (بنية البيانات، مع خصائص تدفق الوسائط، والتي سوف تنقلها)؛
• يشكل المشارك الثاني "الإجابة" - الإجابة - SDP وإعادة توجيهها إلى البادئ؛
• ثم يتم تنظيم تبادل المرشحين الجليد بين المشاركين، إن وجدت (إذا كانت المشاركين وراء شاشات NAT أو NAT).

بعد الانتهاء بنجاح من هذا التبادل بين المشاركين، يتم تنظيم نقل العروض الإعلامية (الصوت والفيديو) مباشرة.

قناة rtcdataوبعد ظهر دعم بروتوكول قناة البيانات في المتصفحات مؤخرا نسبيا، لذلك يمكن عرض واجهة برمجة التطبيقات هذه فقط في حالات استخدام WebRTC في Mozilla Firefox 22+ ومتصفحات Google Chrome 26+. مع ذلك، يمكن للمشاركين مشاركة الرسائل النصية في المتصفح.

اتصال بواسطة Webrtc.

دعم متصفحات سطح المكتب

• جوجل كروم (17+) وجميع المتصفحات المستندة إلى محرك الكروم؛
• موزيلا فايرفوكس (18+)؛
• الأوبرا (12+)؛
• سفاري (11+)؛

متصفحات المحمول المدعومة لالروبوت

• جوجل كروم (28+)؛
• موزيلا فايرفوكس (24+)؛
• Opera Mobile (12+)؛
• سفاري (11+).

Webrtc، Microsoft و Internet Explorer

لفترة طويلة جدا قامت Microsoft بصمت حول دعم WebRTC في Internet Explorer وفي متصفح Edge الجديد. لا يحب الرجال من ريدموند حقا إعطاء التقنيات للمستخدمين الذين لا يتحكمون فيه، وهذه هي السياسة. ولكن تدريجيا تحولت القضية من النقطة الميتة، ل كان WebRTC أكثر مستحيلا تجاهله، وتم الإعلان عن مشروع ORTC المستمد من معيار Webrtc.

وفقا للمطورين، فإن ORTC هو امتداد لمعيار Webrtc مع مجموعة محسنة من API ومقرها جافا سكريبت و HTML5، والتي تترجم إلى لغة طبيعية تعني أن كل شيء سيكون هو نفسه، فقط للتحكم في المعيار وتطويره سيكون Microsoft وليس جوجل. يتم توسيع مجموعة من برامج الترميز عن طريق دعم H.264 وبعض الرموز الصوتية لسلسلة G.7XX المستخدمة في أنظمة الاتصالات الهاتفية والأجهزة. قد يظهر دعم مدمج للحصول على RDP (لنقل المحتوى) والمراسلة. بالمناسبة، مستخدمي Internet Explorer ليسوا محظوظين، سيكون دعم ORTC في الحافة فقط. حسنا، بطبيعة الحال، يتم إدراج مجموعة من البروتوكولات والبرامج الترميز ذات الدم المنخفض مع Skype للعمل، والذي يفتح المزيد من تطبيقات الأعمال ل Webrtc.

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

واجهة RTCPEERCONNECTION هي اتصال نظير إلى نظير بين متصفحين. لتوصيل ثلاثة وأكثر من المستخدمين، سيتعين علينا تنظيم شبكة شبكة (شبكة يتم توصيل كل عقدة بجميع العقد الأخرى).
سوف نستخدم المخطط التالي:

1. عند فتح صفحة، تحقق من وجود معرف الغرفة في الموقع.
2. إذا لم يتم تحديد معرف الغرفة، فنحن نولد جديد
3. نرسل خادم الإشارة "الرسالة حول ما نريد الانضمام إلى الغرفة المحددة
4. يتطلب خادم الإشارات بقية العملاء في هذه الغرفة تنبيه مستخدم جديد
5. العملاء الذين هم بالفعل إلى الغرفة إرسال عرض Newommer SDP
6. مبتدئ الردود على العرض

0. Serverting Server.

كما تعلمون، على الأقل WebRTC ويوفر إمكانية اتصالات P2P بين المتصفحات، لا تزال تتطلب نقل إضافي لتبادل رسائل الخدمة. في هذا المثال، يقوم خادم WebSocket الذي كتب على Node.js باستخدام Socket.io يعمل مثل هذا النقل.

var socket_io \u003d تتطلب ("Socket.io")؛ module.exports \u003d (server) (مستخدمي var \u003d ()؛ var io \u003d socket_io (server)؛ io.ON ("اتصال"، وظيفة (مأخذ توصيل) (// desire مستخدم جديد انضم إلى غرفة المقبس.ون (" الغرفة "، وظيفة (رسالة) (var json \u003d json.parse (الرسالة)؛ // أضف مأخذ توصيل إلى قائمة مستخدمي المستخدمين \u003d المقبس؛ إذا (المقبس. الفصول! \u003d\u003d undefined) (// إذا كان المقبس بالفعل في بعض الغرفة، يخرج من ذلك المقبس.أقل (المقبس. الفصول)؛) // أدخل مقبس الغرفة المطلوب. الفصول \u003d JSON.room؛ Socket.join (المقبس. Froid)؛ Socket.user_id \u003d JSON.ID / أرسل إلى بقية العملاء في هذه الغرفة، رسالة حول الانضمام إلى Socket عضو جديد .broadcast.to (Socket.room). Emit ("جديد"، JSON.ID)؛))؛)؛ // رسالة متعلقة ب Webrtc ( عرض SDP، إجابة SDP أو مرشح الجليد) Socket.on ("Webrtc"، وظيفة (رسالة)؛ إذا (json.to! \u003d\u003d undefined && المستخدمون! \u003d\u003d undefined) (// إذا تم تحديد الرسالة بواسطة المستلم وهذا المستلم المعروف بالخادم، وإرسال رسالة فقط له ... Users.emit ("Webrtc"، رسالة)؛ ) آخر (// ... وإلا فإننا نعتبر الرسالة من خلال socketcasting socket.broadcast.to (Socket.room). Emit ("Webrtc"، رسالة)؛ // شخص ما مقبس غير متصل.ون ("قطع الاتصال"، وظيفة () (// عند فصل العميل، نحن نخطر حول هذا المقبس الأخرى .broadcast.to (Socket.room). Emit ("Get"، Socket.user_id)؛ حذف المستخدمين؛))؛ )) )

1. index.html.

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

2. main.js.

2.0. تلقي روابط إلى صفحات واجهات WebRTC

var chatlog \u003d document.getelementbyid ("Chatlog")؛ var message \u003d document.getelementbyid ("رسالة")؛ var connection_num \u003d document.getelementbyid ("connection_num")؛ var room_link \u003d document.getelementbyid ("room_link")؛

لا يزال يتعين علينا استخدام بادئات المتصفح للوصول إلى واجهات Webrtc.

var peerconnection \u003d window.mozrtcpeerconnection || window.webkitrtcpeerconnection. var sessiondescription \u003d window.mozrtcsessiondescription || window.rtcsessiondescription؛ var opecandidate \u003d window.mozrtcicecandidate || window.rtcicecandidate؛

2.1. معرف تعريف الغرفة

سنحتاج هنا إلى وظيفة لتوليد معرف فريد من الغرفة والمستخدم. سوف نستخدم UUID لهذه الأغراض.

وظيفة uuid () (ارجع math.floor () (math.random () * 0x10000) .Tostring (16)؛)؛ عودة S4 () + S4 () + "" - "+ S4 () +" - "+ S4 () + "-" + S4 () + "-" + S4 () + S4 () + S4 ()؛

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

var room \u003d location.hash.substr (1)؛ إذا (! غرفة) (الغرفة \u003d Uuid ()؛) Room_link.innerhtml \u003d "رابط إلى الغرفة"؛ فارني \u003d UUID ()؛

2.2. Websocket.

على الفور عند فتح الصفحة، ستقوم بالاتصال بخادم الإشارة لدينا "Y، أرسل طلبا لإدخال الغرفة وتحديد معالجات الرسائل.

// نحن نحدد ذلك عند إغلاق الرسالة التي تحتاجها لإرسال الخادم إلى FAR Socket \u003d io.Connect ("" "" مزامنة قطع الاتصال على تفريغ ": True))؛ Socket.on ("WebTC"، Socketreced)؛ Socket.on ("جديد"، SocketNewPeer)؛ // أرسل طلبا فورا إلى إدخال غرفة المقبس. emit room ("room"، json.stringify ((ID: ME، غرفة: غرفة)))؛ // الوظيفة الإضافية لإرسال رسائل العناوين المرتبطة بدالة Webrtc SendViasocket (النوع، الرسالة، إلى) (Socket.emit ("Webrtc"، JSON.Ststringify ((ID: أنا، إلى: TO، النوع: النوع، البيانات: رسالة) ))؛)؛

2.3. الإعدادات peerconnection.

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

Var Server \u003d (itseservers: [URL: "الصاعقة: 23.21.150.121")، (URL: "الصاعقة: Soor.l.l.l.google.com: 19302")، (URL: "Turn: numb.viagenie.ca"، بيانات الاعتماد : "كلمة المرور الخاصة بك تستمر هنا"، اسم المستخدم: " [البريد الإلكتروني المحمي]")].

2.4. توصيل مستخدم جديد

عند إضافة عيد جديد إلى الغرفة، يرسلنا الخادم رسالة. الجديدوبعد وفقا لمعالجات الرسائل المحددة أعلاه، ستدعو الدالة. socketnewpeer..

بير بيرز \u003d ()؛ وظيفة socketnewpeer (البيانات)؛ // قم بإنشاء اتصال جديد Var PC \u003d PeerConnection جديد (الخادم والخيارات)؛ // تهيئة InitConnection (الكمبيوتر والبيانات "(عرض البيانات")؛ // الحفاظ على PIR في قائمة الأقران. كمبيوتر؛ // إنشاء datachawnel له قناة var \u003d pc.createdatachachannel ("mychannel"، ("mychannel"، ()]؛ القناة.اونر \u003d البيانات؛ persers.channel \u003d القناة؛ // تثبيت الحدث معالجات القناة bindevents (القناة)؛ // إنشاء SDP تقدم PC.CreeCeOFfer (وظيفة (عرض))؛) الدالة initconnection (الكمبيوتر الشخصي، معرف، SDPTYPE) (PC.OonicEcandidate \u003d وظيفة (الحدث) (إذا تم اكتشاف الجليد الجديد للمرشح على إضافته إلى القائمة لمزيد من إرسال الأقران. candidateCache.push (حدث. الحدث)؛) آخر (// عندما اكتمال الكشف عن المرشح، سيتم استدعاء المعالج مرة أخرى، ولكن دون مرشح // في هذه الحالة نرسل عرض خوف أول عرض تنظيم SDP أو إجابة SDP (اعتمادا على المعلمة الوظيفة) ... SendViasocket (SDPType، PC.Localescription، ID)؛ // ... ومن ثم جميع المرشحين الجليد في السابق ل (var i \u003d 0؛ أنا< peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "

"; }; }

2.5. عرض SDP، إجابة SDP، مرشح الجليد

عند استلام إحدى هذه الرسائل، اتصل بمعالج الرسالة المقابلة.

وظيفة socketrecied (البيانات) (البيانات) (البيانات)؛ التبديل (json.type) (المرشح) (json.id، json.data)؛ استراحة؛ حالة "عرض": remoteofferreceived (json. id، json.data)؛ break؛ حالة " الإجابة ": remoteanswerreceed (json.id، json.data)؛ استراحة؛))

2.5.0 عرض SDP.

وظيفة remoteofferreceed (معرف، البيانات) (createconnection (id)؛ var pc \u003d pers.connection؛ pc.setremoteedesription (البيانات)؛ pc.createanswer (وظيفة (الإجابة)؛)؛)؛ دالة createConnection (المعرف) (إذا (أقرانه \u003d\u003d\u003d undefined) (أقرانه \u003d (candidatecache :)؛ var pc \u003d peerconnection جديد (الخادم، الخيارات)؛ photconnection (pc، id، "الإجابة")؛ persers.connection \u003d pc.ondatachannel \u003d وظيفة (ه ) (persers.channel \u003d e.channel؛ persers.channel.owner \u003d ID؛ bindevents (perse.channel)؛))

2.5.1 إجابة SDP.

وظيفة RemoteanswerreceReceReceReceiST (المعرف والبيانات) (var pc \u003d pers.connection؛ pc.setremoteedesription (جديد الدعابة (البيانات) (البيانات))؛)

2.5.2 مرشح الجليد.

وظيفة RemoteCandidateated (المعرف والبيانات) (Createconnection (ID)؛ Var PC \u003d PENERS.CONNNECTION. PC.ADDICECENATIONDIONDIONDIOND (ICECANDIDES NEW ICENATIOND (البيانات)؛)

2.6. ارسال رسالة

الضغط على الزر إرسال. وتسمى الوظيفة sendmessage.وبعد كل ما تقوم به يتم تمريره على قائمة الأقران، ويحاول إرسال الرسالة المحددة للجميع.

لسنوات عديدة للمكالمات من المتصفح لسنوات عديدة: Java، ActiveX، Adobe Flash ... في السنوات القليلة الماضية أصبح من الواضح أن الإضافات والآلات الافتراضية اليسرى لا تلمع الراحة (لماذا يجب أن أقوم بتثبيت شيء ما؟) الأهم من ذلك، الأمن. ما يجب القيام به؟ هناك مخرج!

حتى وقت قريب، تم استخدام العديد من بروتوكولات الاتصال الهاتفي للملكية الفكرية أو الفيديو في شبكات الملكية الفكرية: SIP، البروتوكول الأكثر شيوعا القادمة من مشهد H.323 و MGCP، مشهد Jabber / Jingle (المستخدم في Gtalk)، شبه مفتوح Adobe RTMP * و، من بالطبع، سكايب مغلقة. يحاول مشروع Webrtc، الذي بدأته Google، تحويل حالة الشؤون في العالم والهاتف عبر الإنترنت، مما يجعل جميع الهواتف البرمجية غير الضرورية، بما في ذلك Skype. لا تنفذ WebRTC فقط جميع إمكانيات الاتصال مباشرة داخل المتصفح المثبتة الآن عمليا على كل جهاز، ولكن في محاولة لحل المهمة الأكثر عمومية في وقت واحد بين مستخدمي المتصفحات (تبادل البيانات المختلفة والشاشات والتعاون مع المستندات وأكثر من ذلك بكثير).

Webrtc مطور الويب

من وجهة نظر مطور الويب Webrtc يتكون من قطعتين رئيسيين:

• يتم تنفيذ أجزاء الوسائط من الموارد المحلية (الكاميرا أو الميكروفون أو شاشة الكمبيوتر المحلي) بواسطة طريقة Navigator.getusermedia التي ترجع كائن MediaStream؛
• التواصل نظير إلى نظير بين الأجهزة التي تولد حركة مرور الوسائط، بما في ذلك تعريف أساليب الاتصال وانتقالها مباشرة - كائنات rtcpeerconnection (لإرسال واستقبال تدفقات الصوت والفيديو) و rtcdatachachannel (لإرسال واستقبال البيانات من المتصفح).

ماذا نفعل؟

سنتعامل مع كيفية تنظيم أبسط دردشة الفيديو متعددة اللاعبين بين المتصفحات المستندة إلى WebRTC باستخدام مآخذ الويب. ستبدأ التجربة في Chrome / Chromium، باعتبارها الأكثر تقدما من حيث متصفحات Webrtc، على الرغم من إطلاق سراحها في 24 يونيو فايرفوكس 22 تقريبا. يجب القول أن المعيار لم يتم قبوله بعد، ومن الإصدار إلى إصدار API يمكن أن يتغير. تم فحص جميع الأمثلة في Chromium 28. بالنسبة للبساطة، لن نتبع نظافة التعليمات البرمجية والمتصفح عبر.

mediastream

المكون الأول والبسيط في Webrtc - Mediastream. يوفر إمكانية الوصول للمتصفح إلى الدورة الدموية من الكاميرا وميكروفون الكمبيوتر المحلي. في Chrome، من الضروري استدعاء وظيفة Navigator.webkitgetusermedia () وظيفة (نظرا لعدم الانتهاء من المعيار بعد، تذهب جميع الوظائف مع البادئة، وفي Firefox نفس الوظيفة تسمى Navigator.mozgetusermedia ()). عندما يطلق عليه، سيتم عرض المستخدم طلب الوصول إلى الكاميرا والميكروفون. يمكنك متابعة المكالمة فقط بعد أن يقدم المستخدم موافقته. تنقل معلمات هذه الوظيفة معلمات تبديل الوسائط المطلوبة ووظائف رد الاتصال: أول ستهبب في حالة الوصول الناجح إلى الكاميرا / الميكروفون، والثاني - في حالة وجود خطأ. للبدء، قم بإنشاء ملف HTML RTCTEST1.HTML مع زر وعنصر

getusermedia.

مايكروسوفت CU-RTC-Web

لن تكون Microsoft Microsoft إذا كانت استجابة لمبادرة Google لم تصدر فورا خيارها غير المعتاد غير المعتاد يسمى Web Cu-RTC (HTML5LABS.InterOperabilityBrides.com/cu-rtc-wareb/cu-rtc-web.htm ). على الرغم من أن حصة IE، وصغيرة جدا، إلا أن تقلص عدد مستخدمي Skype، فإن عدد مستخدمي Skype يمنح Microsoft الأمل في الضغط على Google، ويمكن افتراض أنه سيتم استخدام هذا المعيار بالذات في إصدار المتصفح من Skype. يتوجه معيار Google في المقام الأول على الاتصالات بين المتصفحات؛ في الوقت نفسه، لا يزال الجزء الرئيسي من حركة المرور الصوتية في شبكة الهاتف المعتادة، ولا يلزم وجود البوابات بين شبكات IP وشبكات الملكية الفكرية سهولة الاستخدام أو التوزيع الأسرع، ولكن أيضا كوسيلة لتحقيق اسمح لعدد كبير من اللاعبين بتطويرها. قد لا يؤدي ظهور معيار آخر إلى حاجة غير سارة إلى دعم تقنيين غير متوافقين في وقت واحد، ولكن في المستقبل لإعطاء المستخدم مجموعة أوسع من الوظائف المحتملة والحلول التقنية بأسعار معقولة. انتظر و شاهد.

تحول التدفق المحلي

داخل العلامات سوف يعلن ملف HTML لدينا المتغير العالمي لمفتاح الوسائط:

var localstream \u003d null؛

يجب أن تحدد المعلمة الأولى لطريقة GetUsermedia معلمات تبديل الوسائط المطلوب - على سبيل المثال، ما عليك سوى تضمين الصوت أو الفيديو:

var streamconstrants \u003d ("الصوت": صحيح، "فيديو": صحيح)؛ // طلب الوصول والصوت، والفيديو

إما تحديد معلمات إضافية:

Var Streamconstrants \u003d ("الصوت": صحيح، "فيديو": ("إلزامي": ("Maxwidth": "320"، "Maxheight": "240"، "Maxframerate": "5")، "اختياري" :) )

يجب نقل المعلمة الثانية من طريقة GetUsermedia إلى وظيفة رد الاتصال، والتي ستكون ناتجة ما إذا تم تنفيذها بنجاح:

وظيفة GetUsermedia_success ("GetUsermedia_suxcess ():"، دفق)؛ localvideo1.src \u003d url.createObjecturl (stream)؛ // توصيل الوسائط التبديل إلى عنصر HTML

المعلمة الثالثة - معالج خطأ وظيفة رد الاتصال الذي سيتم استدعاؤه في حالة الخطأ

وظيفة GetUsermedia_Error (خطأ) (Console.log ("GetUsermedia_error ():"، خطأ)؛

في الواقع استدعاء طريقة GetUsermedia - طلب الوصول إلى الميكروفون والكاميرا عند النقر فوق الزر الأول

وظيفة getusermedia_click () (console.log ("getusermedia_click ()")؛ navigator.webkitgetusermedia (streamconstrants، getusermedia_success، getusermedia_error)؛

احصل على الوصول إلى ملف الوسائط من الملف مفتوح محليا، فمن المستحيل. إذا حاولت القيام بذلك، فاحصل على خطأ:

NavigatorusermediaError (الرمز: 1، إذن_denied: 1) "

ننشر الملف الناتج إلى الخادم، وفتح في المتصفح واستجابة الطلب الذي ظهر من خلال السماح بالوصول إلى الكاميرا والميكروفون.

حدد الأجهزة التي ستتلقاها Chrome، يمكنك إعدادات ("الإعدادات")، إظهار الإعدادات المتقدمة ("إظهار الإعدادات المتقدمة")، خصوصية القسم ("البيانات الشخصية")، زر المحتوى ("إعدادات المحتوى"). في متصفحات Firefox و Opera، يتم اختيار الأجهزة من القائمة المنسدلة مباشرة عند حل الوصول.

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

انتبه إلى دائرة النبض في أيقونة في علامة التبويب وأيقونة الكاميرا على الجانب الأيمن من شريط العناوين:

rtcmediaconnection.

RtcMediaConnection هو كائن مصمم لإنشاء وإرسال وسائل الإعلام عبر الشبكات بين المشاركين. بالإضافة إلى ذلك، هذا الكائن مسؤول عن تكوين وصف ل Mediassia (SDP)، والحصول على معلومات حول مرشحي الجليد لمرور شاشات NAT أو شبكة (محلية واستخدام الصاعقة) والتفاعل مع خادم الدوران. يجب أن يكون لكل مشارك RTCMediaConnection واحد لكل اتصال. يتم نقل لقطات الوسائط عبر بروتوكول SRTP المشفرة.

تحويل الخوادم

المرشحون الجليد هم ثلاثة أنواع: المضيف، SRFLX والترحيل. يحتوي المضيف على معلومات تم الحصول عليها محليا، SRFLX - كيف تبحث العقدة عن خادم خارجي (صاعقة)، وتتابع - معلومات لحركة المرور المتولدة من خلال خادم الدوران. إذا كانت عقدةنا خلف NAT NAT، فسيحتوي المرشحون المضيفين على عناوين محلية وسوف تكون عديمة الفائدة، وسيساعد المرشحون SRFLX إلا \u200b\u200bمع أنواع معينة من NAT والترحيل سيكون آخر أمل في تخطي حركة المرور عبر الخادم الوسيط.

مثال على مرشح الجليد من نوع المضيف، مع العنوان 192.168.1.37 ومنفذ UDP / 34022:

a \u003d المرشح: 337499441 2 UDP 2113937151 192.168.1.37 34022 الجيل المضيف المطبعي 0

التنسيق العام لإعداد خوادم الصاع / الدوران:

Var Servers \u003d ("aceservers": [(عنوان URL ":" Moon: Soor.stunprotocol.org: 3478 ")، (" URL ":" Turn: [البريد الإلكتروني المحمي]: ميناء "،" بيانات الاعتماد ":" كلمة المرور ")])؛

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

بدوره حتى كل شيء جيد جدا كما أود، ولكن هناك تطور نشط، وأريد أن آمل، بعد بعض الوقت Webrtc، إذا لم يقرص على Skype بجودة المرور عبر إذاعة العناوين (NAT) وشاشات الشبكة، ثم نهج ملحوظ على الأقل.

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

يتم تعيين اختيار طريقة النقل للمطور - على الرغم من يدويا. بمجرد إجراء تبادل البيانات اللازمة، سيقوم RTCMediaConnection بإنشاء عروض إعلامية تلقائيا (إذا اتضح، بالطبع).

نموذج العرض

لإنشاء وتغيير طرق عرض الوسائط، يتم استخدام نموذج العرض / الإجابة. موضح في RFC3264) وبروتوكول SDP (بروتوكول وصف الجلسة). يتم استخدامها وبروتوكول SIP. يميز هذا النموذج الوكلاء: العارض - واحد يقوم بإنشاء وصف SDP للجلسة لإنشاء جديد أو تعديل موجود (عرض SDP)، والساد هو الشخص الذي يتلقى وصفا واحدا للجلسة من وكيل آخر ويلتقي به وصفها الخاص للجلسة (الإجابة SDP). في الوقت نفسه، تتطلب المواصفة بروتوكول أعلى مستوى (على سبيل المثال، SIP أو الخاصة به على رأس مآخذ الويب، كما هو الحال في حالتنا) المسؤولية عن نقل SDP بين الوكلاء.

ما البيانات التي يجب نقلها بين اثنين من RTCMediaConnection حتى يتمكنوا من تثبيت حركة الوسائط بنجاح:

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

عرض التكوين.

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

ستحتاج بالإضافة إلى ذلك إلى معالج حدثين: oniceCandidate عند تحديد المرشح الجليدي الجديد و OnadStream عند توصيل مفتاح الوسائط من الجانب البعيد. دعنا نعود إلى ملفنا. أضف إلى أتش تي أم أل بعد الصفوف مع عناصر مرة اخرى:

createoffer.

وبعد سلسلة مع عنصر

أيضا في بداية رمز JavaScript سيعلن المتغير العالمي ل RTCPEERCONENTIC:

فار pc1؛

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

Var Servers \u003d NULL؛

خيارات لإعداد عرض SDP

var offermentrants \u003d ()؛

المعلمة الأولى من طريقة CreateFfer () هي وظيفة رد الاتصال تسمى عند النجاح

وظيفة pc1_createoffer_success ("pc1_createoffer_succcess (): \\ ndesc.sdp: \\ n" + desc.sdp + "desc:"، desc)؛ pc1.setlocaldescription (desc)؛ // قم بتعيين rtcpeerconnection، التي تشكلها عرض SDP باستخدام طريقة SetLocaldescription . // عندما يتم إرسال الجانب الطويل لمسافة طويلة إلى إجابته SDP، ستحتاج إلى تعيين بواسطة setremotedescription // حتى لا يتم تنفيذ الجانب الثاني، لا شيء // pc2_received (DESC)؛)

المعلمة الثانية هي وظيفة رد الاتصال سيتم استدعاؤها في حالة الخطأ

وظيفة pc1_createoffer_error (خطأ) (console.log ("pc1_createoffer_succcess_error (): خطأ:"، خطأ)؛)

وتعلن وظيفة رد الاتصال التي سيتم نقل المرشحين الجليد لأنها مصممة:

وظيفة pc1_onicecandidate (الحدث) (console.log ("pc1_onicecandidate (): \\ n" + event.candidate.candidate.Replace ("\\ r \\ n"، ")، الحدث. الحدث. //- بينما الجانب الثاني هو غير منفذ، لا تفعل شيئا /// pc2.addicecandide (جديد RTCICECANDIATEDIATIOND (حدث. الحدث)؛)

بالإضافة إلى وظيفة رد الاتصال لإضافة تبديل الوسائط من الجانب البعيد (للمستقبل، نظرا لأن لدينا فقط RtcpeerConnection واحد فقط):

وظيفة PC1_ONADDSTREAM (Console.log ("PC_ONADDSTREAM ()")؛ Remotevideo1.src \u003d URL.CreateObjecturl (Event.stream)؛)

عند النقر فوق الزر CreateOffer، ستقوم بإنشاء RTCPEERCONNECTIONNECTIONNECTIONNECTIONNECTIONNECTIONNECTIONNECTIONNECTIONNNECTIONNECTIONNECTIONNECTIONNNECT، فقم بتعيين الأساليب onicecandide و onadstream وطلب تكوين عرض SDP عن طريق الاتصال بطريقة CreateFfer ():

وظيفة createOffer_Click () (console.log ("consoleoffer_click (" ")؛ pc1 \u003d جديد webkitrtcpeerconnection (الخوادم)؛ // إنشاء rtcpeerconnection pc1.onicecandidate \u003d pc1_onicecandidate؛ // معالجة وظيفة رد الاتصال للمرشحين الجليد PC1.onaddstream \u003d pc1_onaddleam؛ // وظيفة رد الاتصال الناتجة عن مظهر تبديل الوسائط من الجانب البعيد. حتى الآن، لا يحتوي على PC1.addstream (localstream)؛ // دعونا نقدم أجزاء الوسائط المحلية (نفترض أنه تلقى بالفعل) PC1.CreateFfer (// وطلب فعلا تكوين عرض PC1_CREATEOFFER_SUCCESS، PC1_CREATEOFFER_ERROR، OFFERCOLSTRAINTS)؛)

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

تشكيل الإجابة SDP والمرشحين الجليد

وعرض SDP، ويجب نقل SDP، ويجب نقل كل من مرشحات الجليد إلى الجانب الآخر وهناك بعد تلقي RTCPEERCONNECTION لاستدعاء طرق SetRemoteDescription للحصول على SDP و ADDICENATIONDIATE لكل مرشح جليدي مشتق من الجانب البعيد؛ وبالمثل، في الاتجاه المعاكس للإجابة على SDP ومرشحي الجليد عن بعد. الإجابة تم تشكيل SDP نفسه بالمثل عرض؛ الفرق هو أنه يتم استدعاء طريقة CreateOfffer، ولكن طريقة Createanwer وقبل إحالة طريقة RTCPeerConnection هذه من قبل SetRemoteDescription عرض SDP المستلم من المتصل.

إضافة عنصر فيديو آخر في HTML:

والمتغير العالمي ل RTCPeerConnection الثاني تحت الإعلان عن الأول:

فار pc2؛

عرض المعالجة والإجابة على SDP

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

وظيفة PC2_CREATEANSOR_SUCCCESRIPTION (DESC)؛ console.log ("pc2_createwer_success ()"، desc.sdp)؛ pc1.setremotedscription (desc)؛)

وظيفة الاتصال المسمى في حالة وجود خطأ في تكوين الإجابة مشابه تماما للعرض:

وظيفة pc2_createwer_error (خطأ) (console.log ("pc2_createwer_error ():"، خطأ)؛)

الإجابة على خيارات تكوين SDP:

Var Reswornervonstrants \u003d ("إلزامي": ("Offertoreceedio": صحيح، "offertorevevideo": صحيح)؛

عند استلام العرض، سنقوم بإنشاء RTCPEERCONNECTIONNECTION وإجابة شكل مشابه لتقديم:

وظيفة PC2_REECEIVIVERT (DESC) (Consoleofer ()، DESC)؛ // قم بإنشاء كائن Rtcpeerconnection للمشارك الثاني بنفس طريقة أول PC2 \u003d New WebKitrtCpeerConnection (الخوادم)؛ PC2.OonicECandidate \u003d pc2_onicecandidate؛ // اضبط معالج الأحداث عندما يظهر الحدث مرشح Ice PC2.OnaddStream \u003d PC_ONADDSTREAM؛ // عندما يظهر الدفق لتوصيله ب HTML

من أجل مثالنا، ينقل العرض SDP من المشارك الأول إلى الثاني، نحن إلغاء الاشتراك في وظيفة PC1 createoffer.النجاح () سلسلة الاتصال:

pc2_received (DESC)؛

لتنفيذ معالجة المرشحين الجليد، نحن لا نفعل أحداث استعداد المرشحين الجليدي لأول مشارك PC1_onicecandidate () لنقلها إلى الثاني:

PC2.ADDICECANDICATIONDIATIOND (NEW RTCECCECANDIATEDIATE (EVENT.CANDIOND))؛

يعد معالج الأحداث من استعداد المرشحين الثلج الثاني للمشاركين أولا:

وظيفة pc2_onicecandidate (الحدث) (console.log ("pc2_onicecandidate ():"، حدث. candide.candidate)؛ pc1.addicecandidate (جديد rtcicecandidate (حدث. الكنسية))؛))

ميزة رد الاتصال لإضافة تبديل الوسائط من المشارك الأول:

وظيفة pc2_onaddstream (console.log ("pc_onaddstream ()")؛ remotevideo2.src \u003d url.createobjecturl (حدث.

الانتهاء من الاتصال

أضف زر آخر إلى HTML

يشنق.

ووظيفة لإكمال الاتصال

وظيفة btnhangupclick () (// قم بإيقاف تشغيل الفيديو المحلي من عناصر HTML

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

شاشة البث

ميزة GetUsermedia يمكنك أيضا التقاط الشاشة والبث كوسائل MediaStream، تحدد المعلمات التالية:

Var MediaStreamConstrants \u003d (الصوت: خطأ، فيديو: (إلزامي: (chromemediasource: "الشاشة")، اختياري :))؛

للوصول بنجاح إلى الشاشة، يجب إجراء العديد من الشروط:

• تمكين علامة لقطة للشاشة في GetUsermedia () في Chrome: // أعلام /، Chrome: // أعلام /؛
• يجب تنزيل الملف المصدر بواسطة HTTPS (أصل SSL)؛
• لا ينبغي طلب تدفق الصوت؛
• يجب ألا يكون هناك عدة طلبات في علامة تبويب متصفح واحد.

مكتبات ل Webrtc.

على الرغم من أن WebTC غير مكتمل أيضا، إلا أن هناك بالفعل العديد من المكتبات بناء على ذلك. تم تصميم JSSIP لإنشاء متصفح Soft SPLAS يعمل مع مفاتيح SIP، مثل النجمة وكاماليو. ستقوم Peerjs بتبسيط إنشاء شبكات P2P لتبادل البيانات، وسيقلل Holla نطاق التطوير المطلوب للاتصال P2P من المتصفحات.

node.js ومقبس.

من أجل تنظيم تبادل SDP ومرشحي الجليد بين اثنين من RTCPEERCONNECTIONNENECTION عبر الشبكة، استخدم Node.js مع وحدة المقبس.io.

تثبيت أحدث إصدار ثابت من node.js (لدبيان / أوبونتو) الموصوفة

$ sudo apt-get install python-software-properties python g ++ جعل $ sudo sud-ad-apt- مستودع ppa: كريس ليا / node.js $ sudo apt-get تحديث $ sudo apt-get install nodejs

تم وصف تثبيت أنظمة التشغيل الأخرى

الشيك:

$ echo "SYS \u003d تتطلب" sys.puts ("رسالة اختبار")؛ " \u003e nodetest1.js $ nodejs nodetest1.js

باستخدام NPM (مدير حزمة العقدة)، تثبيت Socket.io ووحدة صريحة إضافية:

$ npm تثبيت socket.io Express

تحقق من خلال إنشاء ملف Nodetest2.js لجزء الخادم:

$ nano nodetest2.js var التطبيق \u003d تتطلب ("Express") ()، الخادم \u003d تتطلب ("HTTP"). CreateServer (التطبيق)، IO \u003d تتطلب ("Socket.io"). الاستماع (الخادم)؛ Server.Listen (80)؛ // إذا كان المنفذ 80 مجانا في التطبيق. احصل على ("/"، وظيفة (REQ، RES) (// عند الوصول إلى صفحة Res.SendFile الجذر (__ Dirname + "/Nodetest2.html")؛ // التخلي عن ملف HTML))؛ io.sockets.ON ("الاتصال"، وظيفة (مأخذ توصيل) (// عند توصيل Socket.emit ("حدث الخادم"، (Hello: "World"))؛ // أرسل رسالة Socket.on ("حدث عميل" ، وظيفة (البيانات) (// وأعلن معالج حدث عند استلام رسالة من Console.log (البيانات)؛)؛)؛)؛

و nodetest2.html لجزء العميل:

$ nano nodetest2.html.

بدء تشغيل الخادم:

$ sudo nodejs nodetest2.js

وفتح HTTP: // localhost: 80 الصفحة (إذا كان يعمل محليا على المنفذ الثمانين) في المتصفح. إذا نجح كل شيء، في وحدة التحكم JavaScript من المتصفح، سنرى تبادل الأحداث بين المتصفح والخادم عند الاتصال.

تبادل المعلومات بين rtcpeerconnection من خلال مآخذ الويب

جزء العميل

احفظ مثالنا الرئيسي (RTCDEMO3.HTML) تحت الاسم الجديد RTCDEMO4.HTML. قم بتوصيل مكتبة المقبس. في هذا البند:

وفي بداية البرنامج النصي Javascript - الاتصال بمقبآت الويب:

Var Socket \u003d io.Connect ("http: // localhost")؛

سأحل محل الدعوة المباشرة لوظائف مشارك آخر لإرسالها من خلال مآخذ الويب:

وظيفة createoffer_success (DESC) (DESC)؛ Socket.emit ("عرض"، DESC)؛) الدالة PC2_CREATEANSOR_SUCCCESS (DESC) (... // PC1.SetRemotEdesriPtion (DESC)؛ المقبس. Emit ("إجابة"، DESC)؛) وظيفة PC1_onicecacaCandidate (الحدث) (... // pc2.addicecandidate (جديد rtceccecandidate (حدث جديد)؛ socket.emit ("ICE1"، الحدث.)؛ ..) وظيفة pc2_onicecandidate (الحدث) (الحدث) (الحدث) ... // pc1.addicecandidate (جديد rtcicecandidate (الأحداث. الحدث)؛ المقبس.يميت ("ICE2"، حدث. ...)؛)؛)

في وظيفة شنق ()، بدلا من دعوة مباشرة لوظائف المشاركين الثاني، دعنا نقدم رسالة من خلال مآخذ الويب:

وظيفة btnhangupclick () (... // remotevideo2.src \u003d ""؛ pc2.close ()؛ pc2 \u003d null socket.emit ("hangup"، ())؛

وأضف معالجات استلام الرسائل:

Socket.on ("عرض"، وظيفة (البيانات) ("المقبس" ("عرض"): "، البيانات)؛ pc2_receivedoffer (البيانات)؛)؛ Socket.ON ("الإجابة"، وظيفة (بيانات) (Console.log ("Socket.on": "، البيانات)؛ pc1.setremotescription (البيانات)؛)؛ Socket.on ("Ice1"، وظيفة ("المقبس" ("Ice1" ("ICE1"): "، البيانات)؛ pc2.addicecandidate (جديد rtcicecandidate (بيانات))؛)؛ Socket.on ("ICE2"، وظيفة ("Socket.on" ("Ice2" ("ICE2"): "البيانات)؛ PC1.ADDICECANDIANTIONDIATIONDIOND (NEW RTCICECANDIATIONDIONDIOND (بيانات))؛)؛ Socket.on ("Hangup"، وظيفة ("Console.log" ("Socket.On (" Hangup "):"، البيانات)؛ Remotevideo2.src \u003d ""؛ pc2.close ()؛ pc2 \u003d null؛) ؛

جزء الخادم

على جانب الخادم، احفظ ملف Nodeetest2 تحت الاسم الجديد RTCest4.js وداخل وظيفة io.sockets.ON ("الاتصال"، الوظيفة (المقبس) (...) إضافة مكتب الاستقبال وإرسال رسائل العملاء:

Socket.on ("عرض"، وظيفة (بيانات) (// عند استلام الرسالة "عرض"، // لأن اتصال العميل في هذا المثال هو واحد فقط، // إرسال رسالة مرة أخرى من خلال نفس المقبس المقبس. ("عرض"، البيانات)؛ // إذا كان من الضروري إرسال رسالة على جميع الاتصالات، // بالإضافة إلى المرسل: // soket.broadcast.emit ("العرض"، البيانات)؛)؛ Socket.on ("الإجابة"، الوظيفة (البيانات) (Socket.emit ("الإجابة"، البيانات)؛)؛ Socket.on ("ICE1"، وظيفة (بيانات) (Socket.emit ("ICE1"، البيانات)؛)؛ Socket.on ("ICE2"، الوظيفة (البيانات) (Socket.emit ("ICE2"، البيانات)؛))؛ Socket.on ("شنق"، وظيفة (البيانات) (Socket.emit ("شنق"، البيانات)؛))؛

بالإضافة إلى ذلك، سوف تقوم بتغيير اسم ملف HTML:

// res.sendfile (__ dirname + "/nodetest2.html")؛ // إعطاء ملف HTML Res.SendFile (__ Dirname + "/rtctcest4.html")؛

خادم البدء:

$ sudo nodejs nodetest2.js

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

استنتاج

المثال الناتج مشروط جدا، ولكن إذا كان لديك القليل من معالجات الأحداث عالمية بحيث لا يختلفون عن المكالمات ويسمى الطرف، بدلا من كائنات PC1 و PC2 لجعل صفيف RTCPEERCONNECTION وتنفيذ الإبداع الديناميكي وإزالة العناصر

يمكن افتراض أنه من الجيد جدا بفضل Webrtc، سيكون هناك انقلاب ليس فقط في تقديم روابط الصوت والفيديو، ولكن أيضا في كيفية إتصال بالإنترنت ككل. يتم وضع Webrtc ليس فقط كتقنية للمكالمات من المتصفح إلى المتصفح، ولكن أيضا كتقنية اتصالات في الوقت الفعلي. مكالمة فيديو، التي قمت بفكها، جزء صغير فقط من الخيارات الممكنة للاستخدام. هناك بالفعل أمثلة على بث الشاشة (ساكن الشاشة)، والتعاون، وحتى شبكة P2P لتسليم المحتوى استنادا إلى المتصفحات باستخدام RTCDATACHANLEL.