WebRTC (Web Real Time Communications) нь залгаасууд болон бусад өргөтгөлүүдийг суулгахгүйгээр шууд дамжуулж буй аудио өгөгдөл, видео өгөгдөл, контентыг хөтөч болон хөтөчөөс бодит цаг хугацаанд дамжуулахыг тодорхойлдог стандарт юм. Энэхүү стандарт нь хөтөчийг видео хурлын терминал болгон хувиргах боломжийг олгодог бөгөөд харилцаа холбоог эхлүүлэхийн тулд вэб хуудсыг нээхэд хангалттай.

WebRTC гэж юу вэ?

Энэ нийтлэлд бид энгийн хэрэглэгчийн WebRTC технологийн талаар мэдэх ёстой бүх зүйлийг авч үзэх болно. Төслийн давуу болон сул талуудыг авч үзье, зарим нууцыг дэлгэж, энэ нь хэрхэн ажилладаг, WebRTC-ийг хаана, юунд ашигладаг болохыг танд хэлье.

WebRTC-ийн талаар та юу мэдэх хэрэгтэй вэ?

Видео стандарт, технологийн хувьсал

Сергей Ютсайтис, Cisco, Видео+хурал 2016

WebRTC хэрхэн ажилладаг

Үйлчлүүлэгч тал дээр

• Хэрэглэгч HTML5 шошго агуулсан хуудсыг нээнэ
• Хөтөч нь хэрэглэгчийн вэб камер болон микрофонд хандах хүсэлт тавьдаг.
• Хэрэглэгчийн хуудсан дээрх JavaScript код нь NAT болон Галт ханыг тойрч гарахын тулд холболтын параметрүүдийг (WebRTC сервер эсвэл бусад WebRTC клиентүүдийн IP хаяг, портууд) хянадаг.
• Ярилцагчийн тухай эсвэл сервер дээр холилдсон конференцийн талаархи мэдээллийг хүлээн авах үед хөтөч ашигласан аудио болон видео кодлогчийн талаар тохиролцож эхэлдэг.
• WebRTC үйлчлүүлэгчдийн хооронд (манай тохиолдолд хөтөч болон серверийн хооронд) өгөгдлийг кодлох, дамжуулах үйл явц эхэлдэг.

WebRTC сервер талд

Хоёр оролцогчийн хооронд өгөгдөл солилцоход видео сервер шаардлагагүй, гэхдээ хэрэв та хэд хэдэн оролцогчийг нэг хуралд нэгтгэхийг хүсвэл сервер шаардлагатай.

Видео сервер нь янз бүрийн эх сурвалжаас медиа урсгалыг хүлээн авч, хөрвүүлж, WebRTC-г терминал болгон ашигладаг хэрэглэгчдэд илгээх болно.

WebRTC сервер нь мөн WebRTC-ийн үе тэнгийнхний медиа траффикийг хүлээн авч, ширээний программууд эсвэл хурлын оролцогчдод дамжуулах болно. хөдөлгөөнт төхөөрөмжүүд, хэрэв байгаа бол.

Стандартын ашиг тус

• Програм хангамж суулгах шаардлагагүй.
• Үүний ачаар харилцааны маш өндөр чанар:
  • Орчин үеийн видео (VP8, H.264) болон аудио кодлогч (Opus) ашиглах.
  • Холболтын нөхцөлд урсгалын чанарыг автоматаар тохируулах.
  • Баригдсан цуурай болон дуу чимээг арилгах.
  • Оролцогчдын микрофоны түвшний автомат удирдлага (AGC).
• Аюулгүй байдлын өндөр түвшин: бүх холболтууд TLS болон SRTP протоколуудын дагуу аюулгүй бөгөөд шифрлэгдсэн байдаг.
• Десктоп гэх мэт агуулгыг авах механизм байдаг.
• HTML5 болон JavaScript дээр суурилсан аливаа хяналтын интерфейсийг хэрэгжүүлэх чадвар.
• WebSockets ашиглан интерфэйсийг ямар ч арын системтэй нэгтгэх чадвар.
• Нээлттэй эхийн төсөл - та үүнийг бүтээгдэхүүн, үйлчилгээндээ оруулах боломжтой.
• Жинхэнэ хөндлөн платформ: ижил WebRTC програм нь аль ч дээр адилхан сайн ажиллах болно үйлдлийн системХөтөч нь WebRTC-г дэмждэг бол ширээний компьютер эсвэл гар утас. Энэ нь програм хангамжийг хөгжүүлэхэд маш их нөөцийг хэмнэдэг.

Стандартын сул тал

• Бүлгийн аудио болон видео хурал зохион байгуулахын тулд оролцогчдын видео болон аудиог холих видео хурлын сервер шаардлагатай. хөтөч нь олон ирж буй урсгалыг бие биетэйгээ хэрхэн синхрончлохыг мэдэхгүй байна.
• Бүх WebRTC шийдлүүд нь бие биентэйгээ нийцэхгүй, учир нь Энэхүү стандарт нь зөвхөн видео, дуу дамжуулах аргуудыг тайлбарлаж, захиалагчдад хандах, тэдгээрийн бэлэн байдлыг хянах, мессеж, файл солилцох, хуваарь болон бусад зүйлсийг борлуулагчдад өгөх аргуудыг үлдээдэг.
• Өөрөөр хэлбэл, та нэг хөгжүүлэгчийн WebRTC програмаас өөр хөгжүүлэгчийн WebRTC програм руу залгах боломжгүй болно.
• Бүлгийн хурал холих нь маш их тооцоолох нөөц шаарддаг тул ийм төрлийн видео харилцаа холбоог худалдан авах шаардлагатай байдаг төлбөртэй захиалгаэсвэл бага хурал бүрт орчин үеийн процессорын 1 физик цөм шаардагддаг дэд бүтцэд хөрөнгө оруулалт хийх.

WebRTC нууцууд: Худалдагчид эвдэрсэн вэб технологиос хэрхэн ашиг тус хүртдэг вэ

Цачи Левент-Леви, Bloggeek.me, Видео+хурал 2015

Видео хурлын зах зээлд зориулсан WebRTC

Видео хурлын терминалын тоог нэмэгдүүлэх

WebRTC технологи нь видео хурлын зах зээлийн хөгжилд хүчтэй нөлөө үзүүлсэн. 2013 онд WebRTC дэмжлэгтэй анхны хөтчүүдийг гаргасны дараа дэлхий даяар видео хурлын терминалуудын боломжит тоо даруй 1 тэрбум төхөөрөмжөөр нэмэгджээ. Үнэн хэрэгтээ хөтөч бүр нь харилцаа холбооны чанарын хувьд техник хангамжийнхаас дутахааргүй видео хурлын терминал болсон.

Тусгай шийдэлд ашиглах

