الكاميرا في المتصفح. Skype، تعليمات خطوة بخطوة لإنشاء تطبيقات Webrtc - البصر "في المدقع". انها إبلاغ. كيفية تنظيم Webrtc البث عبر الإنترنت باستخدام كاميرا ويب واختبار خادم VPS WebRTC عبر الإنترنت

في هذه المقالة، أريد أن أخبر كيف تستخدم تقنيات Webrtc و Bitrix، إنشاء تطبيق Web Multimedia الخاص بك :)

قليلا عن التكنولوجيا

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

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

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

في الوقت الحالي هو: موزيلا Firefox 27+ وأكثر بناء على متصفحات Webkit - Google Chrome 29+، Opera 18+، Yandex.Browser 13+.
هناك أمل في أن يكون سفاري قريبا في هذه القائمة، لأن الشركة دخلت مجموعة عمل Webrtc في شباط 2014..

لسوء الحظ، لا تخطط Microsoft لتنفيذ WebRTC وإنشاء تقنية CU-RTC-Web، ولكن ربما سيجعلون تقنيزهم أكثر أو أقل متوافقين.
بالنسبة لمستخدمي Internet Explorer، نقدم لإصدار تطبيق سطح المكتب المستند إلى الكروم وتقديم متصفحاتها دون دعم هذه التكنولوجيا.

حول كيفية استخدامنا تقنية Webrtc وعمل تطبيق سطح المكتب، قلت مؤتمر الشتاء الشريكة 1C-Bitrixيمكنك مشاهدة تقريري عبر الإنترنت أو تنزيل الفيديو :)

كيف يعمل Webrtc؟

بعد قراءة الأسطر أعلاه، من المرجح أن تكون في عداد المفقودين بالفعل للقيام بتطبيق Webrtc وإغلاق الصفحة :)

ولكن لمس الذعر!لدينا بالفعل كل شيء في المنتج، وانظر لنفسك:

1. بروتوكول الإنذار في الوقت الفعلي يمكنك التنظيم على أساس دفعنا وسحب ونمطنا لخادم Nginx - وضع Nginx-Push-Stream، وكيفية العمل معهم بالتفصيل مكتوبة في مدونتي على Bitmix (إذا هذا الخيار الذي لا تناسبه، يمكنك بسهولة استبدال منتج آخر، على سبيل المثال على Socket.io)؛

2. للزحف الناتا، أنشأنا خدمة سحابية متاحة لجميع مستخدمي المنتجات في turn.calls.bitrix24.com.;

والأشيء الأكثر متعة :)

4. قمنا بتطوير عنصر خاص يتم فيه تطبيق جميع المنطق مقابل ما يمكنك الخوض فيه بسرعة وبدء في كتابة طلبك (يتوفر المكون في وحدة الدفع والسحب من الإصدار 14.1.5)؛

تشغيل التطبيق التجريبي :)

في وحدة الدفع والسحب (/ bitrix / modules / pul /)، بدءا من الإصدار 14.1.5، ظهر مجلد تجريبي. هناك حاليا مثالان في ذلك:
1. مثال على العمل مع وحدة "الدفع والسحب"؛
2. مثال على العمل مع WebRTC؛

حول الثانية أردت فقط التحدث :)

لبدء العمل، اتبع الخطوات التالية:
1. انسخ مكون المكون من المجلد / Bitrix / الوحدات / السحب / العرض التوضيحي / WebRTC / ضغط /، على سبيل المثال هنا / Bitrix / Compactens / yourcompanyprefix /
2. نسخ الصفحة / Bitrix / الوحدات / السحب / العرض التوضيحي / WebRTC / HTML /، على سبيل المثال، في جذر موقعك؛
3. تكوين وحدة الدفع والسحب للعمل مع خادم قائمة الانتظار؛
4. سجل اثنين من المستخدمين؛

كل شيء، يمكنك الآن الذهاب إلى هذه الصفحة تحت مستخدمين مختلفين وابدأ في الاتصال ببعضهم البعض :)

أفضل الوثائق هي شفرة المصدر

