Bare e n'e re ho tloha lihloohong tsa khale le tse seng li lahliloe ke ngotse ka hore na ho bonolo ebile ha ho bonolo hakae ho phatlalatsa video ho tloha ka seile ka li-websockets. Sehloohong seo ke buile hakhutšoanyane ka mokhoa oa ho hapa video ho tsoa khamera le molumo ho tsoa ho maekrofono u sebelisa , mokhoa oa ho kenyelletsa molapo o amoheloang le ho o romella ka li-websockets ho seva. Leha ho le joalo, ha e le hantle sena ha se etsoe; bakeng sa liphatlalatso ba sebelisa software e khethehileng e hlokang ho kenngoa le ho hlophisoa: ho tloha ka holim'a hlooho ea ka ho ka ba joalo. , kapa ba sebelisa WebRTC, e sebetsang hantle ka ntle ho lebokose, ke hore, ha e hloke ho kenngoa ha li-plugins leha e le life tse kang Flash Player, tse tla tlosoa ho Chromium browser ka December.
Kajeno re tla bua ka WebRTC.
Web Real-Time Communication (WebRTC) ha se protocol e le 'ngoe, ke pokello ea litekanyetso, liprothokholo le li-API tsa JavaScript tseo hammoho li fanang ka puisano ea audio-audio ea lithaka ka nako ea sebele, hape e ka sebelisoa ho fetisetsa data efe kapa efe ea binary. Hangata, libatli li sebetsa joalo ka lithaka, empa hape e ka ba sesebelisoa sa mohala, mohlala. Bakeng sa ho hlophisa puisano ea p2p pakeng tsa bareki, sebatli se hloka ho ts'ehetsa mefuta e fapaneng ea khouto ea video le molumo, ho ts'ehetsa liprothokholo tse ngata tsa marang-rang, le ho netefatsa tšebelisano lipakeng tsa Hardware le sebatli (ka likarolo tsa OS): li-webcams, likarete tsa molumo. Theknoloji ena eohle ea theknoloji e patiloe ka mor'a ho tlosoa ha JavaScript API molemong oa mohlahlami.
Tsohle li theohela ho li-API tse tharo:
- re buisane ka eona lekhetlong la ho qetela, kajeno ke tla ngola hanyenyane ka eona. E sebelisoa ho amohela melapo ea video / audio ho tsoa ho Hardware
- e fana ka lipuisano lipakeng tsa bareki ba babeli (p2p)
- e sebelisoa ho fetisetsa data e sa lebelloang lipakeng tsa bareki ba babeli
Ho lokisa melapo ea molumo le video bakeng sa phetiso
Tsohle li qala ka "ho hapa" mecha ea litaba ea webcam le microphone. Melapo e tala ka sebele ha ea lokela ho hlophisa teleconference; molapo o mong le o mong o hloka ho sebetsanoa: ho ntlafatsa boleng, ho hokahanya molumo le video, ho beha matšoao a ho lumellana ka har'a molapo oa video, ho netefatsa sekhahla sa sekhahla se tsamaellanang le bandwidth e lulang e fetoha ea mocha. Sebatli se hlokomela tsena tsohle; moqapi ha a na ho tšoenyeha ka ho fana ka khouto ea melapo ea media. Ka har'a sebatli sa morao-rao, ho se ho ntse ho e-na le likarolo tsa software bakeng sa ho hapa, ho ntlafatsa boleng (ho tlosa echo le lerata ho tsoa molumo, ho ntlafatsa setšoantšo), ho kenya video le molumo. Sekema sa lera se bontšoa ho Setšoantšo sa 1:
Setšoantšo sa 1. Mekhahlelo ea li-audio le video ho sebatli
Ts'ebetso eohle e etsahala ka kotloloho ho sebatli ka boeona, ha ho li-plugins tse ling tse hlokahalang. Leha ho le joalo, lintho li ntse li le sieo bakeng sa 2020. Ho ntse ho e-na le li-browser tse e-s'o tšehetse ka botlalo , o ka latela sehokelo mme o bona tafole ea ho lumellana ka tlase haholo. Haholo-holo, IE e soabisa hape.
U ka etsa lintho tse khahlisang haholo ka melapo e amoheloang: o ka etsa clone, fetola qeto ea video, oa laola boleng ba molumo, o ka nka le ho "hokela" phallo ea Media Stream ho. tag 'me u ipone u le leqepheng la html. Kapa u ka hula molatsoana ho seile, 'me u behe WebGL kapa CSS3,' me u sebelise li-filters tse fapa-fapaneng ho video, u nke video e entsoeng ka seile ebe u e romela ka marang-rang ho seva, u e fetise 'me u e phatlalatse ho bohle (hello bigo live, twitch le ba bang). Mona nke ke ka sekaseka hore na lintho tse joalo li etsoa joang, ke tla fana ka mehlala e 'maloa e fumanehang Marang-rang:
- bashanyana ba etsa CV ea nako ea nnete ho Javascript. Ba na le kakaretso lilaebrari tse fapa-fapaneng tsa js bakeng sa ho sebetsa le video e phallang ka seile: ho lemoha lifahleho, lintho, li-filters tse koahelang (mask, joalo ka Instagram), joalo-joalo Mohlala o babatsehang oa kamoo u ka sebetsanang le video ka nako ea sebele ka ho toba ho sebatli ntle le li-plugins tse eketsehileng.
- Litokomane tsa API bakeng sa ho hapa video e tsoang ho canvas. E se e tšehetsoa ho Chrome, Opera le Firefox
Khokahano ea RTCPeer
Kahoo re fihla ntlheng, mokhoa oa ho fetisetsa video ho mosebelisi e mong? E ka pele ke . Ka bokhutšoanyane, mohato ona o hloka ho theha ntho ea RTCPeerConnection:
const peerConnection = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
});E 'ngoe ea likhetho tseo re li khethang ke iceServers - ena ke seva e thusang ho fana ka khokahano lipakeng tsa libatli tse peli tse ka morao ho NAT. Ke hore, mona bothata bo rarolloa: mokhoa oa ho fumana IP ea interlocutor haeba a le ka morao ho NAT ea mofani oa hae? Protocol ea ICE ea thusa, ha e le hantle, ICE ha e amane le WebRTC ho hang, empa ho feta moo hamorao.
Pele re ne re e-na le melapo ea 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);Ka mor'a moo, ketsahalo e hlokahalang ka lipuisano e qalisoa ho peerConnection, ho mohlokomeli eo re tlamehang ho theha tlhahiso (ho ea ka SDP - Session Description Protocol) ebe re e abela peerConnection ka mokhoa oa setLocalDescription. Re tla bua ka SDP - hore na ke eng le liforomo tsa tlhahiso le likarabo - ho ea pele.
Kamora ho abela LocalDescription ho peerConnection, sebatli se "bokella" batho ba khethang leqhoa, ke hore, se fumana mekhoa e fapaneng ea ho buisana ka NAT. Ketsahalo ea onicegatheringstatechange e ea qala. Ka onicegatheringstatechange handler, re nolofalletsa khokahanyo ho stream webrtc-signaling server ho fapanyetsana Tlhaloso ea Nako lipakeng tsa lithaka:
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 ke seva se hlokehang ho fana ka phapanyetsano ea tlhaloso ea nako pakeng tsa lithaka tse peli, e ka ba websocket e bonolo kapa xhr-server ho PL leha e le efe. Mosebetsi oa eona o bonolo: ho fumana tlhaloso ea thuto ho tsoa ho thaka e 'ngoe le ho fetisetsa ho e mong.
Ka mor'a ho fapanyetsana litlhaloso tsa Session, mahlakore ka bobeli a se a loketse ho phatlalatsa le ho amohela melaetsa ea video. Ka lehlakoreng le amohelang molaetsa oa video, ketsahalo ea ontrack e hlahisoa ho peerConnection, eo ho eona lipina tse amoheloang li ka abeloang ho tsona. 'me u shebe motho eo u mo ratang haholo. Khopolo le lintlha tse ling.
Lihokelo le lingoliloeng:
- litokomane
- ts'ebetsong ea liprothokholo tsa WebRTC ha u ntse u tsoela pele
- buka e tsoang ho baqapi ba pion
— buka ea High Performance Browser Networking. Litaba tsa ho netefatsa ts'ebetso e phahameng ea lits'ebetso tsa webo li hlahlojoa ka botlalo. WebRTC e hlalosoa qetellong. Ka sebele buka ena ke ea khale (2013), empa ha e lahleheloe ke bohlokoa ba eona.
Karolong e latelang ke batla ho fana ka khopolo e eketsehileng 'me ka mokhoa oa ho hlahloba kamohelo le ts'ebetso ea molaetsa oa video ho seva ho sebelisa pion, transcoding ho HLS ka ffmpeg bakeng sa ho phatlalatsa ho latelang ho bashebelli ho sebatli.
Bakeng sa ba hlokang mamello: (sena ke teko feela).
Source: www.habr.com