Янз бүрийн JavaScript сангууд болон үүлэн үйлчилгээний API-г WebRTC дэмжлэгтэйгээр ашиглах нь ямар ч вэб төсөлд видео дэмжлэг нэмэхэд хялбар болгодог. Өмнө нь бодит цагийн өгөгдөл дамжуулах нь хөгжүүлэгчид протоколууд хэрхэн ажилладаг талаар суралцах, бусад компаниудын ажлыг ашиглахыг шаарддаг байсан бөгөөд энэ нь ихэвчлэн нэмэлт лиценз шаарддаг бөгөөд энэ нь зардлыг нэмэгдүүлдэг. WebRTC нь "Сайтаас дуудлага хийх", "Онлайн дэмжлэг үзүүлэх чат" гэх мэт үйлчилгээнд аль хэдийн идэвхтэй ашиглагдаж байна.

Linux-д зориулсан Skype-ийн хуучин хэрэглэгчид

2014 онд Майкрософт Linux-д зориулсан Skype төслийн дэмжлэгийг зогсоож байгаагаа зарласан нь мэдээллийн технологийн мэргэжилтнүүдийн дургүйцлийг төрүүлсэн. WebRTC технологи нь үйлдлийн системтэй холбоогүй боловч хөтчийн түвшинд хэрэгждэг, өөрөөр хэлбэл. Линукс хэрэглэгчид WebRTC-д суурилсан бүтээгдэхүүн, үйлчилгээг Skype-г бүрэн орлуулах боломжтой болно.

Flash-тэй өрсөлдөөн

WebRTC болон HTML5 нь үхлийн цохилт болсон Flash технологи, аль хэдийн хамгийн сайн жилүүдээсээ хол байсан. 2017 оноос хойш тэргүүлэгч хөтчүүд Flash-ийг дэмжихээ албан ёсоор зогсоож, технологи нь зах зээлээс алга болжээ. Гэхдээ тэр бол вэб хурлын зах зээлийг бий болгож, хөтөч дээр шууд харилцах техникийн боломжуудыг санал болгосон хүн учраас та Flash-д итгэх хэрэгтэй.

WebRTC видео танилцуулга

Дмитрий Одинцов, TrueConf, Video+Conference 2017 оны 10-р сар

WebRTC дээрх кодлогч

Аудио кодлогч

WebRTC дээр аудио урсгалыг шахахын тулд Opus болон G.711 кодлогчийг ашигладаг.

G.711- уламжлалт утасны системд ихэвчлэн ашиглагддаг өндөр бит хурдтай (64 kbps) хамгийн эртний дуут кодлогч. Гол давуу тал нь хөнгөн шахалтын алгоритмыг ашигласнаар тооцооллын хамгийн бага ачаалал юм. Codec бол өөр доод түвшиндуут дохиог шахаж, хэрэглэгчид хоорондын харилцааны явцад нэмэлт аудио саатал үүсгэдэггүй.

G.711 нь олон тооны төхөөрөмжөөр дэмжигддэг. Энэ кодлогчийг ашигладаг системүүд нь бусад аудио кодлогч (G.723, G.726, G.728 гэх мэт) дээр суурилсан системээс илүү хялбар байдаг. Чанарын хувьд G.711 нь MOS тестээр 4.2 оноо авсан (4-5 оноо нь хамгийн өндөр үзүүлэлт бөгөөд ISDN дэх дуу хоолойны урсгалын чанартай төстэй, түүнээс ч өндөр чанартай гэсэн үг).

ОпусЭнэ нь кодлогчийн саатал багатай (2.5 мс-ээс 60 мс хүртэл), хувьсах битийн хурдыг дэмждэг кодлогч юм. өндөр түвшиншахалт, энэ нь хувьсагчтай сүлжээн дээр аудио дамжуулахад тохиромжтой нэвтрүүлэх чадвар. Opus бол хосолсон эрлийз шийдэл юм хамгийн сайн гүйцэтгэл SILK (дууг шахах, хүний ​​ярианы гажуудлыг арилгах) болон CELT (аудио өгөгдлийг кодлох) кодлогч. Кодек нь үнэ төлбөргүй байдаг тул үүнийг ашигладаг хөгжүүлэгчид зохиогчийн эрх эзэмшигчдэд роялти төлөх шаардлагагүй. Бусад аудио кодлогчтой харьцуулахад Opus олон талаараа ялах нь гарцаагүй. Энэ нь 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 шийдлүүдийг хөгжүүлэгчдэд энд маш том асуудал гарч ирдэг, учир нь хэрэв хуралд оролцогчид бүгд нэг хөтөч ашигладаг бол чуулганыг нэг кодлогчоор нэг удаа холиход хангалттай бөгөөд хэрэв хөтчүүд өөр, тэдгээрийн дунд байвал хангалттай. нь Safari / Edge, дараа нь бага хурал нь хоёр дахин өөр кодлогч кодчилох хэрэгтэй болно, хоёр дахин болно Системийн шаардлагамедиа серверт, үүний үр дүнд WebRTC үйлчилгээний захиалгын зардал.

WebRTC API

WebRTC технологи нь гурван үндсэн API дээр суурилдаг:

• (вэб хөтөч нь камер эсвэл хэрэглэгчийн ширээний компьютерээс аудио болон видео дохиог хүлээн авах үүрэгтэй).
• RTCPeerConnection(Камер, микрофон, ширээний компьютерээс хүлээн авсан медиа өгөгдлийг "солилцох" хөтчүүдийн хоорондох холболтыг хариуцдаг. Мөн энэхүү API-ийн "үүрэг" нь дохио боловсруулах (гадны чимээ шуугианаас цэвэрлэх, микрофоны дууг тохируулах) болон хяналтыг багтаана. ашигласан аудио болон видео кодлогч).
• RTC мэдээллийн суваг(тогтоосон холболтоор хоёр талын өгөгдөл дамжуулах боломжийг олгодог).

Хэрэглэгчийн микрофон болон камерт хандахын өмнө хөтөч энэ зөвшөөрлийг хүсдэг. AT Гүүгл КромТа хандалтыг "Тохиргоо" хэсэгт, Opera болон Firefox-д урьдчилан тохируулах боломжтой бөгөөд төхөөрөмжүүдийн сонголт нь нэвтрэх үед шууд унадаг жагсаалтаас хийгддэг. Зөвшөөрлийн хүсэлт нь HTTP протоколыг ашиглах үед үргэлж гарч ирэх бөгөөд HTTPS ашиглаж байгаа бол нэг удаа:

RTCPeerConnection. WebRTC бага хуралд оролцож буй хөтөч бүр энэ объектод хандах эрхтэй байх ёстой. RTCPeerConnection ашигласны ачаар нэг хөтчөөс нөгөө хөтчөөс зөөвөрлөгчийн өгөгдөл NAT болон галт ханаар дамжих боломжтой. Медиа урсгалыг амжилттай дамжуулахын тулд оролцогчид вэб залгуур гэх мэт тээвэрлэлтийг ашиглан дараах өгөгдлийг солилцох ёстой.