سأفصف بإيجاز الغرض من كل وظيفة، والتي تستخدم في Demo_webrutc.js (الموجودة في المكون)، كل شيء آخر، آمل أن يكون من الواضح من التعليمات البرمجية المصدر.

ما هو أفضل فهم المكون وكيف يعمل، وقراءة هذه المقالتين، وسوف يساعدك في التنقل بشكل أسهل:
إنشاء مكتبة JS الخاصة بك: JS، CSS، العبارات، التبعيات.
العمل مع وحدة "دفع وسحب"

Webrtc: التهيئة

yourcompanyprefix.webrtc ()
تصف فئة فئة WebRTC هذه القيم الافتراضية والعمل مع الإشارات.
ملاحظة: Bx.garbage ستعمل عند مغادرة الصفحة أو إعادة التشغيل، وبالتالي يمكنك قص المكالمة.

bx.inheritwebrtc (yourcompanyprefix.webrtc)؛
يجب إجراء هذه الميزة فور التهيئة مباشرة، وسوف تنشر جميع الفئات الأساسية من مكتبة bx.webrtc الأساسية

WebRTC: Usermedia API

yourcompanyprefix.webrtc.stargetusermedia.
وظيفة الوصول الفوري إلى كاميرا الفيديو والميكروفون

yourcompanyprefix.webrtc.onusermediasess.
يتم استدعاء هذه الميزة عندما يتم تشغيل الحدث من خلال حدث "الوصول إلى المعدات الناجحة إلى المعدات".

yourcompanyprefix.webrtc.onusermedierror.
يتم استدعاء هذه الميزة عند تشغيل حدث الخطأ بواسطة الحدث

Webrtc: PeerConnection API

yourcompanyprefix.webrtc.setelocalandsend.
تعمل الوظيفة على تعيين معلومات التعريف حول المستخدم الحالي وينقله إلى مستخدم آخر.
yourcompanyprefix.webrtc.onremotestreamamed.
يتم استدعاء هذه الميزة عند تشغيل حدث بواسطة دفق الوسائط عن بعد، لعرضه في علامة الفيديو

yourcompanyprefix.webrtc.onremoteStrimoved.
يتم استدعاء هذه الميزة عند تشغيل الحدث من خلال حدث "تدفق الوسائط المعطلة"، لإيقاف تشغيله في علامة الفيديو

yourcompanyprefix.webrtc.onicecandidate.
يتم استدعاء هذه الميزة عندما يتم تشغيل الحدث من خلال "الحاجة إلى نقل معلومات التعريف حول برامج الترميز والملكية الفكرية وغيرها من المعلومات" إلى مستخدم آخر

yourcompanyprefix.webrtc.peerconnectionError.
يتم استدعاء الوظيفة عند حدوث خطأ الاتصال بين المستخدمين

yourcompanyprefix.webrtc.peerconnectionreconect.
ترسل الدالة طلبا لمحاولة إعادة توصيل المستخدم إلى جلسة موجودة، على سبيل المثال بسبب الخطأ

yourcompanyprefix.webrtc.deletyevents.
تقوم الوظيفة بإعادة تعيين جميع المتغيرات المعدلة لإجراء مكالمة جديدة.

Webrtc: إشارة API

yourcompanyprefix.webrtc.callinvite.
وظيفة لإرسال دعوة إلى مستخدم آخر في مكالمة فيديو

yourcompanyprefix.webrtc.calnswer.
وظيفة لإرسال تأكيد إلى إعداد مكالمة الفيديو

yourcompanyprefix.webrtc.caldecline.
وظيفة لإرسال الإلغاء أو مكالمة الفيديو

yourcompanyprefix.webrtc.callcommand.
دالة لإرسال أوامر أخرى إلى مستخدم آخر (المستخدم جاهز لتثبيت الاتصال، المستخدم مشغول وما إلى ذلك)

WebRTC: الأوامر الأساسية (من مكتبة Core_webrtc.js)

yourcompanyprefix.webrtc.ready.
تحقق متاح Webrtc في المتصفح الحالي

