دوربین در مرورگر. اسکایپ، دستورالعمل های گام به گام برای ایجاد برنامه های WebRTC - دید "در Extreme". این اطلاع رسانی نحوه سازماندهی WebRTC Online Broadcast با استفاده از وب کم و VPS سرور تست پخش آنلاین WebRTC
در این مقاله، من می خواهم به نحوه استفاده از فن آوری های Webrtc و Bitrix بپردازم، برنامه وب سایت چندرسانه ای خود را ایجاد کنید :)
کمی درباره تکنولوژی
فن آوری WebRTC نسبتا اخیرا ظاهر شد، اولین پیش نویس در نوامبر 2012 معرفی شد و به معنای واقعی کلمه برای تکنولوژی سال به سطح خوبی رسید و در حال حاضر امکان استفاده از آن را دارد.
این تکنولوژی توسعه دهندگان توانایی ایجاد برنامه های کاربردی وب چند رسانه ای (تماس های ویدئویی / صوتی) را بدون نیاز به دانلود و نصب پلاگین های اضافی ارائه می دهد.
هدف آن ساخت یک پلت فرم واحد برای ارتباطات زمان واقعی است که در هر مرورگر و در هر سیستم عامل کار خواهد کرد.
اخیرا، لیست برنامه های پشتیبانی شده بسیار کوچک بود و شامل تنها یک مرورگر بود: Google Chrome.
در طول سال گذشته، این لیست به طور قابل توجهی گسترش یافته است و تکنولوژی تقریبا تمام مرورگرهای مدرن را پشتیبانی می کند :)
در حال حاضر این است: موزیلا فایرفاکس 27+ و بر اساس مرورگرهای WebKit - Google Chrome 29+، اپرا 18+، Yandex.Browser 13+.
امید وجود دارد که Safari به زودی در این لیست قرار گیرد، زیرا این شرکت وارد گروه کاری WebRTC شد فوریه 2014..
متأسفانه مایکروسافت قصد ندارد WebRTC را اجرا کند و تکنولوژی Cu-RTC وب خود را ایجاد کند، اما شاید آنها تکنولوژی خود را بیشتر یا کمتر سازگار کنند.
برای کاربران اینترنت اکسپلورر، ما پیشنهاد می کنیم یک برنامه دسکتاپ مبتنی بر کروم را آزاد کنیم و مرورگرهای خود را بدون حمایت از این تکنولوژی ارائه دهیم.
در مورد چگونگی استفاده از تکنولوژی WebRTC و کار برنامه دسکتاپ، من گفتم کنفرانس شریک زمستانی 1C-Bitrixشما می توانید گزارش خود را آنلاین یا دانلود ویدئو :)
WebRTC چگونه کار می کند؟
پس از خواندن خطوط بالا، به احتمال زیاد قبلا از دست رفته برنامه WebRTC بوده اید و عملا صفحه را بسته اید :)
اما به لمس وحشت!ما قبلا همه چیز را در محصول داریم، برای خودتان نگاه کنید:
1. پروتکل هشدار در زمان واقعی شما می توانید بر اساس فشار و کشیدن ما و ماژول برای سرور nginx - Nginx-Push-Stream-Stream، نحوه کار با آنها در جزئیات نوشته شده در وبلاگ من در bitmix (اگر این گزینه شما مناسب نیست، شما به راحتی می توانید یک محصول دیگر را جایگزین کنید، به عنوان مثال در Socket.io)؛
2. برای خزیدن ناتا، ما یک سرویس ابری ایجاد کرده ایم که برای همه کاربران محصول در دسترس است turn.calls.bitrix24.com.;
و لذت بخش ترین چیز :)
4. ما یک جزء ویژه ای را ایجاد کرده ایم که در آن تمام منطق برای آنچه که شما می توانید به سرعت به آن وارد شوید و شروع به نوشتن درخواست خود کنید (مولفه در ماژول فشار و کشیدن از نسخه 14.1.5) اجرا شده است.
برنامه نسخه ی نمایشی را اجرا کنید :)
در ماژول فشار و کشیدن (/ bitrix / ماژول / پال /)، شروع از نسخه 14.1.5، یک پوشه ظاهر شد نسخه ی نمایشی. در حال حاضر دو نمونه در آن وجود دارد:
1. نمونه ای از کار با ماژول "فشار و کشش"؛
2. مثال کار با WebRTC؛
در مورد دوم فقط می خواستم صحبت کنم :)
برای شروع کار، این مراحل را دنبال کنید:
1. کامپوننت را از پوشه / bitrix / ماژول / کشیدن / نسخه ی نمایشی / WEBRTC / Compactants /، به عنوان مثال در اینجا / bitrix / compactors / yourcompanyprefix کپی کنید
2. صفحه / Bitrix / Modules / Pull / Demo / WebRTC / HTML /، به عنوان مثال، در ریشه سایت خود را کپی کنید.
3. پیکربندی ماژول فشار و کشیدن برای کار با سرور Queue؛
4. ثبت نام دو کاربر؛
همه چیز، شما هم اکنون می توانید به این صفحه زیر دو کاربر مختلف بروید و شروع به تماس با یکدیگر کنید :)
بهترین مستندات کد منبع است
من به طور خلاصه هدف هر تابع را که در demo_webrutc.js (واقع در جزء) استفاده می شود، توضیح می دهم، هر چیز دیگری، امیدوارم از کد منبع روشن شود.
بهتر است که این جزء را درک کنید و این دو مقاله را بخوانید، این دو مقاله را بخوانید، به شما کمک می کند تا به راحتی حرکت کنید:
ایجاد کتابخانه JS شما: JS، CSS، عبارات، وابستگی.
کار با ماژول "فشار و کشیدن"
WebRTC: مقداردهی اولیه
yourcompanyprefix.webrtc ()
این کلاس کلاس WebRTC، مقادیر پیش فرض را توصیف می کند و با سیگنالینگ کار می کند.
توجه: bx.gageGGE هنگام خروج از صفحه یا راه اندازی مجدد کار خواهد کرد، در نتیجه شما می توانید تماس را قطع کنید.
bx.inheritwebrtc (yourcompanyprefix.webrtc)؛
این ویژگی باید بلافاصله پس از مقداردهی اولیه انجام شود، تمام کلاس های اصلی کتابخانه BX.WebRTC ما را ارسال می کند
WebRTC: API USERMEDIA
yourcompanyprefix.webrtc.startgetusermedia.
تابع برای دسترسی سریع به دوربین فیلمبرداری و میکروفون
yourcompanyprefix.webrtc.onusermediasucess.
این ویژگی زمانی نامیده می شود که رویداد توسط رویداد "دسترسی موفقیت آمیز به تجهیزات" منجر شود.
yourcompanyprefix.webrtc.onusermedierror.
این ویژگی زمانی نامیده می شود زمانی که رویداد خطا توسط این رویداد منجر می شود
WebRTC: API PeerConnection
yourcompanyprefix.webrtc.setlocalandsend.
این تابع متا اطلاعات مربوط به کاربر فعلی را تنظیم می کند و آن را به کاربر دیگری انتقال می دهد.
yourcompanyprefix.webrtc.onremotestreamamadded
این ویژگی زمانی نامیده می شود زمانی که یک رویداد توسط یک جریان رسانه از راه دور ایجاد می شود، برای نمایش آن در برچسب ویدئو
yourcompanyprefix.webrtc.onremotestreamremoved.
این ویژگی زمانی نامیده می شود زمانی که رویداد توسط رویداد "Disabled Media-Flow" منجر می شود تا آن را در برچسب ویدئویی خاموش کند
yourcompanyprefix.webrtc.onicecandidate.
این ویژگی زمانی نامیده می شود زمانی که این رویداد توسط "نیاز به انتقال متا اطلاعات در مورد کدک ها، IP و سایر اطلاعات" به کاربر دیگری تبدیل می شود
yourcompanyprefix.webrtc.peerconnectionError
تابع زمانی نامیده می شود زمانی که خطای اتصال بین کاربران رخ می دهد
yourcompanyprefix.webrtc.peerconnectionReconnect.
این تابع یک درخواست ارسال می کند تا سعی کند کاربر را به یک جلسه موجود وصل کند، به عنوان مثال به دلیل خطا
yourcompanyprefix.webrtc.deleteeevents.
این تابع تمام متغیرهای اصلاح شده را برای یک تماس جدید تنظیم می کند.
WebRTC: Signaling 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 یک برنامه وب برای گفتگو برای ارتباطات بر اساس یک سرور وب و مرورگرها است.
از تمام فن آوری های موجود برای ساخت یک ویدیو وب (آژاکس، جاوا؛ فناوری فلش؛ ASP.NET + Silverlight؛ HTML5 + جاوا اسکریپت بر اساس WEBRTC API، و غیره) تکنولوژی امیدوار کننده ترین API WebRTC است. اتاق های چت وب ساخته شده بر اساس تکنولوژی WebRTC، انتقال متن با کیفیت بالا، صدای، ویدئو و داده ها (فایل ها) را بدون نصب افزونه های اضافی یا برنامه های افزودنی در مرورگرها ارائه می دهند. عناصر اصلی چت ویدئویی در WebRTC یک مرورگر و یک سرور تماس است.
مرورگر WebRTC یک رابط واحد برای تمام دستگاه های کاربر (PC، گوشی های هوشمند، iPads ها، تلفن های هوشمند، تلفن های همراه، و غیره) می شود که با خدمات ارتباطی کار می کنند. WebRTC با Websocket، HTML5، CSS3 و جاوا اسکریپت به شما اجازه می دهد تا خدمات ارتباطی نسل جدید را ایجاد کنید. تکنولوژی WebRTC توسط سه رابط JavaScript API اجرا می شود.
برای بهره برداری از Peering با دو مرورگری که WebRTC را پشتیبانی می کنند، لازم است، با آدرس IP به سرور سیگنال (به عنوان مثال، سرور WebSocket) در Node.js تماس بگیرید. سرور در انتقال جریان اطلاعات بین مرورگرها شرکت نمی کند و زنگ هشدار است و در نظر گرفته شده است تا ارتباط بین مرورگرهای کاربر را تنظیم کند.
با توجه به این واقعیت که پشتیبانی WebRTC توسط تمام میزبانی انجام می شود، برای اجرای برنامه های ارتباطی بر اساس API WebRTC و ادغام آنها را به وب سایت ها (وب سایت ها) از اینترنت می کند، شما می توانید از سیستم عامل های ویژه ای استفاده کنید که از WebRTC پشتیبانی می کنند و API ها و SDK ها را پشتیبانی می کنند.
API تضمین تعامل برنامه های ارتباطی با پلت فرم (سرویس وب) ارائه این API، و SDK فراهم می کند توسعه برنامه های ارتباطی است که می تواند با پلت فرم که این SDK را فراهم می کند، برقرار می کند.
چنین سیستم عامل ها عبارتند از: Opentok از Tokbox، PubNub، Voximplant، Twilio، Skyway از NTT Communications، Kandy.io، Sightcall، و غیره لازم به ذکر است که برای ایجاد یک سرور تماس، شما می توانید Node.js را برای برنامه های ارتباطی وب در سرور مجازی VPS اجاره کنید و یا از میزبانی پلتفرم ابر (PAAS) استفاده کنید، که از پروژه های مبتنی بر node.js پشتیبانی می کند، به عنوان مثال، OpenShift / Red Hat، Heroku / Salesforce، AWS Beanstalk Elastic / Amazon و غیره
علاوه بر این، برای ایجاد یک برنامه ارتباطی، شما می توانید پلت فرم سرور تماس FlashPhoner وب سایت (نرم افزار سرور طراحی شده برای سازماندهی برنامه های آنلاین پخش آنلاین از جریان های صوتی و تصویری)، که بر اساس HTML5 WebSockets، WebRTC و تکنولوژی فلش است، و آن را نصب کنید وب سرور زیر OC لینوکس یا اجاره مجازی سرور VPS. در حال حاضر، FlashPhoner سرور WebRTC خود را مستقر کرده است (سرور تماس وب 5) در سرویس وب سایت های آمازون میزبانی وب.
در این بررسی، محبوب ترین خدمات وب سایت های ارتباطی ابری بر اساس تکنولوژی WebRTC - Opentok از Tokbox و Pubnub را در نظر بگیرید.
opentok از tokbox.
OpenTok یک پلت فرم ابر PaaS (پلت فرم به عنوان یک سرویس)، که پلت فرم ارتباطات میزبان WebRTC برای ادغام به وب سایت ها و ارتباطات تلفن همراه و ابزارهای پیام رسانی است. Opentok دارای زیرساخت توزیع شده است که شامل مراکز پردازش داده ها در سراسر جهان است.
پلت فرم باز Openok از Tokbox فراهم می کند توسعه دهندگان با توانایی قراردادن نمونه های ویدئویی متقابل پلت فرم بر اساس API WebRTC در برنامه وب سایت (وب سایت ها)، جاوا / آندروید و برنامه iOS است.
معماری OpenTOK شامل بخش مشتری از کتابخانه WebRTC OpenOK (به عنوان مثال Opentok.js) است، که پیوند های ویدئویی را به بخش سرویس گیرنده برنامه (صفحه وب) و مجموعه ای از ابزارها (SDKS Client OpenK) فراهم می کند توسعه برنامه های کاربردی مشتری (جاوا اسکریپت / برنامه های کاربردی وب، جاوا OS / Android و iOS OS).
علاوه بر این، بخش کامپوزیت معماری OpenTok سرور SDK (OpenK Server SDKS) است که برای توسعه یک زیرساخت سرور (برای مدیریت و تأیید اعتبار کاربران) یک برنامه کاربردی ارائه می دهد که تولید پویا از شناسه های منحصر به فرد شناسه Opentok و نشانگرها را فراهم می کند ( Token) برای هر کاربر، و همچنین کار با آرشیو Opentok. وب سرور، شناسه جلسه مناسب و نشانگر را انتقال می دهد که مشتری می تواند پس از آن برای اتصال به جلسه استفاده کند.
سرور SDKS OpenTok برای زبان های برنامه نویسی اصلی سرور بخشی از برنامه های کاربردی موجود است: جاوا، دات نت، node.js، پی اچ پی، پایتون، روبی. لازم به ذکر است که اگر یک زبان برنامه نویسی دیگر برای بخش سرور از برنامه مورد نیاز باشد، که در لیست ذکر شده گنجانده نشده است، TokBox یک API استراحت OpenTok را برای ایجاد جلسات Opentok فراهم می کند و با آرشیو Opentok کار می کند.
بنابراین، برای ایجاد برنامه های ارتباطی برای گره های اینترنتی، از سرور SDKS Openok در ترکیب با WebRTC OpenOK Client Client Client SDKS استفاده کنید.
برای استفاده از پلت فرم OpenTok برای ایجاد یک چت ویدئویی WebRTC که در شبکه اینترنت تعبیه شده است، ابتدا باید یک حساب کاربری را در Tokbox.com ایجاد کنید. حساب رایگان در Opentok برای سی روز معتبر است. کاربر ثبت شده توانایی دریافت کلید API (Apikey) لازم برای توسعه برنامه ارتباطی OpenTok را دارد. کلید API حساب OpenTok توسعه دهنده را شناسایی می کند.
با استفاده از راهنمای توسعه دهنده OpenTok (https://tokbox.com/developer/guides/) در حساب Developer TokBox شما می توانید یک برنامه ارتباطی (وب سایت وب چت ویدئویی) با استفاده از SDKS Client OpenTok ایجاد کنید. برای استفاده از پلت فرم OpenTok برای برنامه، شما باید OpenTok Library.js را به صفحه وب فعال کنید.
https://static.opentok.com/webrtc/ ... / openk.js
شناسه جلسه (SessionID) و نشانگر (TOKEN) برنامه مورد نیاز برای عملکرد معمولا به صورت برنامه نویسی در یک سرور وب با یکی از سرور SDKS (OpenK Server SDKS) ایجاد می شود.
اما برای ایجاد یک نسخه آزمایشی از برنامه بدون سرور SDKS Opentok، شما می توانید بر اساس کلید API (APIKEY)، یک شناسه جلسه و نشانگر برای این شناسه جلسه به صورت دستی با استفاده از نوار ابزار توسعهدهنده دریافت کنید. مشتری نیاز به یک نشانگر دارد که به او دسترسی دارد.
نمونه هایی از این متغیرها به عنوان کلید "Apikey"، شناسه جلسه "SessionID" و نشانگر "نشانه" عبارتند از:
var apikey = "17493650";
session \u003d "2_mx40nt ... twxr-uh4"؛
نشانه Var \u003d "t1 \u003d\u003d cgfyd ... 2rhdge9"؛
پس از ایجاد یک شیء جلسه با شناسه جلسه (SessionID) و یک نشانگر (نشانه)، برنامه، شیء جلسه را آغاز می کند.
var session \u003d ot.initsession (apikey، sessionID)؛
سپس مشتری به جلسه و انتشار جریان های صوتی و تصویری متصل می شود:
session.Connect (نشانه، عملکرد (خطا) (
ناشر \u003d ot.initpublisher ("ناشر")؛
Session.Publish (ناشر)؛
});
پس از اتصال مشتری به جلسه، برنامه یک شیء ناشر Opentok را آغاز می کند و جریان صوتی و تصویری را برای این جلسه برای دیدن سایر مشتریان منتشر می کند.
session.on ((
StreamCreated: تابع (رویداد) (
session.subscribe (event.stream، "مشترک")؛
}});
بنابراین، مطابق با توسعه توسعه دهنده، شما می توانید بر اساس چت ویدئویی WebRTC بر اساس پلت فرم OpenTok، که می تواند در وب سایت شما اجرا شود، ایجاد کنید. شکل 2 رابط تصویری از این چت ویدئویی را در WebRTC ایجاد شده در حساب توسعهدهنده Tokbox نشان می دهد.
بعد، شما نیاز به ایجاد یک سرور سرور از چت ویدئویی با استفاده از SDK های OpenK Server برای یکی از زبان های برنامه نویسی ایجاد کنید. SDKS Openk Server به شما امکان می دهد تا به صورت برنامه نویسی جلسات Opentok را ایجاد کنید، نشانگرها را تولید کنید و با آرشیو Opentok کار کنید.
لازم به ذکر است که Tokbox از دو جریان رسانه ای استفاده می کند (جریان رسانه ها):
- رله (رله)، در این حالت، جریان رسانه ها به طور مستقیم بین peering (به عنوان مثال، بین مرورگرهای کاربر در محفظه ویدئو یک به یک) منتقل می شود)؛
- مسیریابی (مسیریابی)، در این حالت، با استفاده از روتر رسانه OpenK برای مسیریابی جریان های صوتی ویدئویی بین مشتریان (به عنوان مثال، در چند نفره یا چت ویدئویی گروهی برای جلسات آنلاین).
Pubnub
Pubnub یک شبکه جریان اطلاعات جهانی برای: IoT (اینترنت از چیزها)، تلفن همراه و وب است. PubNub یک سرویس پیام رسانی وب کم در زمان واقعی است که برای سازماندهی ارتباطات وب بین سیستم عامل های مختلف در نظر گرفته شده است: تلفن های همراه، قرص، مرورگرهای وب گره های وب و غیره PubNub بیش از 70 SDK برای زبان های برنامه نویسی پایه فراهم می کند تا برنامه های ارتباطی متقابل پلت فرم را ایجاد کند و آنها را به برنامه های کاربردی وب (وب سایت ها) و دستگاه های تلفن همراه (Java / Android و iOS OS) جاسازی کند.
لیست زبان های پشتیبانی شده و SDKS Service PubNub در صفحه ارائه شده است: https://github.com/pubnub/pubnub-api. لازم به ذکر است که علاوه بر APIs، نرم افزار PubNub نیز از API استراحت پشتیبانی می کند. به عنوان مثال، PubNub Webrtc SDK برای سازماندهی ارتباطات وب (شبکه های رایگان همکار) در زمان واقعی بین مرورگرها در معماری همکار به هم طراحی شده است. معماری تعامل اجزای برنامه ارتباطی بر اساس پلت فرم PubNub و تکنولوژی WebRTC در شکل ها ارائه شده است. 3
به شرح زیر از تعامل مدار اجزای WEBRTC چت ویدئویی (شکل 3)، پلت فرم PubNub به عنوان یک سرور زنگ مقیاس پذیر (سرور تطبیق) برای برنامه های WebRTC استفاده می شود. علاوه بر این، پلت فرم PubNub ویژگی های اضافی مانند حضور (ارائه اطلاعات در مورد شبکه های موجود در شبکه و یا در مورد لیست فعلی کاربران)، ذخیره / پخش (به کاربران اجازه می دهد تا تاریخچه مکالمات گذشته را برای یک دوره خاص از زمان ببینید) و ثبت نام
در ارتباطات برنامه های WebRTC بر اساس پلت فرم PubNub، دو روش پیام رسانی (WebSockets و Ajax) بین مرورگر و سرور تطبیق استفاده می شود. PubNub یک API جدید برای اتصال برنامه WebRTC به پلت فرم PubNub ارائه می دهد. WebRTC API Pubnub دارای abracity بین مرورگرهای کاربر می شود تا آنها بتوانند با استفاده از Peerconnection WebRTC API به یک معماری همکار متصل شوند. پس از تبادل پیام های سیگنال بین مرورگرها، یک اتصال دوبلکس بین آنها برای تبادل جریان های ویدئویی و داده های دلخواه ایجاد می شود. ارتباط مرورگر توسط PubNub هماهنگ شده است.
سرویس PubNub نه تنها تعامل تمام اجزای لازم را فراهم می کند تا ارتباطات بین مرورگرهای peer to-peer را به منظور تبادل پیام ها در زمان واقعی فراهم کند، بلکه آنها را با یک شبکه جهانی جریان داده ها فراهم می کند.
برای استفاده از پلت فرم Pubnub برای ایجاد یک چت ویدئویی، اول از همه، شما باید در PubNub ثبت نام کنید تا یک حساب کاربری رایگان ایجاد کنید. کاربر ثبت شده توانایی دریافت کلیدهای API را دارد supercribe_key و publish_keyلازم به توسعه یک برنامه ارتباطی PubNub. سپس در حساب کاربری خود می توانید ویژگی هایی مانند امنیت، حضور و ذخیره سازی را اضافه کنید.
پس از دریافت API از کلیدها، می توانید شروع به ایجاد یک برنامه ارتباطی بر اساس پلت فرم PubNub با استفاده از SDK ها بر روی یکی از زبان های برنامه نویسی اصلی یا استفاده از برنامه های تظاهرات (قالب ها) کنید. یک راهنمای برای ایجاد یک برنامه ارتباطی در صفحه نمایش داده می شود: https://www.pubnub.com/docs/tutorials/pubnub-publish-subscribe. PUBNUB WEBRTC SDK راهنمای چت ویدئو در https://www.pubnub.com/docs/webrtc-javascript/pubnub-javascript-sdk در نظر گرفته شده است.
برای ایجاد یک چت ویدئویی WebRTC از ابتدا با توجه به کتابچه راهنمای کاربر، شما باید چند API ساده را برای جاوا اسکریپت اعمال کنید:
- کتابخانه PubNub را در صفحه HTML، I.E. فعال کردن جاوا اسکریپت PubNub SDK به صفحه کد HTML قبل از راه اندازی اولیه مشتری؛
- init () - راه اندازی PubNub Client API؛
- اشتراک () - اشتراک در یک کانال خاص (تماس با اشتراک () روش Pubnub API)؛
- انتشار () - ارسال یک پیام به یک کانال خاص (تماس با روش انتشار () Pubnub API)؛
- لغو اشتراک () - حاضر به اشتراک در یک کانال خاص نیست.
مقداردهی اولیه API مشتری PubNub را می توان به صورت زیر نشان داد:
var pubnub \u003d pubnub.init (((
publish_key: "کلید انتشار شما"،
supercribe_key: "کلید اشتراک شما"
});
برای ایجاد یک چت ویدئویی WebRTC بر اساس Pubnub WebRTC، می توانید از قالب منبع باز استفاده کنید: https://www.pubnub.com/developers/demos/webrtc/. برای بررسی عملیات این چت ویدئویی، باید با آدرس مشخص شده از دو رایانه تماس بگیرید، در رابط چت ویدئویی که در مرورگرها باز می شود، شماره تلفن به تلفن اختصاص داده می شود. برای ارتباطات، کاربران باید شماره های تلفن را در فیلد "نوع گیرنده" وارد کنند و روی دکمه با تصویر گوشی کلیک کنید.
به عنوان یک نتیجه، تصویر از دوربین های فیلمبرداری در مرورگرها قرار می گیرند و روی صفحه نمایش مانیتورها نمایش داده می شوند. علاوه بر این، این چت ویدئویی عملکرد چت را برای انتقال متن انجام می دهد. برای مکاتبات، کاربران باید متن را در فیلد "چت اینجا" وارد کنند و کلید Enter را فشار دهید. شکل 4 تصویر گپ ویدیویی کاربر را با شماره تلفن 164 نشان می دهد.
شکل. 4.Pubnub با WebRTC.
شکل 5 تصویر گپ ویدیویی کاربر را با شماره تلفن 128 نشان می دهد.
شکل. 5.Pubnub با WebRTC.
طراحی شده برای رابط کاربر برنامه ارتباطات وب طراحی شده با استفاده از نشانه گذاری HTML5 و CSS3 HyperText طراحی شده است. بخش مشتری از برنامه ارتباطی برای JS طراحی شده است. کتابخانه ها به برنامه ارتباطات وب متصل شدند: جی کوئری، PubNub جاوا اسکریپت SDK و Pubnub Webrtc SDK.
کاربران شبکه های اروپایی به دو بخش تقسیم شدند: بر اساس یک نظرسنجی از موسسه تحلیل عمومی افکار عمومی در Allenbach (آلمان)، اسکایپ، سیستم های حافظه فوری، بخشی جدایی ناپذیر از زندگی روزمره برای 16.5 میلیون بزرگسال و کودکان بود میلیون نفر از این خدمات از موارد مناسبی استفاده می کنند و 28 میلیون آنها را لمس نکرده اند.
وضعیت ممکن است تغییر کند، زیرا در حال حاضر در فایرفاکس یکپارچه شده است فناوری ارتباطات در زمان واقعی (Webrtc)، و همچنین مشتری خود. چت صوتی و تصویری را شروع کنید تا از باز کردن سایت دشوارتر نباشد. خدمات مانند فیس بوک و اسکایپ در راه حل ها با استفاده از یک مشتری جداگانه و ایجاد یک حساب کاربری شرط بندی می کنند.
WebRTC نه تنها با سادگی متفاوت است. این روش به شما امکان می دهد حتی نصب کنید اتصال مستقیم بین دو مرورگر. بنابراین، داده های صوتی و تصویری از طریق سرور عبور نمی کنند، جایی که بیش از حد می تواند اتفاق بیفتد یا سرپرست آن به ویژه در رابطه با بخش خصوصی یا حفاظت از داده ها دقیق نیست. با تشکر از اتصال مستقیم برای WebRTC، نه ثبت نام یا حساب کاربری در هر سرویس مورد نیاز نیست.
برای شروع گفتگو، فقط باید از طریق لینک بروید. ارتباطات خصوصی استاز آنجا که جریان داده رمزگذاری شده است. ارتباطات در زمان واقعی از طریق مرورگر، گوگل به طور فعال در سال 2011 به طور فعال آغاز شد، زمانی که کد منبع را برای اجرای آن WebRTC منتشر کرد.
مدت کوتاهی پس از آن، کروم و فایرفاکس موتورهای WebRTC خود را دریافت کردند. در حال حاضر، گزینه های تلفن همراه خود را با هر دو این تکنولوژی مجهز شده و با موتور Android 5.0 نصب شده اند که توسط برنامه های کاربردی استفاده می شود.
برای ارتباطات در زمان واقعی، رابط های مناسب جاوا اسکریپت باید در بیننده وب اجرا شوند. با کمک Getusermedia، این نرم افزار ضبط را از منابع صوتی فعال می کند، یعنی از وب کم و میکروفون. RTCpeerconnection مسئول ایجاد یک اتصال، و همچنین برای ارتباطات خود است.
به طور موازی با ادغام به مرورگر، گروه کاری کنسرسیوم جهانی وب جهان (W3C) فرایند استاندارد سازی WebRTC را مجبور کرده است. او باید در سال 2015 تکمیل شود.
WebRTC با کوچک راضی است
برای استفاده از سرویس WEBRTC، بسیاری از منابع مورد نیاز نیستند، زیرا سرور تنها مخاطبان را متصل می کند. نصب این ترکیب همچنین یک پیچیدگی خاص را نشان نمی دهد. اول، مرورگر به سیگنال WebRTC به سیگنال می پردازد که قصد دارد تماس برقرار کند. از سرور، یک لینک HTTPS دریافت می کند - اتصال در فرم رمزگذاری شده انجام می شود. این لینک کاربر مخاطب خود را ارسال می کند. پس از آن، مرورگر کاربر را درخواست می کند تا به وب کم و میکروفون دسترسی پیدا کند.
برای تنظیم جریان مستقیم با مخاطب، مرورگر آدرس IP و تنظیمات پیکربندی خود را از سرویس WEBRTC دریافت می کند. بیننده وب نماینده به همان شیوه وارد می شود.
برای جریان عملکرد اتصال بدون شکست و با کیفیت خوب، سه موتور در مرورگر کار می کنند. دو نفر از آنها بهینه سازی و فشرده سازی داده های ویدئویی صوتی، سومین مسئول حمل و نقل آنها است. او داده ها را از طریق پروتکل SRTP (پروتکل حمل و نقل امن در زمان واقعی)، که به شما اجازه می دهد تا جریان رمزگذاری شده را در زمان واقعی انجام دهید.
اگر اتصال مستقیم را نمی توان نصب کرد، WebRTC به دنبال یک مسیر دیگر است. به عنوان مثال، این اتفاق می افتد زمانی که تنظیمات شبکه مانع از سرور Stun برای ارائه یک آدرس IP می شود. استاندارد WebRTC فراهم می کند که در این مورد مکالمه برگزار خواهد شد، اما با تبدیل متوسط \u200b\u200bدر سرور نوبت (عبور از رله ها در اطراف NAT). بنابراین، در وب سایت Netscan.co شما می توانید بررسی کنید که آیا WebRTC بر روی کامپیوتر شما و با دسترسی به شبکه شما اجرا می شود.
چگونگی اتصال
ابتدا باید یک مکالمه ثبت نام کنید (1). سرویس WebRTC یک پیوند را به مخاطب ارسال می کند. مرورگر با استفاده از Stunner آدرس IP خود را پیدا می کند (2)، آن را به سرویس می فرستد و یک شریک IP را برای نصب ترکیب مستقیم (3) دریافت می کند. اگر شما نمی توانید از stun استفاده کنید، مکالمه با استفاده از سرور Turnner هدایت می شود (4).
ارتباطات در تکنولوژی WebRTC در مرورگر با استفاده از کد جاوا اسکریپت آغاز شده است. پس از آن، سه موتور مسئول ارتباطات هستند: درایوهای صوتی و تصویری اطلاعات چند رسانه ای را از یک وب کم و میکروفون جمع آوری می کنند و موتور حمل و نقل اطلاعات را ترکیبی می کند و جریان را در فرم رمزگذاری شده با استفاده از پروتکل SRTP (پروتکل امن زمان واقعی) به جلو می برد.
چه مرورگرها با WebRTC کار می کنند
Chrome و Firefox با موتور WebRTC مجهز شده اند که از چنین خدماتی مانند Talkie.io استفاده می کند. مرورگر موزیلا می تواند به طور مستقیم با مشتری خود کار کند.
گوگل و موزیلا همچنان یک ایده ارتباطی در زمان واقعی را توسعه می دهند: Chrome می تواند یک کنفرانس WEBRTC را با چندین شرکت کننده نگه دارد و مشتری جدید Hello در فایرفاکس با شرکت تابعه از غول مخابراتی Telefonica طراحی شده است. اپل هنوز باقی مانده است، در Safari Webrtc انتظار نداشته باشد. با این حال، بسیاری از برنامه های جایگزین برای iOS و پلاگین ها برای Safari وجود دارد.
مایکروسافت تا حدودی متفاوت است. به عنوان صاحب خدمات رقابتی اسکایپ، این شرکت قصد ندارد قبل از WebRTC بسیار آسان باشد. در عوض، مایکروسافت تکنولوژی به نام ORTC (ارتباطات زمان واقعی در زمان واقعی) را برای اینترنت اکسپلورر توسعه می دهد.
چنین تفاوت هایی از WebRTC، به عنوان سایر کدک ها و پروتکل ها برای برقراری ارتباط با سرور، ناچیز و در طول زمان هستند، به احتمال زیاد به علاوه بر استاندارد WebRTC تبدیل می شوند که این اختلافات را شامل می شود. بنابراین، بیش از حد اپل باقی می ماند - به طور معمول.
عکس:تولید کنندگان؛ goodluz / fotolia.com.
سلام دوستان، همانطور که قبلا می دانید، ما به طور منظم فناوری های جدید را مطلع می کنیم، امروز WebRTC، تکنولوژی توسعه یافته توسط Google را معرفی خواهم کرد، که به کاربران اجازه می دهد به طور مستقیم در مرورگر ویدئو و صوتی صحبت کنند بدون نیاز به استفاده از وب سایت های پلاگین یا برنامه های کاربردی . اتصال مستقیم ویدئو و صوتی بین کاربران به طور مستقیم در مرورگر انجام می شود.
تکنولوژی WebRTC در مرورگرهای گوگل کروم موزیلا فایرفاکس پشتیبانی می شود و در هر سیستم عامل به زودی به اپرا پیوست.
WebRTC چیست؟
WebRTC کوتاه برای ارتباطات زمان واقعی وب، این تکنولوژی به شما اجازه می دهد تا چت های صوتی و تصویری را به طور مستقیم در مرورگر باز کنید بدون نیاز به سایر پلاگین ها، برنامه های کاربردی یا خدمات در اینترنت برای این. اتصال به طور مستقیم از مرورگر در مرورگر انجام می شود.
اگر خدمات شناخته شده (اسکایپ، یاهو مسنجر، اپل FaceTime، Google Hago، و غیره) نیاز به یک سرور دارد که کاربران را برای شروع و مدیریت ترافیک متصل می کند. با استفاده از این خدمات، ما باید یک لیست از مشتریان و مخاطبین را ثبت کنیم و نصب کنیم.
با WebRTC، ما به سرورها، برنامه ها یا سرورهای متصل به متناوب نیاز نداریم.
مزایای WebRTC:
1. برنامه های کاربردی بیشتری که مصرف منابع و باتری مصرف می کنند.
2. در اتاق های گفتگو بیشتر خصوصی (نسبتا).
3. نحوه تماس با شما می تواند در سطح محلی ساخته شود، و نه سرور های ایالات متحده برای اتصالات محلی.
4. آسان، سهولت استفاده.
5. امکان توسعه بیشتر و در جهات دیگر.
6. ارتباطات پایدار است و به ترکیبات خارجی بستگی ندارد که گاهی اوقات بسیار ناپایدار هستند.
در کتاب درسی، من از نسخه ی نمایشی استفاده کردم که مردم در Google توسعه یافته اند، این نسخه ی نمایشی کاملا ساده است، ویژگی های پیشرفته تر و اتصالات سریع تر می تواند از یکی از برنامه هایی که از WebRTC پشتیبانی می کنند استفاده کند، آنها آسان تر از استفاده می کنند. به زودی ما یک کتاب درسی و برنامه های WebRTC را ایجاد خواهیم کرد.
نحوه استفاده از نسخه ی نمایشی WebRTC؟
به سادگی روی لینک زیر کلیک کنید، آن را به طور خودکار چت تولید می کند. کراوات این اتاق، شما باید یک دوست / دوست دختر که می خواهید در تماس باشید ارسال کنید.
دوست / دوست و شما، اما شما باید تنها از آخرین نسخه های موزیلا فایرفاکس یا Google Chrome استفاده کنید.
نسخه ی نمایشی Webrtc. (Contritory CHAT AUDIO - VIDEO)
توجه:
نسخه ی نمایشی بسیار پایدار نیست، فقط برای تظاهرات ساخته شده است. این را می توان برای مدت زمان محدودی از زمان استفاده کرد که در طی آن خطاهای کوچک ممکن است یک ترکیب داشته باشند.
اگر ارتباط برقرار کرده اید، سعی کنید یک چت دیگر ایجاد کنید.
WebRTC به شما اجازه می دهد تا ارتباطات صوتی / تصویری در زمان واقعی را از طریق مرورگر اجرا کنید
در این موضوع، به شما خواهم گفت که چگونه ساده ترین برنامه Webrtc را اجرا کنید.
1. Getusermedia - دسترسی به دستگاه های رسانه ای (میکروفون / وب کم)
هیچ چیز پیچیده نیست، با کمک 10 ردیف کد جاوا اسکریپت شما می توانید خود را در مرورگر (نسخه ی نمایشی) ببینید.
ایجاد index.html :
شما می توانید فیلترهای CSS3 را به عنصر ویدئویی اعمال کنید.
این در اینجا می افتد که در این مرحله از توسعه Webrtc من نمی توانم به مرورگر بگویید "این سایت من اعتماد، همیشه اجازه دسترسی به دوربین من و یک میکروفون" و شما نیاز به فشار دادن اجازه می دهد پس از هر صفحه باز / به روز رسانی.
خوب، آن را اضافی نخواهد بود که اگر شما به دوربین در یک مرورگر دسترسی داشته باشید، زمانی که سعی می کنید دسترسی به آن را دریافت کنید، مجوز دریافت خواهد شد.
2. سرور سیگنالینگ (سرور سیگنال)
در اینجا من دنباله ای از بیشتر "WebRTC شروع به کار" را نقض می کنم، زیرا آنها گام دوم برای نشان دادن قابلیت های Webrtc در یک مشتری، که شخصا فقط سردرگمی را به توضیح اضافه می کند.
سرور سیگنال یک مرکز هماهنگی WebRTC است که ارتباط بین مشتریان، راه اندازی اولیه و بستن اتصال را فراهم می کند.
سرور سیگنال در مورد ما، node.js + socket.io + node-static، آن را به پورت 1234 گوش می دهد.
به علاوه، Node-Static می تواند index.html را ارائه دهد، که برنامه ما را به همان اندازه ساده می کند.
در پوشه برنامه شما لازم است:
NPM نصب Socket.io NPM نصب Node-Static