• санаачлагч оролцогч хоёр дахь оролцогч руу Offer-SDP (өгөгдлийн бүтэц, түүний дамжуулах медиа урсгалын шинж чанар) илгээдэг;
• хоёр дахь оролцогч "хариулт" - Хариулт-SDP үүсгэж, санаачлагч руу илгээнэ;
• дараа нь оролцогчдын хооронд ICE нэр дэвшигчдийн солилцоог зохион байгуулдаг, хэрэв олдсон бол (хэрэв оролцогчид NAT эсвэл галт хананы ард байгаа бол).

Оролцогчдын хооронд энэхүү солилцоо амжилттай дууссаны дараа медиа урсгал (аудио болон видео) дамжуулах ажлыг шууд зохион байгуулдаг.

RTC мэдээллийн суваг. Мэдээллийн сувгийн протоколын дэмжлэг нь хөтөч дээр харьцангуй саяхан гарч ирсэн тул энэ API нь зөвхөн WebRTC-г ашигласан тохиолдолд л авч үзэх боломжтой. Mozilla хөтчүүд Firefox 22+, Google Chrome 26+. Үүний тусламжтайгаар оролцогчид солилцох боломжтой мессежхөтөч дээр.

WebRTC холболт

Дэмжигдсэн ширээний хөтчүүд

• Google Chrome (17+) болон Chromium хөдөлгүүрт суурилсан бүх хөтөч;
• Mozilla Firefox (18+);
• дуурь (12+);
• Сафари (11+);

Android-д зориулсан гар утасны хөтөчийг дэмждэг

• Google Chrome (28+);
• Mozilla Firefox (24+);
• Opera Mobile (12+);
• Сафари (11+).

WebRTC, Microsoft болон Internet Explorer

Майкрософт маш удаан хугацаанд WebRTC-ийн дэмжлэгийн талаар чимээгүй байсан Internet Explorerмөн түүний шинэ Edge хөтөч. Рэдмондын залуус өөрсдийнхөө мэдэлд байдаггүй технологийг хэрэглэгчдийн гарт оруулах дургүй, ийм л бодлого. Гэвч аажмаар бүх зүйл эхнээсээ бууж эхэлсэн, учир нь. WebRTC-ийг үл тоомсорлох боломжгүй болсон бөгөөд WebRTC стандартаас гаралтай ORTC төслийг зарлав.

Хөгжүүлэгчдийн үзэж байгаагаар ORTC нь JavaScript болон HTML5 дээр суурилсан сайжруулсан API багц бүхий WebRTC стандартын өргөтгөл бөгөөд энгийн хэлээр орчуулбал бүх зүйл ижил байх болно, зөвхөн Google биш, Microsoft л стандартыг хянах болно гэсэн үг юм. ба түүний хөгжил. Утас болон техник хангамжийн видео хурлын системд ашигладаг H.264 болон G.7XX цувралын зарим аудио кодлогчийн дэмжлэгтэйгээр кодлогчийн багцыг өргөжүүлсэн. Магадгүй RDP (агуулгыг дамжуулах) болон мессежийн хувьд суурилуулсан дэмжлэг байх болно. Дашрамд хэлэхэд, Internet Explorer-ийн хэрэглэгчид азгүй байна, ORTC дэмжлэг нь зөвхөн Edge дээр байх болно. Мэдээжийн хэрэг, ийм протокол, кодлогчийн багц нь бага хэмжээний цустай Skype for Business-тэй нийцдэг бөгөөд энэ нь WebRTC-д илүү их бизнесийн програмуудыг нээж өгдөг.

Европын интернет хэрэглэгчдийг хоёр хэсэгт хуваадаг: Алленбах (Герман) дахь Олон нийтийн санаа бодлыг шинжлэх хүрээлэнгийн судалгаагаар Skype, чат, мессежийн систем нь 16.5 сая насанд хүрэгчид болон хүүхдүүдийн өдөр тутмын амьдралын салшгүй хэсэг болсон (9 сая). Эдгээр үйлчилгээг тухай бүр ашиглаж, 28 сая нь тэдэнд хүрдэггүй.

Firefox-г нэгтгэсэн тул нөхцөл байдал өөрчлөгдөж магадгүй юм бодит цагийн харилцаа холбооны технологи (WebRTC), түүнчлэн үйлчлүүлэгч өөрөө. Аудио болон видео чат эхлүүлэх нь вэбсайт нээхээс илүү хэцүү биш юм. Харин Facebook, Skype зэрэг үйлчилгээнүүд нь тусдаа үйлчлүүлэгч ашиглах, данс үүсгэх шийдэлд тулгуурладаг.

WebRTC нь зөвхөн ашиглахад хялбар биш юм. Энэ арга нь бүр тохируулах боломжийг олгодог хоёр хөтөч хооронд шууд холболт. Ийм байдлаар аудио болон видео өгөгдөл нь түгжрэл үүсч болзошгүй эсвэл администратор нь хувийн нууцлал, мэдээллийн хамгаалалтад онцгой мэдрэмжгүй серверээр дамжихгүй. Шууд холболтын ачаар WebRTC нь ямар ч бүртгэл шаарддаггүй Дансямар ч үйлчилгээнд.

Харилцааг эхлүүлэхийн тулд та зөвхөн холбоосыг дагахад л хангалттай. Харилцаа холбоо нууц хэвээр байнаУчир нь өгөгдлийн урсгал нь шифрлэгдсэн байдаг. Хөтөчөөр дамжуулан бодит цагийн харилцаа холбоо Google 2011 онд тэрээр WebRTC хэрэгжүүлэлтийн эх кодыг нийтлэхэд идэвхтэй оролцож эхэлсэн.

Үүний дараахан Chrome болон Firefox нь өөрсдийн WebRTC хөдөлгүүрийг хүлээн авав. Тэд одоогоор байна гар утасны сонголтуудЭнэ технологи болон WebView 3.6 хөдөлгүүрээр тоноглогдсон бөгөөд энэ нь Android 5.0 үйлдлийн системтэй бөгөөд программуудад ашиглагддаг.

Бодит цагийн харилцааны хувьд тохирох JavaScript интерфэйсийг вэб үзүүлэгч дээр хэрэгжүүлсэн байх ёстой. GetUserMedia-г ашиглах програм хангамжвэб камер, микрофон гэх мэт аудио болон видео эх сурвалжаас зураг авалтыг идэвхжүүлдэг. RTCPeerConnection нь холболтыг бий болгохоос гадна харилцаа холбоог өөрөө хариуцдаг.

