Ямар нэг байдлаар орсон Хуучин, аль хэдийн орхигдсон нийтлэлүүдээс би вэб залгуураар дамжуулан зотон дээрээс видеог хэрхэн хялбар бөгөөд байгалийн байдлаар цацаж болох талаар бичсэн. Тэр нийтлэлд би камераас хэрхэн видео бичлэг хийх, микрофоноос дуу чимээ авах талаар товч ярьсан , хүлээн авсан урсгалыг хэрхэн кодлох, вэбсокетуудаар дамжуулан сервер рүү илгээх. Гэсэн хэдий ч бодит байдал дээр тэд үүнийг хийдэггүй, нэвтрүүлгийн хувьд суулгаж, тохируулах шаардлагатай тусгай програм хангамжийг ашигладаг. , эсвэл тэд WebRTC-ийг ашигладаг бөгөөд энэ нь хайрцагнаас шууд ажилладаг, өөрөөр хэлбэл энэ нь XNUMX-р сард Chromium хөтчөөс хасагдах флаш тоглуулагчийн нэмэлт өргөтгөлүүдийг суулгах шаардлагагүй юм.
Өнөөдөр бид WebRTC-ийн талаар ярих болно.
Вэб бодит цагийн харилцаа холбоо (WebRTC) нь дан протокол биш бөгөөд энэ нь стандарт, протокол, JavaScript API-ийн бүхэл бүтэн цуглуулга бөгөөд нийлээд үе тэнгийн хооронд бодит цагийн видео-аудио холболтыг хангадаг бөгөөд дурын мэдээллийг дамжуулахад ашиглаж болно. хоёртын өгөгдөл. Ихэвчлэн хөтөч нь үе тэнгийнхний үүрэг гүйцэтгэдэг, гэхдээ энэ нь жишээлбэл, гар утасны програм байж болно. Үйлчлүүлэгчдийн хооронд p2p харилцаа холбоог зохион байгуулахын тулд янз бүрийн төрлийн видео болон аудио кодчилолд зориулсан хөтөчийн дэмжлэг, олон төрлийн сүлжээний протоколуудыг дэмжих, хөтөчтэй техник хангамжийн харилцан үйлчлэлийг хангах (OS давхаргуудаар): вэб камер, дууны картууд шаардлагатай. Хөгжүүлэгчийн тав тухыг хангах үүднээс JavaScript API хийсвэрлэлийн ард энэ бүх технологиудыг нуусан байдаг.
Энэ нь бүгд гурван API хүртэл буурдаг:
- сүүлчийн удаа задалсан, өнөөдөр би түүний тухай бага зэрэг бичих болно. Техник хангамжаас видео / аудио урсгалыг хүлээн авахад үйлчилдэг
- хоёр үйлчлүүлэгчийн хоорондын харилцаа холбоог хангадаг (p2p)
- хоёр үйлчлүүлэгчийн хооронд дур мэдэн өгөгдөл дамжуулах үйлчилгээ үзүүлдэг
Аудио болон видео урсгалыг дамжуулахад бэлтгэх
Энэ бүхэн вэбкамер болон микрофоны медиа урсгалыг "барьж авах"-аас эхэлдэг. Мэдээжийн хэрэг, түүхий дамжуулалт нь телеконференц зохион байгуулахад тохиромжгүй тул урсгал бүрийг боловсруулах шаардлагатай: чанарыг сайжруулах, аудиог видеотой синхрончлох, видеоны урсгалд синхрончлолын тэмдгийг байрлуулах, сувгийн байнга өөрчлөгддөг зурвасын өргөнтэй тохирох битийн хурдыг хангах. . Хөтөч нь энэ бүхнийг хариуцдаг бөгөөд хөгжүүлэгч нь медиа урсгалын кодчилол өгөх талаар санаа зовох шаардлагагүй болно. Орчин үеийн хөтөч дотор зураг авах, чанарыг сайжруулах (дууны цуурай болон дуу чимээг арилгах, зургийг сайжруулах), видео болон аудио кодчилол хийх програм хангамжийн давхаргууд аль хэдийн байдаг. Давхаргын схемийг зурагт үзүүлэв. 1:
Цагаан будаа. 1. Хөтөч дэх аудио болон видео боловсруулалтын давхаргууд
Бүх боловсруулалт нь хөтөч дээр шууд явагддаг бөгөөд нэмэлт зүйл байхгүй. залгаас шаардлагагүй. Гэсэн хэдий ч 2020 оны хувьд бүх зүйл тийм ч сайн биш байна. Одоогоор бүрэн дэмжигдээгүй хөтчүүд байдаг , та холбоосыг дагаж, хамгийн доод талд байгаа нийцтэй байдлын хүснэгтийг харах боломжтой. Ялангуяа IE дахин сэтгэл дундуур байна.
Хүлээн авсан дамжуулалтаар та маш сонирхолтой зүйлийг хийх боломжтой: та клон хийх, видеоны нягтралыг өөрчлөх, аудионы чанарыг өөрчлөх, Media Stream урсгалыг авч, "холбох" боломжтой. шошго хийгээд html хуудаснаас өөрийгөө хараарай. Эсвэл та зотон дээр урсгал зурж, WebGL эсвэл CSS3 тохируулж, видеондоо янз бүрийн шүүлтүүр хэрэглэж, боловсруулсан видеог зотон дээрээс аваад сүлжээгээр сервер рүү илгээж, код хувиргаж, хүн бүрт нийтлэх боломжтой (Сайн уу bigo live, twitch) мөн бусад). Би ийм зүйл хэрхэн хийгддэгийг шинжлэхгүй, вэбээс олж авсан хэд хэдэн жишээг өгөх болно.
- залуус Javascript дээр бодит цагийн CV хийж байна. Тэдэнд бүхэл бүтэн байдаг зотон дээрх видео урсгалтай ажиллахад зориулсан төрөл бүрийн js сангууд: нүүр царай, объектыг илрүүлэх, шүүлтүүр хэрэглэх (Instagram гэх мэт маск) гэх мэт. Нэмэлт залгаасуудгүйгээр бодит цагийн видеог шууд хөтчөөр хэрхэн боловсруулж болох гайхалтай жишээ.
- Зотон дээрээс видео бичлэг хийх API баримт бичиг. Chrome, Opera, Firefox дээр аль хэдийн дэмжигдсэн
RTCPeerConnection
Тиймээс бид энэ цэг дээр ирлээ, гэхдээ видеог өөр хэрэглэгч рүү хэрхэн шилжүүлэх вэ? Тэргүүн байранд ирдэг . Товчхондоо, бараг энэ алхам дээр та RTCPeerConnection объект үүсгэх хэрэгтэй:
const peerConnection = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
});Бид iceServers-ийг сонголтуудын нэг болгон зааж өгсөн - энэ нь NAT'om-ийн ард байрлах хоёр хөтчийг холбоход тусалдаг сервер юм. Өөрөөр хэлбэл, асуудлыг энд шийдэж байна: хэрэв тэр өөрийн үйлчилгээ үзүүлэгчийн NAT-ийн ард байгаа бол ярилцагчийн IP-г хэрхэн олж мэдэх вэ? ICE протокол нь аврах ажилд ирдэг, үнэн хэрэгтээ ICE нь WebRTC-д огт хамаарахгүй, гэхдээ дараа нь илүү ихийг хэлнэ.
Өмнө нь бид Usermedia урсгалуудыг авсан:
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
// Usermedia-потоки, обычно это видео и аудио
const tracks = stream.getTracks();
for (const track of tracks) {
// каждый трек присоединяем к peerConnection
peerConnection.addTrack(track);
}
}).catch(console.error);Дараа нь, onnegotiationneeded үйл явдал peerConnection дээр асах бөгөөд түүний зохицуулагч дээр бид саналыг (SDP - Session Description Protocol-ийн хувьд) үүсгэж setLocalDescription аргаар peerConnection-д оноох ёстой. SDP-ийн тухай - энэ нь юу вэ, санал, хариултын форматын талаар бид цааш ярих болно.
LocalDescription peerConnection-ийг хуваарилсны дараа хөтөч мөсөн нэр дэвшигчдийг "угсардаг", өөрөөр хэлбэл NAT-ээр дамжуулан харилцах янз бүрийн аргыг олдог. onicegatheringstatechange арга хэмжээ шатаж байна. Onicegatheringstatechange зохицуулагч дээр бид үе тэнгийнхэнтэйгээ Session Description солилцох webrtc-signaling-server урсгалтай холбогдохыг зөвшөөрдөг:
peerConnection.oniceconnectionstatechange = (event) => {
console.log('Connection state: ', peerConnection.iceConnectionState);
if (peerConnection.iceConnectionState === 'connected') {
// Можем активировать кнопку Start broadcast
setBroadcasting(true);
setBroadcastingBtnActive(true);
}
};
// Событие срабатывает сразу, как только добавился медаиапоток в peerConnection
peerConnection.onnegotiationneeded = (event) => {
// Создаем и назначаем SDP offer
peerConnection.createOffer().
then((offer) => peerConnection.setLocalDescription(offer)).
catch(console.error);
};
// Событие срабатывает каждый раз, как появляется ICE кандидат
peerConnection.onicegatheringstatechange = (ev) => {
let connection = ev.target;
// Now we can activate broadcast button
if (connection.iceGatheringState === 'complete') {
let delay = 50;
let tries = 0;
let maxTries = 3;
let timerId = setTimeout(function allowStreaming() {
if (isOnline) {
setBroadcastingBtnActive(true);
return;
}
if (tries < maxTries) {
tries += 1;
delay *= 2;
timerId = setTimeout(allowStreaming, delay);
} else {
// TODO: show user notification
console.error("Can't connect to server");
alert("Can't connect to server");
}
}, delay);
}
};Webrtc-signaling-server нь хоёр үе тэнгийн хооронд сессийн тайлбарыг солилцоход шаардлагатай сервер бөгөөд энэ нь ямар ч PL дээрх хамгийн энгийн вэбсокет эсвэл xhr-сервер байж болно. Үүний даалгавар бол энгийн: нэг үе тэнгийнхний сессийн тайлбарыг хүлээн авч, нөгөө рүү шилжүүлэх.
Сеансын тайлбарыг солилцсоны дараа хоёр тал видео урсгалыг цацаж, хүлээн авахад бэлэн болсон бөгөөд видео дамжуулалтыг хүлээн авч буй тал дээр peerConnection дээр ontrack үйл явдал идэвхждэг бөгөөд түүний зохицуулагч дээр хүлээн авсан дууг дараах руу хуваарилж болно. мөн дуртай ярилцагчаа хараарай. Нэмэлт онол ба дэлгэрэнгүй мэдээлэл.
Холбоос ба уран зохиол:
- баримт бичиг
- WebRTC протоколуудын хэрэгжилт
- пионыг бүтээгчдийн ном
- Өндөр гүйцэтгэлтэй хөтөчийн сүлжээг захиалах. Вэб програмуудын өндөр гүйцэтгэлийг хангах асуудлыг нарийвчлан авч үзсэн болно. Төгсгөлд нь WebRTC-ийг тайлбарласан болно. Энэ ном нь мэдээжийн хэрэг хуучин (2013) боловч хамааралтай байдлаа алддаггүй.
Дараагийн хэсэгт би ffmpeg-ээр дамжуулан HLS руу хөрвүүлэн хөтчөөр дамжуулж үзэхийн тулд pion ашиглан сервер дээрх видео урсгалыг хүлээн авах, боловсруулахад дүн шинжилгээ хийх онолын болон практикийн талаар бага зэрэг өгөхийг хүсч байна.
Тэвчээргүй хүмүүсийн хувьд: (энэ бол зүгээр л туршилт).
Эх сурвалж: www.habr.com