yourcompanyprefix.webrtc.signalingready.
تحقق متاح للإشارات على الصفحة الحالية

yourcompanyprefix.webrtc.toggleaudio.
تحول / قبالة الميكروفون

yourcompanyprefix.webrtc.togglevideo.
تشغيل / قبالة الكاميرا
yourcompanyprefix.webrtc.oniceconnectionstatechange.
يتم استدعاء الوظيفة عند تشغيل حدث تثبيت الاتصال

yourcompanyprefix.webrtc.onsignalingstatechange.
يتم استدعاء الوظيفة عند تشغيل حدث "تغيير تغيير التواصل"

yourcompanyprefix.webrtc.attachmediastream.
وظيفة تثبيت دفق الفيديو / الصوت في علامة الفيديو

yourcompanyprefix.webrtc.log.
وظيفة تسجيل الدخول

آمل أن تكون هذه المقالة مفيدة لك.

openok، pubnub و webrtc

سحابة المنصات OpenTok و Pubnub لتطوير خدمات الاتصالات على أساس Webrtc

2016-04-08

حاليا، أصبحت دردشات الفيديو على شبكة الإنترنت أكثر وأكثر شعبية. Web Video Chat هو تطبيق ويب للحوار للاتصالات بناء على خادم الويب والمتصفحات.

من بين جميع التقنيات الحالية لبناء فيديو ويب (AJAX؛ Java؛ تقنية الفلاش؛ ASP.NET + Silverlight؛ HTML5 + JavaScript استنادا إلى Webrtc API، وما إلى ذلك) التكنولوجيا الأكثر واعدة هي API Webrtc. توفر غرف الدردشة على الويب التي تم بناؤها على أساس تقنية WebRTC نقل نصي عالي الجودة، أصوات، فيديو وبيانات (ملفات) دون تثبيت إضافات إضافية أو ملحقات في المتصفحات. العناصر الرئيسية للدردشة الفيديو على Webrtc هي متصفح وخادم جهة اتصال.

يصبح متصفح WebRTC واجهة واحدة لجميع أجهزة المستخدم (الكمبيوتر الشخصي والهواتف الذكية، iPad، هواتف IP، هواتف محمولة، إلخ) التي تعمل مع خدمات الاتصالات. تتيح لك Webrtc with Websocket و HTML5 و CSS3 و Javascript إنشاء خدمات اتصالات الويب الجيل الجديدة. يتم تنفيذ تقنية WebRTC بواسطة ثلاثة واجهات API JavaScript.

لتشغيل التعبير ضروري مع متصفحين يدعمون WebRTC، اتصل بعنوان IP إلى خادم الإشارة (على سبيل المثال، خادم WebSocket) يعمل على node.js.js. لا يشارك الخادم في نقل تدفقات المعلومات بين المتصفحات، وهو إنذار ويهدف إلى ضبط الاتصال بين متصفحات المستخدمين.

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

يضمن واجهة برمجة التطبيقات تفاعل تطبيقات الاتصالات باستخدام منصة (خدمة الويب) التي توفر هذه API، ويوفر SDK تطوير تطبيقات الاتصالات التي يمكن أن تتفاعل مع النظام الأساسي الذي يوفر هذا SDK.

هذه المنصات تشمل: OpenTok من Tokbox، Pubnub، Voximplant، Twilio، Skyway من NTT Communications، Kandy.io، Caplearcall، إلخ. تجدر الإشارة إلى أنه لإنشاء خادم جهة اتصال، يمكنك نشر Node.js لتطبيقات اتصالات الويب على خادم VPS الظاهري المستأجر أو استخدام استضافة النظام الأساسي السحابي (PAAS)، والتي تدعم المشاريع القائمة على Node.js، على سبيل المثال، OpenShift / قبعة حمراء، Heroku / Salesforce، AWS، الفاصولي الفاصوليي المرنة / الأمازون، إلخ.