Хөтөчийг нэгтгэхтэй зэрэгцээ ажлын хэсэг World Wide Web Consortium (W3C) нь WebRTC стандартчиллын үйл явцыг эрчимжүүлж байна. 2015 онд дуусгах ёстой.

WebRTC нь бага зэрэг агуулгатай

WebRTC үйлчилгээг ашиглах нь олон нөөц шаарддаггүй, учир нь сервер нь зөвхөн найзуудаа холбодог. Холболтыг бий болгох нь тийм ч хэцүү биш юм. Нэгдүгээрт, хөтөч нь дуудлага хийхээр төлөвлөж буй WebRTC серверт дохио өгдөг. Энэ нь серверээс HTTPS холбоосыг хүлээн авдаг - холболт шифрлэгдсэн байна. Хэрэглэгч энэ холбоосыг ярилцагчдаа илгээдэг. Дараа нь хөтөч нь хэрэглэгчээс вэбкамер болон микрофон руу нэвтрэх зөвшөөрөл хүсдэг.

Нөгөө талтай шууд дамжуулалтын холболт үүсгэхийн тулд хөтөч нь IP хаяг болон тохиргооны өгөгдлийг WebRTC үйлчилгээнээс авдаг. Найзын вэб хөтөч ч мөн адил хийдэг.

Урсгалын холболтыг жигд, чанартай ажиллуулахын тулд хөтөч дээр гурван хөдөлгүүр ажилладаг. Тэдний хоёр нь аудио болон видео мэдээллийг оновчтой болгож, шахаж, гурав дахь нь тээвэрлэлтийг хариуцдаг. Энэ нь дамжуулан өгөгдлийг илгээдэг SRTP протокол(Secure Real-time Transport Protocol) нь бодит цагийн шифрлэгдсэн дамжуулалтыг зөвшөөрдөг.

Хэрэв шууд холболт амжилтгүй болвол WebRTC өөр замыг хайна. Жишээлбэл, энэ нь хэзээ тохиолддог сүлжээний тохиргоо STUN сервер IP хаягийг мэдээлэхээс сэргийлнэ. WebRTC стандарт нь энэ тохиолдолд харилцан яриа явагдах болно, гэхдээ TURN серверийг завсрын байдлаар (NAT-ийн эргэн тойронд релей ашиглах) ашиглана гэж заасан байдаг. Тиймээс, netscan.co вэбсайтаас та WebRTC таны компьютер дээр хэрэгжсэн эсэх, вэб рүү нэвтрэх эрхээ шалгах боломжтой.

Холболт хэрхэн хийгдсэн

Эхлээд та харилцан яриаг бүртгүүлэх хэрэгтэй (1). WebRTC үйлчилгээ нь ярилцагч руу илгээх шаардлагатай холбоосыг өгдөг. Хөтөч нь STUNserver ашиглан өөрийн IP хаягийг (2) олж, үйлчилгээ рүү илгээж, шууд холболт үүсгэхийн тулд түншийн IP-г хүлээн авдаг (3). Хэрэв STUN амжилтгүй болвол TURNсервер (4) ашиглан харилцан яриаг дахин чиглүүлнэ.

Хөтөч дээрх WebRTC технологийг ашиглан харилцаа холбоог JavaScript код ашиглан эхлүүлсэн. Үүний дараа гурван хөдөлгүүр нь харилцаа холбоог хариуцдаг: дуут болон видео хөдөлгүүр нь вэб камер, микрофоноос мультимедиа өгөгдлийг цуглуулдаг бөгөөд тээврийн хэрэгсэл нь мэдээллийг нэгтгэж, бодит цагийн аюулгүй байдлын протокол (SRTP) ашиглан дамжуулалтыг шифрлэсэн хэлбэрээр илгээдэг.

WebRTC-тэй ямар хөтчүүд ажилладаг

Chrome болон Firefox нь talky.io зэрэг үйлчилгээг ашигладаг WebRTC хөдөлгүүрээр тоноглогдсон. Mozilla хөтөч нь өөрийн үйлчлүүлэгчтэй шууд ажиллах боломжтой.

Google болон Mozilla нь бодит цагийн харилцааны санааг үргэлжлүүлэн хөгжүүлсээр байна: Chrome нь олон оролцогчтой WebRTC бага хурал зохион байгуулах боломжтой бөгөөд Firefox дахь шинэ Hello клиентийг харилцаа холбооны аварга Telefonica-ийн охин компанийн тусламжтайгаар боловсруулсан. Apple одоогоор хажуу тийшээ байгаа тул та Safari-д WebRTC-ийг хараахан хүлээх ёсгүй. Гэсэн хэдий ч Safari-д зориулсан өөр олон iOS програмууд болон залгаасууд байдаг.

Майкрософт арай өөр курс авч байна. Өрсөлдөх чадвартай Skype үйлчилгээний эзэмшигчийн хувьд энэ компани WebRTC-д тийм ч амархан бууж өгөхгүй. Харин Microsoft нь Internet Explorer-д зориулсан ORTC (Object Real-Time Communications) хэмээх технологийг хөгжүүлж байна.

WebRTC-ийн ялгаа, тухайлбал сервертэй холбоо тогтоох өөр өөр кодлогч, протоколууд нь бага бөгөөд цаг хугацаа өнгөрөхөд WebRTC стандартаас гадна эдгээр ялгааг агуулсан байх магадлалтай. Тиймээс ердийнх шигээ зөвхөн Apple л үлдэж байна.

Зураг:үйлдвэрлэлийн компаниуд; goodluz/Photolia.com

WebRTC нь хөтчөөс хангагдсан API бөгөөд P2P холболтыг зохион байгуулж, хөтчүүдийн хооронд шууд өгөгдөл дамжуулах боломжийг олгодог. Хэзээ өөрийн видео чат бичих талаар нэлээн хэдэн заавар интернетэд байдаг WebRTC тусламж. Жишээлбэл, Хабрегийн тухай нийтлэл энд байна. Гэсэн хэдий ч тэд бүгд хоёр үйлчлүүлэгчийг холбохоор хязгаарлагддаг. Энэ нийтлэлд би WebRTC ашиглан гурав ба түүнээс дээш хэрэглэгчдийн хооронд холболт, мессеж солилцох талаар ярихыг хичээх болно.

RTCPeerConnection интерфэйс нь хоёр хөтөч хоорондын үе тэнгийн холболт юм. Гурав ба түүнээс дээш хэрэглэгчийг холбохын тулд бид торон сүлжээг зохион байгуулах шаардлагатай болно (зангилаа бүр бусад бүх зангилаатай холбогдсон сүлжээ).
Бид дараахь схемийг ашиглана.

