He aha i roto mai i nga tuhinga tawhito kua whakarerea, i tuhi ahau mo te ngawari me te maamaa ka taea e koe te panui ataata mai i te koaka ma te ipurangi. I roto i taua tuhinga, i korero poto ahau me pehea te hopu ataata mai i te kamera me te tangi mai i te hopuoro ma te whakamahi , me pehea te whakawaehere i te awa kua riro mai me te tuku ma te ipurangi ki te tūmau. Heoi, i roto i te meka kaore ratou e mahi i tenei, mo nga haapurorotanga ka whakamahia e ratou etahi rorohiko motuhake me whakauru me te whirihora: ka taea te mahi. , kei te whakamahi ranei ratou i te WebRTC, e mahi tika ana i waho o te pouaka, ara, kaore e hiahiatia kia whakauruhia nga taputapu a la flash player, ka tapahia mai i te tirotiro Chromium i te Hakihea.
I tenei ra ka korero tatou mo WebRTC.
Ko te Whakawhitiwhiti Waa Tuturu Tukutuku (WebRTC) ehara i te kawa kotahi, he kohinga katoa o nga paerewa, nga kawa me nga API JavaScript e whakarato tahi ana i nga hoa-ki-hoa-a-hoa-a-waa-a-waa-a-waa, ka taea hoki te whakamahi ki te whakawhiti i tetahi. raraunga rua. I te nuinga o nga wa ka mahi nga kaitirotiro hei hoa, engari ka taea ano te tono waea, hei tauira. Hei whakarite i nga korero p2p i waenga i nga kaihoko, ka hiahiatia te tautoko tirotiro mo nga momo momo ataata me te whakawaehere ororongo, tautoko mo nga momo kawa whatunga, me te whakarite i te taunekeneke o nga taputapu me te kaitirotiro (ma nga paparanga OS): webcams, kaari tangi. Ko enei hangarau katoa e huna ana i muri i te tangohanga API JavaScript mo te waatea o te kaiwhakawhanake.
Ka huri katoa ki nga API e toru:
-
- I wehea e matou i te wa whakamutunga, i tenei ra ka tuhia e au etahi atu korero mo taua mea. Ka mahi ki te tango i nga awa ataata / ororongo mai i te taputapu
-
— ka tuku korero i waenga i nga kaihoko e rua (p2p)
-
- he mahi ki te whakawhiti i nga raraunga i waenga i nga kaihoko e rua
Te whakarite i nga rerenga ororongo me te riipene whakaata mo te tuku
Ka tiimata katoa ma te "hopu" i te kamera tukutuku me nga awa pāpāho hopuoro. Ko te tikanga, kaore nga awa mata e pai mo te whakahaere i te waea waea, me whakahaere ia awa: whakapai ake i te kounga, tukutahi oro me te ataata, tuu i nga tohu tukutahi ki te riipene ataata, me te whakarite i te tere moka e rite ana ki te huringa o te hongere. . Ko te kaitirotiro kei te tiaki i enei mea katoa, kaore te kaiwhakawhanake e awangawanga mo te tuku whakawaehere mo nga awa pāpāho. Kei roto i te kaitirotiro hou, he paparanga rorohiko kee hei hopu, hei whakapai ake i te kounga (tango i te paoro me te haruru mai i te oro, whakapai ake i te pikitia), ataata me te whakawaehere ororongo. Ko te kaupapa paparanga e whakaatuhia ana i te piki. 1:
raihi. 1. Nga paparanga oro me te tukatuka ataata i roto i te tirotiro
Ka mahia nga mahi katoa i roto i te kaitirotiro ake, kaore he taapiri. kahore he monomai e hiahiatia ana. Heoi ano, kare tonu i te tino pai mo te tau 2020. He kaitirotiro kaore ano kia tino tautoko , ka taea e koe te whai i te hono ka kite i te ripanga hototahi kei raro rawa. Ko IE inaa kei te pouri ano.
Ka taea e koe te mahi i nga mea tino pai ki nga awa kua riro mai: ka taea e koe te kati, te huri i te taumira ataata, te raweke i te kounga ororongo, ka taea e koe te tango me te "piri" i te awa Media Stream ki tūtohu me te titiro ki a koe i runga i te wharangi html. Ka taea ranei e koe te tuhi i te awa ki runga i te koaka, me te tautuhi i te WebGL, CSS3 ranei, me te whakamahi i nga momo whiriwhiringa ki te ataata, hopu i te ataata i tukatukahia mai i te waaawa ka tukuna atu ma te whatunga ki te tūmau, whakawhiti waehere me te whakaputa ki nga tangata katoa (hello bigo live, twitch me etahi atu). I konei kaore au e tarai me pehea e mahi ai enei mea, ka hoatu e ahau etahi tauira e rua i kitea i runga i te paetukutuku:
- kei te mahi nga taane i te CV i roto i te Javascript. He katoa ta ratou he maha nga whare pukapuka js mo te mahi me te roma ataata i runga i te kanawehi: te kimi kanohi, nga taonga, te whakamahi i nga whiriwhiringa (te kanohi, penei i te Instagram), me etahi atu.
- Tuhituhi API mo te hopu i te roma ataata mai i te koaka. Kua tautokohia i Chrome, Opera me Firefox
RTCPeerConnection
Na ka tae mai matou ki te waahi, engari me pehea te whakawhiti i te ataata ki tetahi atu kaiwhakamahi? Ka tae mai ki mua . Hei poto, tata ki tenei taahiraa me hanga e koe he ahanoa RTCPeerConnection:
const peerConnection = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
});Ka tohua e matou ko iceServers tetahi o nga whiringa - he tūmau tenei e awhina ana ki te tuku hononga i waenga i nga kaitirotiro e rua kei muri i te NAT'om. Arā, kua whakatauhia te raru i konei: me pehea te rapu i te ip o te kaikorero mena kei muri ia i te NAT o tana kaiwhakarato? Ka tae mai te kawa ICE ki te whakaora, inaa, kaore rawa te ICE e pa ki a WebRTC, engari he nui ake i tera i muri mai.
I mua, i whiwhi matou i nga awa Kaiwhakamahi:
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);I muri mai, ka mura te huihuinga e hiahiatia ana i runga i te peerConnection, i roto i te kaihautu me hanga he tuku (i runga i te SDP - Session Description Protocol) ka tohua ki te peerConnection ma te tikanga setLocalDescription. Mo te SDP - he aha tena me nga whakatakotoranga tuku me te whakautu - ka korero ano tatou.
Whai muri i te tautapa i te LocalDescription peerConnection, ka "whakamine" te kaitirotiro tio, ara, ka kimi huarahi rerekee ki te whakawhitiwhiti korero ma te NAT. Ka ahi te huihuinga onicegatheringstatechange. I roto i te kaihautu onicegatheringstatechange, ka whakaaetia e matou he hononga ki te awa webrtc-signaling-server hei whakawhiti i te Whakaahuatanga Wātū i waenga i nga hoa:
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);
}
};Ko te webrtc-signaling-server te tūmau e hiahiatia ana hei whakawhiti i te whakaahuatanga wātū i waenga i ngā hoa e rua, ka taea pea ko te paetukutuku ipurangi ngawari noa, xhr-tūmau ranei i runga i tetahi PL. He ngawari noa tana mahi: ki te whakaae ki tetahi whakaahuatanga huihuinga mai i tetahi hoa ka whakawhiti ki tetahi atu.
I muri i te whakawhitinga o nga whakaahuatanga o te Huihuinga, kua rite nga taha e rua ki te panui me te tango i nga awa ataata, i te taha e whiwhi ana i te riipene ataata, ka puta te kaupapa ontrack i runga i te hononga hoa, i roto i te kaihautu, ka taea te whakarite i nga huarahi kua riro ki a ka titiro ki to hoa korero tino pai. He ariā me etahi atu korero.
Hononga me nga tuhinga:
- tuhinga
- te whakatinanatanga o nga kawa WebRTC kei te haere
- he pukapuka na nga kaihanga o te pion
- Puka Whakawhanaunga Tirotiro Mahinga Nui. Ko nga take mo te whakapumau i nga mahi teitei o nga tono tukutuku ka korerohia. I te mutunga, ka whakaahuahia a WebRTC. He mea tawhito te pukapuka (2013), engari kaore e ngaro te whai take.
I te waahanga e whai ake nei, e hiahia ana ahau ki te tuku i tetahi waahanga iti ake o te ariā me te mahi ki te tātari i te tangohanga me te tukatuka o te awa ataata i runga i te kaimau ma te whakamahi i te pion, te whakawhiti ki te HLS ma te ffmpeg mo te haapurorotanga o muri mai ki nga kaimakitaki i te tirotiro.
Mo te hunga manawanui: (he whakamatautau noa tenei).
Source: will.com