بالإضافة إلى ذلك، لإنشاء تطبيق اتصال، يمكنك شراء منصة خادم المكالمات Flashphoner (برنامج الخادم المصمم لتنظيم بث المستعرض عبر الإنترنت من تدفقات الصوت والفيديو)، والتي تعتمد على WebSockets HTML5 و Webrtc وتكنولوجيا الفلاش وتثبيتها Web -Server تحت OC Linux أو خادم VPS الظاهري المستأجر. حاليا، نشر Flashphoner خادم Webrtc الخاص به (خادم مكالمات الويب 5) على استضافة Amazon Web Services.

في هذا الاستعراض، اعتبر أكثر خدمات الويب التواصل السحابية الأكثر شعبية على أساس تقنية Webrtc - OpenTok من Tokbox و Pubnub.

OpenTok من Tokbox.

OpenTok عبارة عن منصة سحابة PAAS (منصة كخدمة)، وهي منصة الاتصال المضيف Webrtc للدمج في مواقع الويب وأدوات الاتصالات والمراسلة المتنقلة. يحتوي OpenTok على بنية تحتية موزعة تحتوي على مراكز لمعالجة البيانات في جميع أنحاء العالم.

توفر منصة Openok OpenOK من TOKBOX للمطورين القدرة على تضمين عينات فيديو عبر النظام الأساسي على أساس تطبيق Webrtc API على تطبيق الويب (مواقع الويب)، تطبيق Java / Android و iOS.

تتكون بنية Opentok من الجزء العميل من مكتبة Webrtc Openok (على سبيل المثال، Opentok.js)، والتي توفر روابط فيديو تضمينها إلى جزء العميل من التطبيق (صفحة الويب) ومجموعة الأدوات (Openok Client SDKs) ل تطوير تطبيقات العميل (JavaScript / تطبيقات الويب، Java OS / Android و iOS OS).

بالإضافة إلى ذلك، الجزء المركب من Opentok Architecture هو خادم SDK (SDK SDKS Openk)، والذي تم تصميمه لتطوير بنية تحتية للخادم (لإدارة ومصادقة المستخدمين) تطبيق يوفر توليد ديناميكي من المعرفات الفريدة لمعرف OpenTok وعلامات ( رمز) لكل مستخدم، وكذلك العمل مع أرشيف أوبينتوك. ينقل خادم الويب معرف الجلسة المناسبة والعلامة التي يمكن للعميل استخدامها بعد ذلك للاتصال بالجلسة.

يتوفر SDK SDKS OpenTok لغات البرمجة الرئيسية في جزء الخادم من التطبيقات: Java، .NET، NODE.JS، PHP، Python، Ruby. تجدر الإشارة إلى أنه إذا كانت لغة برمجة أخرى مطلوبة لجزء الخادم من التطبيق، والتي لم يتم تضمينها في القائمة المدرجة، فإن Tokbox يوفر API OpenTok Rest API لإنشاء جلسات OpenTok والعمل مع أرشيف OpenTok.

وبالتالي، لإنشاء تطبيقات الاتصالات لعقد الإنترنت، استخدم Server SDKS Openok بالاشتراك مع Webrtc Openok Client Library و SDK Client SDKs.

لاستخدام منصة OpenTok لإنشاء دردشة فيديو Webrtc مضمنة في شبكة الإنترنت، أولا وقبل كل شيء، يجب عليك إنشاء حساب على Tokbox.com. حساب مجاني في OpenTok صالح لمدة ثلاثين يوما. لدى المستخدم المسجل القدرة على الحصول على مفتاح API (Apikey) اللازم لتطوير تطبيق اتصال OpenTok. يحدد مفتاح API حساب مطور OpenTok.