1. Хуудсыг нээхдээ бид өрөөний ID байгаа эсэхийг шалгадаг байршил.хэш
2. Хэрэв өрөөний ID-г заагаагүй бол шинээр үүсгэнэ үү
3. Бид дохионы сервер рүү "заасан өрөөнд нэгдэхийг хүсч буй мессежийг илгээдэг
4. Дохионы сервер нь энэ өрөөнд байгаа бусад үйлчлүүлэгчдэд шинэ хэрэглэгчийн мэдэгдлийг илгээдэг
5. Өрөөнд аль хэдийн орсон үйлчлүүлэгчид шинээр ирсэн хүнд SDP санал илгээдэг
6. Шинээр ирсэн хүн "s" гэсэн саналд хариулдаг

0. Дохионы сервер

Таны мэдэж байгаагаар WebRTC нь хөтчүүдийн хооронд P2P холболт хийх боломжийг олгодог боловч үйлчилгээний мессеж солилцоход нэмэлт тээвэрлэлт шаардлагатай хэвээр байна. Энэ жишээнд тээвэрлэлт нь socket.io ашиглан Node.JS дээр бичигдсэн WebSocket сервер юм:

var socket_io = шаардах("socket.io"); module.exports = функц (сервер) ( var хэрэглэгчид = (); var io = socket_io(сервер); io.on("холболт", функц(сокет) ( // Өрөөнд шинэ хэрэглэгч нэгдэхийг хүсэж байна socket.on( "room ", function(message) ( var json = JSON. parse(message); // Хэрэглэгчдийн жагсаалтад сокет нэмэх = сокет; if (socket.room !== тодорхойгүй) ( // Хэрэв залгуур нь аль хэдийн зарим өрөөнд байгаа бол үүнийг үлдээгээрэй socket.leave(socket.room); ) // Хүссэн өрөөг оруулна уу socket.room = json.room; socket.join(socket.room); socket.user_id = json.id; // Энэ өрөөнд шинэ оролцогч socket.broadcast.to(socket.room).emit("new", json.id); )); // WebRTC-тэй холбоотой мессеж (SDP санал, SDP хариулт) байгаа бусад үйлчлүүлэгчид рүү илгээх. эсвэл ICE нэр дэвшигч) socket.on("webrtc", function(message) ( var json = JSON.parse(message); if (json.to !== undefined && users !== undefined)) ( // Хэрэв мессеж байгаа бол хүлээн авагч болон серверт мэдэгдэж байгаа энэ хүлээн авагч, мессеж илгээнэ үү зөвхөн түүнд... хэрэглэгчид.emit("webrtc", мессеж); ) else ( // ...эсвэл мессежийг өргөн нэвтрүүлгийн залгуур гэж үзнэ.broadcast.to(socket.room).emit("webrtc", мессеж); ) )); // Хэн нэгэн socket.on("disconnect", function()-г салгасан байна ( // Үйлчлүүлэгч салгавал socket.broadcast.to(socket.room).emit("leave", socket.user_id); хэрэглэгчдийг устгах; ))) ))) );

1. индекс.html

Хуудасны эх код нь өөрөө маш энгийн. Энэ нийтлэл нь энэ тухай биш тул би зохион байгуулалт болон бусад сайхан зүйлсийг санаатайгаар анхаарч үзээгүй. Хэрэв хэн нэгэн түүнийг үзэсгэлэнтэй болгохыг хүсч байвал энэ нь тийм ч хэцүү биш байх болно.

2.main.js

2.0. Хуудасны элементүүд болон WebRTC интерфэйсүүдийн холбоосыг авч байна

var chatlog = document.getElementById("chatlog"); var message = document.getElementById("мессеж"); var connection_num = document.getElementById("холболтын_тоо"); var room_link = document.getElementById("өрөөний_холбоос");

Бид WebRTC интерфэйсүүдэд хандахын тулд хөтчийн угтварыг ашиглах шаардлагатай хэвээр байна.

Var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

2.1. Өрөөний ID-г тодорхойлох

Энд бидэнд өвөрмөц өрөө болон хэрэглэгчийн ID үүсгэх функц хэрэгтэй байна. Бид энэ зорилгоор UUID ашиглах болно.

Функц uuid () ( var s4 = function() ( буцаана Math.floor(Math.random() * 0x10000).toString(16); ); буцаана s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); )

Одоо хаягаас өрөөний ID-г гаргаж авахыг оролдъё. Хэрэв үүнийг тохируулаагүй бол бид шинээр үүсгэх болно. Бид хуудсан дээрх одоогийн өрөөний холбоосыг харуулах бөгөөд үүний зэрэгцээ бид одоогийн хэрэглэгчийн танигчийг үүсгэх болно.

VarROOM = location.hash.substr(1); if (!ROOM) ( ROOM = uuid(); ) room_link.innerHTML = "Өрөөнд холбох"; varME = uuid();

2.2. вэб залгуур

Хуудсыг нээсэн даруйдаа бид дохионы сервертэйгээ холбогдож, өрөөнд орох хүсэлтийг илгээж, мессеж боловсруулагчдыг зааж өгнө.

// Мессеж хаагдсан үед бид серверт энэ тухай мэдэгдэл илгээх хэрэгтэйг зааж өгсөн var socket = io.connect("", ("буулгах үед синхрончлолыг таслах": үнэн)); socket.on("webrtc", socketReceived); socket.on("шинэ", socketNewPeer); // Өрөөнд орох хүсэлтийг нэн даруй илгээнэ үү socket.emit("өрөө", JSON.stringify((id: ME, өрөө: ROOM))); // WebRTC функцтэй холбоотой хаягийн мессежийг илгээх туслах функц sendViaSocket(төрөл, мессеж, to) ( socket.emit("webrtc", JSON.stringify((id: ME, to: to, type: type, data: message )) )))

2.3. Үе тэнгийн холболтын тохиргоо

Ихэнх ISP нь NAT-ээр дамжуулан интернетийн холболтыг хангадаг. Үүнээс болж шууд холболт тийм ч энгийн биш болдог. Холболт үүсгэх үед бид NAT-ыг тойрч гарахын тулд хөтөч ашиглахыг оролдох STUN болон TURN серверүүдийн жагсаалтыг зааж өгөх хэрэгтэй. Бид бас хосыг зааж өгдөг нэмэлт сонголтуудхолбохын тулд.

Var server = ( iceServers: [ (url: "stun:23.21.150.121"), (url: "stun.l.google.com:19302"), (url: "turn:numb.viagenie.ca", итгэмжлэл: "таны нууц үг энд байна", хэрэглэгчийн нэр: " [имэйлээр хамгаалагдсан]") ] ); var options = (заавал биш: [ (DtlsSrtpKeyAgreement: үнэн), // Chrome болон Firefox хооронд холбогдоход шаардлагатай (RtpDataChannels: үнэн) // DataChannels API ашиглахын тулд Firefox-д шаардлагатай ] )

2.4. Шинэ хэрэглэгчийг холбож байна

Өрөөнд шинэ үе тэнгийнхэн нэмэгдэхэд сервер бидэнд мессеж илгээдэг шинэ. Дээрх мессеж боловсруулагчийн дагуу функц дуудагдах болно socketNewPeer.

var peers = (); function socketNewPeer(өгөгдөл) ( peers = (candidateCache: ); // Шинэ холболт үүсгэх var pc = new PeerConnection(сервер, сонголтууд); // Үүнийг эхлүүлэх initConnection(pc, өгөгдөл, "санал"); // Peer-ийг хадгалах жагсаалтад peers peers.connection = pc; // Мэдээлэл солилцох DataChannel үүсгэх var channel = pc.createDataChannel("mychannel", ()); channel.owner = data; peers.channel = суваг; // Үйл явдал зохицуулагчийг суулгах bindEvents(channel); // SDP санал үүсгэх pc.createOffer(function(offer) ( pc.setLocalDescription(offer); )); ) function initConnection(pc, id, sdpType) ( pc.onicecandidate = функц ( event) ( if (event.candidate) ( // Шинэ ICE нэр дэвшигч олдвол peers.candidateCache.push(event.candidate); ) өөр ( // Нэр дэвшигчид илэрсэн үед түүнийг цааш илгээх жагсаалтад нэмнэ үү. дууссан бол зохицуулагч дахин дуудагдах боловч нэр дэвшигчгүй // Энэ тохиолдолд бид эхлээд SDP саналыг үе тэнгийнхэнд илгээнэ, эсвэл SDP-ийн хариулт (функцийн параметрээс хамаарч)... sendViaSocket(sdpType, pc.localDescription, id); // ... тэгээд өмнө нь олсон бүх ICE нэр дэвшигчид (var i = 0; i< 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 хариулт, ICE нэр дэвшигч

Эдгээр мессежүүдийн аль нэгийг хүлээн авах үед бид харгалзах мессеж боловсруулагчийг дууддаг.

Function socketReceived(data) ( var json = JSON.parse(data); switch (json.type) ( case "candidate": remoteCandidateReceived(json.id, json.data); завсарлага; case "offer": remoteOfferReceived(json. id, json.data); завсарлага; "хариулт" тохиолдол: remoteAnswerReceived(json.id, json.data); завсарлага; ) )

2.5.0 SDP санал

функц remoteOfferReceived(id, өгөгдөл) ( createConnection(id); var pc = peers.connection; pc.setRemoteDescription (шинэ SessionDescription(өгөгдөл)); pc.createAnswer(функц(хариулт) ( pc.setLocalDescription(хариу); )); ) функц createConnection(id) ( if (peers === тодорхойгүй) ( peers = (candidateCache: ); var pc = new PeerConnection(сервер, сонголтууд); initConnection(pc, id, "хариу"); peers.connection = pc ; pc.ondatachannel = функц(e) ( peers.channel = e.channel; peers.channel.owner = id; bindEvents(peers.channel); ) ) )

2.5.1 SDP хариултууд

remoteAnswerReceived(id, өгөгдөл) функц ( var pc = peers.connection; pc.setRemoteDescription(шинэ SessionDescription(өгөгдөл)); )

2.5.2 ICE нэр дэвшигч

функц remoteCandidateReceived(id, data) ( createConnection(id); var pc = peers.connection; pc.addIceCandidate(шинэ IceCandidate(өгөгдөл)); )

2.6. Мессеж илгээж байна

Товчлуур дээр дарснаар илгээхфункц гэж нэрлэдэг зурвас илгээх. Энэ нь зөвхөн үе тэнгийнхний жагсаалтад орж, заасан мессежийг хүн бүрт илгээхийг оролдох явдал юм.

Өнөөдөр WebRTC нь хөтчөөр аудио болон видео дамжуулах "халуун" технологи юм. зэрэг консерватив технологиуд HTTP дамжуулалтболон Flash нь бичигдсэн контентыг түгээхэд илүү тохиромжтой (хүсэлтээр видео) бөгөөд бодит цагийн болон онлайн нэвтрүүлгүүдийн хувьд WebRTC-ээс хамаагүй доогуур байдаг, i.e. Видеоны хоцрогдол хамгийн бага байх ёстой бөгөөд үзэгчид юу болж байгааг "амьд" харах боломжийг олгодог.

Бодит цагийн өндөр чанарын харилцааны боломж нь WebRTC архитектураас гаралтай бөгөөд UDP протокол нь видео урсгалыг тээвэрлэхэд ашиглагддаг бөгөөд энэ нь видеог хамгийн бага сааталтайгаар дамжуулах стандарт үндэс бөгөөд бодит цагийн харилцааны системд өргөн хэрэглэгддэг.

Шууд дамжуулалтын систем, вебинар болон видеоны эх сурвалж, эцсийн хэрэглэгчидтэй интерактив харилцаа холбоо, шийдэл шаардлагатай бусад програмуудад харилцааны хоцрогдол чухал байдаг.

WebRTC-г туршиж үзэх бас нэг сайн шалтгаан бол гарцаагүй чиг хандлага юм. Өнөөдөр бүх Android Chrome хөтөчЭнэ технологийг дэмждэг бөгөөд энэ нь олон сая төхөөрөмжийг ямар ч нэмэлт програм хангамж, тохиргоо суулгахгүйгээр нэвтрүүлгийг үзэхэд бэлэн болгодог.

WebRTC технологийг туршиж үзэх, түүн дээр энгийн онлайн нэвтрүүлэг эхлүүлэхийн тулд бид Flashphoner WebRTC Media & Broadcasting Server серверийн програм хангамжийг ашигласан. Онцлогууд нь WebRTC урсгалыг нэгээс олон горимд дамжуулах, мөн RTSP протоколоор дамжуулан IP камер, видео тандалтын системийг дэмжих боломжийг тунхаглаж байна; Энэхүү тоймд бид вэб вэб нэвтрүүлэг, тэдгээрийн онцлог шинж чанаруудад анхаарлаа хандуулах болно.

WebRTC Media & Broadcasting Server суулгаж байна

Учир нь Windows системүүдсерверийн хувилбар байхгүй байсан бөгөөд би VMWare + Linux гэх мэт виртуал машин суулгаж, онлайн нэвтрүүлгийг туршиж үзэхийг хүсээгүй. Windows-ийн гэркомпьютер амжилтгүй болсон. Цаг хэмнэхийн тулд бид үүл байршуулах жишээг дараах байдлаар авахаар шийдсэн:

Энэ нь Амстердамын мэдээллийн төвд урьдчилан суулгасан програм хангамжгүй Centos x86_64 хувилбар 6.5 байсан. Тиймээс бидний мэдэлд байгаа бүх зүйл бол сервер ба ssh хандалт юм. Мэддэг хүмүүст зориулав консол командуудЛинукс, суурилуулалт WebRTC серверүүдэнгийн бөгөөд өвдөлтгүй өнгөрөхийг амлаж байна. Тэгэхээр бид юу хийв:

1. Архив татаж авах:

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

2. Баглаа задлах:

$tar -xzf татаж авах-wcs5-server.tar.gz

3. Суулгах:

$cd FlashphonerWebCallServer

Суулгах явцад серверийн IP хаягийг оруулна уу: XXX.XXX.XXX.XXX

4. Лицензийг идэвхжүүлэх:

$cd /usr/local/FlashphonerWebCallServer/bin

$./activation.sh

5. WCS серверийг эхлүүлэх:

$service вэб дуудлагын сервер эхлүүлнэ

6. Шалгах бүртгэл:

$tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log

7. Хоёр процесс байгаа эсэхийг шалгана уу:

$ps aux | grep Flashphoner

Суулгах процесс дууссан.

WebRTC шууд дамжуулалтыг туршиж байна

Нэвтрүүлгийг турших нь энгийн зүйл болж хувирав. Серверээс гадна хэдэн арван Javascript, HTML, CSS файлуудаас бүрдэх вэб клиент байдаг бөгөөд үүнийг суулгах үе шатанд бид /var/www/html хавтсанд байршуулсан. Хийх ёстой цорын ганц зүйл бол серверийн IP хаягийг flashphoner.xml тохиргоонд оруулах бөгөөд ингэснээр вэб клиент HTML5 Websockets-ээр дамжуулан сервертэй холбогдох боломжтой болно. Туршилтын үйл явцыг тайлбарлая.

1. Chrome хөтөч дээр туршилтын үйлчлүүлэгчийн index.html хуудсыг нээнэ үү:

2. Өргөн нэвтрүүлгийг эхлүүлэхийн тулд та дэлгэцийн дунд байрлах "Эхлүүлэх" товчийг дарах хэрэгтэй.
Үүнийг хийхийн өмнө вэбкамер холбогдсон, ажиллахад бэлэн байгаа эсэхийг шалгах хэрэгтэй. Вэбкамерын хувьд тусгай шаардлага байхгүй, жишээлбэл, бид 1280 × 800 нягтралтай зөөврийн компьютерын стандарт камер ашигласан.

Chrome хөтөч нь камер, микрофон руу нэвтрэхийг хүсэх нь гарцаагүй бөгөөд ингэснээр хэрэглэгч өөрийн видеог интернет сервер рүү илгээх болно гэдгийг ойлгож, түүнд үүнийг хийхийг зөвшөөрдөг.

3. Интерфэйс нь камераас WebRTC сервер рүү видео дамжуулалтыг амжилттай дамжуулж байгааг харуулж байна. Баруун дээд буланд дамжуулалт сервер рүү явж байгааг харуулж байгаа бол доод буланд видео илгээхийг зогсоох "Зогс" товчлуур байна.

Доорх линкээр ороод үзээрэй. Энэ нь энэ дамжуулалтын өвөрмөц танигчийг агуулж байгаа тул дурын хүн үзвэрт нэгдэх боломжтой. Энэ холбоосыг хөтөч дээр нээнэ үү. Үүнийг санах ой руу хуулахын тулд та "Хуулбарлах" товчийг дарах хэрэгтэй.

Вебинар, лекц, онлайн видео нэвтрүүлэг эсвэл интерактив ТВ гэх мэт бодит програмуудад хөгжүүлэгчид энэ танигчийг тодорхой бүлэг үзэгчдэд түгээх шаардлагатай бөгөөд ингэснээр тэд хүссэн урсгалтай холбогдох боломжтой болно, гэхдээ энэ нь програмын логик юм. WebRTC Media & Broadcasting Server энэ нь нөлөөлөхгүй, гэхдээ зөвхөн видеог түгээхтэй холбоотой.

5. Холболт үүссэн бөгөөд үзэгч дэлгэцэн дээрх урсгалыг хардаг. Одоо тэр холбоосыг өөр хэн нэгэнд илгээх, дамжуулалтыг тоглуулахыг зогсоох эсвэл идэвхжүүлэх боломжтой бүтэн дэлгэцийн горимбаруун доод буланд байгаа удирдлагыг ашиглан.

Онлайн нэвтрүүлэгт зориулсан WebRTC серверийн туршилтын үр дүн

Туршилтын үеэр хоцролт нь төгс байсан юм шиг санагдав. Мэдээллийн төвийн ping нь 100 миллисекунд орчим байсан бөгөөд саатал нь нүдэнд харагдахгүй байв. Эндээс бид бодит саатал нь буферлэх хугацааны хувьд ижил 100 нэмэх эсвэл хасах хэдэн арван миллисекунд байна гэж үзэж болно. Flash видеотой харьцуулахад Flash нь эдгээр туршилтуудыг WebRTC шиг сайн гүйцэтгэдэггүй. Тиймээс, хэрэв та ижил төстэй сүлжээнд гараа хөдөлгөвөл дэлгэц дээрх хөдөлгөөнийг зөвхөн нэг / хоёр секундын дараа л харж болно.

Чанарын тухайд заримдаа та хөдөлгөөн дээр кубыг ялгаж чаддаг гэдгийг бид тэмдэглэж байна. Энэ нь VP8 кодлогчийн шинж чанартай нийцэж байгаа бөгөөд түүний гол зорилго нь хүлээн зөвшөөрөгдсөн чанартай, харилцааны сааталгүйгээр бодит цагийн видео холбоог хангах явдал юм.

Серверийг суулгах, тохируулахад маш хялбар бөгөөд үүнийг ажиллуулахын тулд ямар нэгэн ноцтой ур чадвар шаардагддаггүй, зөвхөн ssh-ээр дамжуулан консолоос командуудыг ажиллуулж, ашиглах боломжтой ахисан түвшний хэрэглэгчийн түвшний Linux-ийн мэдлэгийг эс тооцвол. текст засварлагч. Үүний үр дүнд бид хөтчүүдийн хооронд нэгээс олон онлайн дамжуулалтыг тохируулж чадсан. Нэмэлт үзэгчдийг дамжуулалтад холбох нь асуудал үүсгэсэнгүй.

Нэвтрүүлгийн чанар нь вебинар болон онлайн нэвтрүүлэгт нэлээд нийцэж байсан. Зарим асуултыг үүсгэсэн цорын ганц зүйл бол видеоны нягтрал байв. Камер нь 1280x800-г дэмждэг боловч туршилтын зураг дээрх нягтрал нь 640x480-тэй маш төстэй юм. Энэ асуудлыг хөгжүүлэгчидтэй хамт тодруулах хэрэгтэй бололтой.

Вэбкамераас нэвтрүүлсэн туршилтын тухай видео
WebRTC серверээр дамжуулан

Энэхүү нийтлэлийн зорилго нь түүний бүтэц, үйл ажиллагааны зарчимтай танилцах явдал юм. Энэ зорилгоор бид олон хэрэглэгчийн үе тэнгийнхэн рүү чиглэсэн видео чатын demo webrtc.io-demo ашиглах болно. Үүнийг https://github.com/webRTC/webrtc.io-demo/tree/master/site холбоосоос татаж авч болно.

GitHub бол вэб төслүүдийг хамтран хөгжүүлэх сайт эсвэл вэб үйлчилгээ гэдгийг тэмдэглэх нь зүйтэй. Үүн дээр хөгжүүлэгчид өөрсдийн бүтээн байгуулалтын кодыг нийтэлж, ярилцаж, хоорондоо харилцах боломжтой. Нэмж дурдахад зарим томоохон мэдээллийн технологийн компаниуд өөрсдийн албан ёсны сангуудыг энэ сайтад байршуулдаг. Энэ үйлчилгээ нь нээлттэй эхийн төслүүдэд үнэ төлбөргүй байдаг. GitHub бол нээлттэй эхийн номын сангуудын агуулах юм.

Тиймээс, GitHub-аас үе тэнгийнхэн хоорондын видео чатын жишээг татаж авснаар бид үүнийг C диск дээр байрлуулах болно. Хувийн компьютерМанай "webrtc_demo" програмд ​​зориулж үүсгэсэн лавлахад.

Цагаан будаа. нэг

Бүтэцээс харахад (Зураг 1) үе тэнгийнхэн хоорондын видео чат нь JavaScript програмчлалын хэл дээр хэрэгжсэн клиент script.js болон server server.js скриптүүдээс бүрддэг. Скрипт (номын сан) webrtc.io.js (CLIENT) - "үйлчлүүлэгч-үйлчлүүлэгч" болон webrtc.io.js (CLIENT) болон webrtc гэсэн үе тэнгийн схемийн дагуу хөтчүүдийн хооронд бодит цагийн харилцаа холбоог зохион байгуулах боломжийг олгодог. .io.js (SERVER) нь WebSocket протоколыг ашиглан "үйлчлүүлэгч-сервер" архитектурыг ашиглан хөтөч болон вэб серверийн хооронд давхар холболтыг хангадаг.

webrtc.io.js (SERVER) скрипт нь webrtc.io номын санд багтсан бөгөөд node_modules\webrtc.io\lib директорт байрладаг. index.html видео чатын интерфейсийг HTML5 болон CSS3 дээр хэрэгжүүлсэн. webrtc_demo програмын файлуудын агуулгыг html засварлагчийн аль нэгээр нь үзэх боломжтой, жишээ нь "Notepad++".

Бид видео чатын үйл ажиллагааны зарчмыг шалгах болно Файлын систем PC. Серверийг (server.js) компьютер дээр ажиллуулахын тулд та node.js ажиллах цагийг суулгах хэрэгтэй. Node.js нь хөтчөөс гадуур JavaScript кодыг ажиллуулах боломжийг танд олгоно. Та node.js-ийг http://nodejs.org/ холбоосоос татаж авах боломжтой (07/15/13-ны v0.10.13 хувилбар). Дээр үндсэн хуудас node.org сайтаас татаж авах товчийг дараад http://nodejs.org/download/ руу орно уу. Учир нь windows хэрэглэгчидэхлээд win.installer (.msi) татаж аваад, дараа нь win.installer (.msi)-г компьютер дээрээ ажиллуулаад Nodejs болон "npm багц менежер"-ийг Program Files директорт суулгана уу.

Цагаан будаа. 2

Тиймээс node.js нь JavaScript хөгжүүлэлт, гүйцэтгэх орчин, мөн npm багц менежер эсвэл багц менежер ашиглан суулгаж болох дотоод модулиудын багцаас бүрдэнэ.

Модулиудыг суулгахын тулд та хийх хэрэгтэй тушаалын мөрпрограмын лавлахаас (жишээлбэл, "webrtc_demo") дараах тушаалыг гүйцэтгэнэ: npm суулгах module_name. Модулиудыг суулгах явцад npm менежер суулгац хийгдсэн директор дотор node_modules хавтас үүсгэдэг. Ажиллаж байх үед nodejs нь node_modules лавлахаас модулиудыг автоматаар агуулна.

Тиймээс, node.js-г суулгасны дараа командын мөрийг нээж, npm багц менежерийг ашиглан webrtc_demo лавлахын node_modules хавтас дахь экспресс модулийг шинэчилнэ үү.

C:\webrtc_demo>npm install express

Экспресс модуль нь node.js эсвэл вэб програм хөгжүүлэх платформд зориулсан вэб хүрээ юм. Экспрессэд дэлхийн хэмжээнд хандахын тулд та үүнийг дараах байдлаар суулгаж болно: npm install -g express.

Дараа нь бид webrtc.io модулийг шинэчилнэ:

C:\webrtc_demo>npm webrtc.io-г суулгана уу

Дараа нь командын мөрөнд бид серверийг эхлүүлнэ: server.js:

C:\webrtc_demo>nodeserver.js

Цагаан будаа. 3

Бүх зүйл, сервер амжилттай ажиллаж байна (Зураг 3). Одоо та вэб хөтөч ашиглан сервертэй IP хаягаар холбогдож, index.html вэб хуудсыг татаж авах боломжтой бөгөөд вэб хөтөч нь үйлчлүүлэгчийн скрипт код - script.js болон webrtc.io.js скрипт кодыг задлах болно. мөн тэдгээрийг гүйцэтгэх. Үе тэнгийнхэн хоорондын видео чат ажиллахын тулд (хоёр хөтчийн хооронд холболт үүсгэхийн тулд) webrtc-ийг дэмждэг хоёр хөтчөөс node.js дээр ажиллаж байгаа дохионы сервертэй ip хаягаар холбогдох шаардлагатай.

Үүний үр дүнд харилцаа холбооны програмын (видео чат) үйлчлүүлэгчийн хэсгийн интерфейс нь камер, микрофон руу нэвтрэх зөвшөөрөл хүссэн хүсэлтээр нээгдэнэ (Зураг 4).

Цагаан будаа. дөрөв

"Зөвшөөрөх" товчийг дарсны дараа камер болон микрофон нь мультимедиа холболтод холбогдсон байна. Үүнээс гадна, видео чатын интерфейсээр дамжуулан та текст өгөгдөлтэй харилцах боломжтой (Зураг 5).

Цагаан будаа. 5

Үүнийг онцлон тэмдэглэх нь зүйтэй. Сервер нь дохио өгч байгаа бөгөөд голчлон хэрэглэгчдийн хөтчүүдийн хооронд холболт үүсгэх зорилготой юм. WebRTC дохиогоор хангадаг server.js скрипт нь Node.js-г ашигладаг.