باستخدام دليل مطور OpenTok (https://tokbox.com/developer/guides/) في حساب Tokbox Developer، يمكنك إنشاء تطبيق اتصال (صفحة ويب دردشة الفيديو) باستخدام SDKs OpenTok عميل. لاستخدام منصة Opentok للتطبيق، يجب عليك تمكين مكتبة Opentok.js إلى صفحة الويب.

https://static.opentok.com/webrtc/ ... / openk.js

معرف الجلسة (الجلسة) والعلامة (الرمز المميز) يتم إنشاء التطبيق المطلوب للعمل عادة برمجيا على خادم ويب مع أحد SDKS Server (SDK SDKs Openk).

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

عينات من هذه المتغيرات باعتبارها مفتاح "APIKEY"، إحدى الدورة "SessionID" و "الرمز المميز" هي:

var apikey. = "17493650";
فور جلسة \u003d "2_MX40NT ... TWXR-UH4"؛
فار الرمز المميز. \u003d "T1 \u003d\u003d CGFYD ... 2RHDGE9"؛

بعد إنشاء كائن جلسة مع معرف جلسة (SessionID) وعلامة (رمز رمزية)، يقوم التطبيق بتهيئة كائن الجلسة.

var session \u003d ot.initsession (apikey، sessionid)؛

ثم يتم توصيل العميل بالجلسة ونشر تدفقات الصوت والفيديو:

session.connect (الرمز المميز، وظيفة (خطأ) (
Publisher \u003d OT.InitPublisher ("الناشر")؛
جلسة جلسة (ناشر)؛
});

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

الدورة (((
streamcreated: وظيفة (الحدث) (
session.subscribe (حدث. ream، مشترك ")؛
}});

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

بعد ذلك، تحتاج إلى إنشاء جزء خادم من الدردشة الفيديو باستخدام SDKs OpenK Server لأحد لغات البرمجة. يتيح لك OpenK Server SDKS إنشاء جلسات OpenTok برمجيا وإنشاء علامات وعمل مع أرشفة OpenTok.

تجدر الإشارة إلى أن Tokbox يستخدم اثنين من تدفقات إعلامية (تدفقات الوسائط):

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

pubnub.

Pubnub هي شبكة تدفق البيانات العالمية ل: ioT (الإنترنت للأشياء)، المحمول وشبكة الويب. Pubnub هي خدمة مراسلة بخير في الوقت الفعلي مخصص لتنظيم اتصالات الويب بين المنصات المختلفة: الهواتف المحمولة والأجهزة اللوحية ومتصفحات الويب لعقد الويب، إلخ. يوفر Pubnub أكثر من 70 SDKs لغات البرمجة الأساسية من أجل إنشاء تطبيقات اتصالات عبر النظام الأساسي وتضمينها لتطبيقات الويب (مواقع الويب) والأجهزة المحمولة (Java / Android و iOS OS).

يتم تقديم قائمة اللغات المدعومة والخدمة SDKS Pubnub في الصفحة: https://github.com/pubnub/pubnub-api. تجدر الإشارة إلى أنه بالإضافة إلى واجهات برمجة التطبيقات، يدعم برنامج Pubnub أيضا الباقي API. على سبيل المثال، تم تصميم Pubnub WebTC SDK لتنظيم اتصالات الويب (شبكات خالية من الأقران) في الوقت الفعلي بين المتصفحات على بنية نظير إلى نظير. يتم تقديم بنية تفاعل مكونات تطبيق الاتصالات بناء على منصة Pubnub وتكنولوجيا Webrtc في الشكل. 3.

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

في تطبيقات Communication WebRTC بناء على منصة Pubnub، يتم استخدام طرق المراسلة (WebSockets and Ajax) بين المتصفح وخادم المطابقة. يوفر Pubnub API جديدا لتوصيل تطبيق Webrtc بمنصة Pubnub. ينفذ Webrtc API Pubnub Alarcity بين متصفحات المستخدمين للسماح لهم بالاتصال بنية النظراء باستخدام API PeerConnection WebTC. بعد تبادل رسائل الإشارة بين المتصفحات، يتم إنشاء اتصال دوبلكس بينهما لتبادل تدفقات الفيديو والبيانات التعسفية. يتم تنسيق اتصال المتصفح بواسطة Pubnub.

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

لاستخدام منصة Pubnub لإنشاء دردشة فيديو، أولا وقبل كل شيء، يجب عليك التسجيل في Pubnub من أجل إنشاء حساب مجاني. المستخدم المسجل لديه القدرة على الحصول على مفاتيح API subscribe_key. و publish_key.ضروري لتطوير تطبيق اتصال Pubnub. ثم في حسابك، يمكنك إضافة ميزات مثل الأمان والوجود والتخزين.

بعد تلقي واجهة برمجة تطبيقات المفاتيح، يمكنك البدء في إنشاء تطبيق اتصال بناء على منصة Pubnub باستخدام SDKS على أحد لغات البرمجة الرئيسية، أو استخدم تطبيقات العرض التوضيحي (القوالب). تم تمثيل دليل لإنشاء تطبيق اتصال في الصفحة: https://www.pubnub.com/docs/tutorials/pubnub-publish-subscribe. Pubnub Webrtc SDK المستند إلى دليل الدردشة المستندة إلى HTTPS://www.pubnub.com/docs/webrtc-javascript/pubnub-javascript-sdk.

لإنشاء دردشة فيديو Webrtc من نقطة الصفر وفقا للدليل، يجب عليك تطبيق عدد قليل من API بسيطة ل JavaScript:

• قم بتوصيل مكتبة Pubnub في صفحة HTML، I.E. تمكين JavaScript Pubnub SDK في صفحة رمز HTML قبل تهيئة العميل؛
• iNIT () - تهيئة API عميل Pubnub؛
• اشترك () - اشترك في قناة معينة (استدعاء الاشتراك () طريقة Pubnub API)؛
• نشر () - إرسال رسالة إلى قناة معينة (استدعاء طريقة النشر () Pubnub API)؛
• إلغاء الاشتراك () - رفض الاشتراك في قناة معينة.

يمكن تمثيل تهيئة API عميل Pubnub كما يلي:
فار pubnub \u003d pubnub.init ((
publish_key: "مفتاح النشر الخاص بك"،
subscribe_key: "مفتاح الاشتراك الخاص بك"
});

لإنشاء دردشة فيديو Webrtc بناء على Pubnub Webrtc، يمكنك استخدام قالب المصدر المفتوح: https://www.pubnub.com/developers/demos/webrtc/. للتحقق من تشغيل دردشة الفيديو هذه، يجب عليك الاتصال بالعنوان المحدد من جهازين، في واجهة دردشة الفيديو التي يتم فتحها في المتصفحات، يتم تعيين أرقام الهواتف على الهاتف. للتواصل، يجب على المستخدمين إدخال أرقام الهواتف في حقل نص "نوع المستلم" وانقر فوق الزر باستخدام صورة الهاتف.

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

تين. 4.Pubnub مع webrtc.

يوضح الشكل 5 لقطة شاشة دردشة الفيديو للمستخدم مع رقم الهاتف 128.

تين. 5.Pubnub مع webrtc.

تم تصميم تطبيق واجهة المستخدم واجهة المستخدم باستخدام علامة التشعبي HTML5 و CSS3. تم تصميم جزء العميل من تطبيق الاتصالات ل JS. تم توصيل المكتبات بتطبيق اتصال الويب: JQuery، Pubnub JavaScript SDK و Pubnub WebTC SDK.

تم تقسيم مستخدمي الشبكة الأوروبية إلى قسمين: وفقا لمسح لمعهد التحليل العام للرأي العام في ألينباخ (ألمانيا)، أصبحت سكايب والدردشة وأنظمة الذاكرة الفورية جزءا لا يتجزأ من الحياة اليومية 16.5 مليون شخص بالغ والأطفال، 9 مليون استخدم هذه الخدمات من حالة المناسبة، و 28 مليون لا تطرقهم.

قد يتغير الوضع، لأن الآن في فايرفوكس متكامل تكنولوجيا الاتصال في الوقت الحقيقي (Webrtc.)، وكذلك العميل نفسه. بدء تشغيل دردشة الصوت والفيديو الآن أكثر صعوبة من فتح الموقع. يتم الرهان خدمات مثل Facebook و Skype على حلول باستخدام عميل منفصل وخلق حساب.

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

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

بعد ذلك بوقت قصير، تلقى كروم وفايرفوكس محركات Webrtc الخاصة بهم. حاليا، يتم تجهيز خيارات المحمول الخاصة بهم مع كل هذه التكنولوجيا وتثبيتها مع Android 5.0 بواسطة محرك WebView 3.6، والذي يستخدمه التطبيقات.

بالنسبة للاتصالات في الوقت الفعلي، يجب تنفيذ واجهات JavaScript المناسبة في عارض الويب. بمساعدة GetUsermedia، يقوم البرنامج بتنشيط الالتقاط من المصادر الصوتية، أي من كاميرا ويب وميكروفون. rtcpeerconnection مسؤولة عن إنشاء اتصال، وكذلك للاتصال نفسه.

بالتوازي مع الاندماج في المتصفح، أجبر الفريق العامل من اتحاد الويب العالمي (W3C) على عملية توحيد WebRTC. يجب أن يكتمل في عام 2015.

Webrtc راض عن الصغيرة

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

لتعيين البث المباشر مع المحاور، يتلقى المتصفح بيانات عنوان IP وتكوينه من خدمة WebRTC. يدخل عارض الويب الخاص بالربط بنفس الطريقة.

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

إذا تعذر تثبيت الاتصال المباشر، فإن Webrtc يبحث عن مسار آخر. على سبيل المثال، يحدث هذا عندما تمنع إعدادات الشبكة خادم الصاعقة لتوفير عنوان IP. يوفر معيار WebRTC أنه في هذه الحالة ستعقد المحادثة، ولكن مع تشغيل الوسيطة على خادم الدوران (اجتياز استخدام التبديلات حول NAT). لذلك، في موقع Netscan.co، يمكنك التحقق مما إذا تم تنفيذ Webrtc على جهاز الكمبيوتر الخاص بك ومع الوصول إلى الشبكة الخاصة بك.

كيفية الاتصال

أولا تحتاج إلى تسجيل محادثة (1). تقدم خدمة WebRTC رابطا يتم إرساله إلى المحاور. يعثر المتصفح باستخدام SoNner على عنوان IP الخاص به (2)، ويرسله إلى الخدمة ويستقبل شريك IP لتثبيت المركب المباشر (3). إذا لم تتمكن من استخدام الصاعقة، تتم إعادة توجيه المحادثة باستخدام خادم Turnner (4).

يتم بدء الاتصالات على تقنية Webrtc في المتصفح باستخدام رمز JavaScript. بعد ذلك، تكون ثلاثة محركات مسؤولة عن الاتصال: تقوم محركات الأقراص الصوتية والفيديو بجمع بيانات الوسائط المتعددة من كاميرا ويب وميكروفون، ويجمع محرك النقل بين المعلومات وإدراج الدفق في النموذج المشفر باستخدام بروتوكول SRTP (بروتوكول الوقت الحقيقي الآمن).

ما المتصفحات تعمل مع WebRTC

تم تجهيز Chrome و Firefox بمحرك Webrtc يستخدم مثل هذه الخدمات مثل Talky.io. يمكن لمتصفح Mozilla أن يعمل مباشرة مع عميله الخاص.

تواصل Google و Mozilla تطوير فكرة اتصال في الوقت الفعلي: يمكن للكروم أن يحمل مؤتمر Webrtc مع العديد من المشاركين، وتم تصميم عميل Hello الجديد في Firefox مع الشركة التابعة لشركة Telefonica Telecommunication عملاقة. ظلت Apple بعد، في Safari Webrtc لتوقعها بعد. ومع ذلك، هناك العديد من التطبيقات البديلة لنظام التشغيل iOS والمكونات الإضافية ل Safari.

مايكروسوفت مختلفة إلى حد ما. كمالك خدمة تنافسية Skype، لن تكون هذه الشركة سهلة الاستخدام قبل WebRTC. بدلا من ذلك، تقوم Microsoft بتطوير تقنية تسمى ORTC (الاتصالات في الوقت الحقيقي للكائن) ل Internet Explorer.

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

صورة:الشركات المصنعة؛ goodluz / fotolia.com.

مرحبا أصدقاء، كما تعلمون بالفعل، نحن نعلمك بالتكنولوجيات الجديدة بانتظام، اليوم سأقدم Webrtc، وهي تقنية تم تطويرها بواسطة Google، والتي تتيح للمستخدمين التحدث مباشرة في متصفح الفيديو والصوت دون الحاجة إلى استخدام المواقع الإضافية أو التطبيقات وبعد يتم إجراء الاتصال المباشر للفيديو والصوت بين المستخدمين مباشرة في المتصفح.
يتم دعم تقنية WebRTC في متصفحات Mozilla Firefox Google Chrome وأي نظام تشغيل قريبا من الأوبرا.
ما هو Webrtc وماذا؟
Webrtc Short For Web Time Comunication، تتيح لك هذه التقنية فتح دردشات الصوت والفيديو مباشرة في المتصفح دون الحاجة إلى إضافات أو تطبيقات أو خدمات أخرى على الإنترنت لهذا. يتم إجراء الاتصال مباشرة من المتصفح في المتصفح.
إذا كانت الخدمات المعروفة (Skype، Yahoo Messenger، Apple FaceTime، Google Hago، إلخ) تتطلب الخادم الذي يربط المستخدمين ببدء وإدارة حركة المرور. باستخدام هذه الخدمات، نحتاج إلى تسجيل وتثبيت قائمة بالعملاء وجهات الاتصال.
مع WebRTC، لا نحتاج إلى خوادم أو تطبيقات أو خوادم مرتبطة بالتقطعة.
مزايا Webrtc:
1. لا توجد المزيد من التطبيقات التي تستهلك استخدام الموارد والبطاريات.
2. في غرف الدردشة أكثر خاصة (نسبيا).
3. كيفية الاتصال يمكن إجراء الاتصال على المستوى المحلي، وليس الخوادم الأمريكية flos للاتصالات المحلية.
4. سهل وسهولة الاستخدام.
5. إمكانية المزيد من التطوير، وفي اتجاهات أخرى.
6. الاتصالات مستقرة ولا تعتمد على المركبات الخارجية التي تكون غير مستقر في بعض الأحيان.
في الكتاب المدرسي، استخدمت عرضا تجريبيا أن الأشخاص في Google قد طوروا، هذه التجريبي بسيط للغاية، يمكن أن تستخدم المزيد من الميزات المتقدمة والاتصالات السريعة واحدة من التطبيقات التي تدعم WebRTC، فهي أسهل في الاستخدام. قريبا سنقوم بإجراء تطبيقات كتابية و Webrtc.
كيفية استخدام Webrtc Demo؟
ببساطة انقر فوق الارتباط أدناه، فإنه يولد تلقائيا الدردشة. ربط هذه الغرفة، يجب عليك إرسال صديق / صديقة تريد الاتصال به.
صديق / صديق ولك، ولكن يجب عليك استخدام أحدث إصدارات Mozilla Firefox أو Google Chrome.

Demo Webrtc. (تمهيد دردشة صوتية - فيديو)

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

يسمح لك Webrtc بتنفيذ الاتصالات الصوتية / الفيديو في الوقت الحقيقي عبر المتصفح

في هذا الموضوع، سأخبرك كيفية تنفيذ تطبيق أبسط Webrtc.

1. GetUsermedia - الحصول على الوصول إلى أجهزة الوسائط (ميكروفون / كاميرا الويب)

لا شيء معقد، بمساعدة 10 صفوف رمز JavaScript يمكنك أن ترى وسماع نفسك في المتصفح (التجريبي).

إنشاء index.html :

يمكنك تطبيق مرشحات CSS3 لعنصر الفيديو.

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

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

2. خادم الإشارة (خادم إشارة)

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

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

خادم إشارة في علمنا، إنه node.js + المقبس.io + node-static، سوف يستمع إلى المنفذ 1234.
بالإضافة إلى ذلك، يمكن لعقدة العقدة إعطاء index.html، مما سيجعل تطبيقنا بسيطا قدر الإمكان.

في مجلد التطبيق، ستقوم بتثبيت ذلك الضروري:

NPM تثبيت socket.io npm تثبيت عقدة ثابت