Kekahi mea i loko mai nā ʻatikala kahiko a haʻalele ʻia, ua kākau wau e pili ana i ka maʻalahi a me ke kūlohelohe hiki iā ʻoe ke hoʻolaha i ka wikiō mai ka canvas ma o nā websockets. Ma kēlā ʻatikala, ua kamaʻilio pōkole wau e pili ana i ke kiʻi ʻana i ke wikiō mai ke kāmela a me ke kani mai ka microphone me ka hoʻohana ʻana , pehea e hoʻopili ai i ke kahawai i loaʻa a hoʻouna iā ia ma o nā websockets i ke kikowaena. Eia naʻe, ʻoiaʻiʻo, ʻaʻole lākou e hana i kēia, no nā hoʻolaha hoʻohana lākou i nā polokalamu kūikawā pono e hoʻokomo ʻia a hoʻonohonoho ʻia: offhand, hiki ke , a i ʻole lākou e hoʻohana i ka WebRTC, e hana pololei ana i waho o ka pahu, ʻo ia hoʻi, ʻaʻole ia e koi i ka hoʻokomo ʻana i nā plugins a la flash player, e ʻoki ʻia mai ka polokalamu Chromium i ka lā Dekemaba.
I kēia lā e kamaʻilio mākou e pili ana iā WebRTC.
ʻAʻole hoʻokahi protocol ka Web Real-Time Communication (WebRTC). ʻikepili binary . ʻO ka mea maʻamau e hana nā mea hoʻokele ma ke ʻano he mau hoa, akā hiki ke lilo i polokalamu kelepona, no ka laʻana. No ka hoʻonohonoho ʻana i ke kamaʻilio p2p ma waena o nā mea kūʻai aku, pono ke kākoʻo o ka polokalamu kele pūnaewele no nā ʻano wikiō like ʻole a me ka hoʻopili leo leo, kākoʻo no nā ʻano protocols pūnaewele, e hōʻoiaʻiʻo ana i ka launa pū ʻana o nā hāmeʻa me ka polokalamu kele pūnaewele (ma o nā papa OS): webcams, kāleka kani. Ua hūnā ʻia kēia hodgepodge o nā ʻenehana ma hope o ka JavaScript API abstraction no ka maʻalahi o ka mea hoʻomohala.
Hoʻopili ia i ʻekolu API:
-
— wehe ʻia i ka manawa hope loa, i kēia lā e kākau hou wau e pili ana iā ia. Lawelawe e loaʻa nā kahawai wikiō / leo mai ka lako
-
- hāʻawi i ka kamaʻilio ma waena o ʻelua mau mea kūʻai aku (p2p)
-
- lawelawe i ka hoʻoili ʻana i ka ʻikepili kūʻokoʻa ma waena o nā mea kūʻai aku ʻelua
Hoʻomākaukau i nā kahawai leo a me nā wikiō no ka hoʻouna ʻana
Hoʻomaka ia me ka "hopu" i ka webcam a me nā kahawai media microphone. ʻOiaʻiʻo, ʻaʻole kūpono nā kahawai maka no ka hoʻonohonoho ʻana i kahi teleconference, pono e hoʻoponopono ʻia kēlā me kēia kahawai: hoʻomaikaʻi i ka maikaʻi, hoʻonohonoho i ka leo me ka wikiō, kau i nā hōʻailona synchronization i ke kahawai wikiō, a hōʻoia i ka bitrate e pili ana i ka bandwidth loli mau o ke kahawai. . Mālama ka polokalamu kele pūnaewele i kēia mau mea a pau, ʻaʻole hopohopo ka mea hoʻomohala e pili ana i ka hāʻawi ʻana i ka encoding no nā kahawai media. I loko o kahi polokalamu kele pūnaewele hou, aia nā papa lako polokalamu no ka hopu ʻana, hoʻomaikaʻi i ka maikaʻi (wehe i ka leo a me ka walaʻau mai ke kani, hoʻomaikaʻi i ke kiʻi), wikiō a me ka hoʻopili leo. Hōʻike ʻia ka papa kuhikuhi ma ka fig. 1:
Laiki. 1. Nā papa o ka hoʻoili leo a me ka wikiō ma ka polokalamu kele pūnaewele
Hana pololei nā hana āpau i ka polokalamu kele pūnaewele ponoʻī, ʻaʻohe mea hou. ʻaʻole pono nā plugins. Eia nō naʻe, ʻaʻole naʻe nā mea i ʻoi loa no ka 2020. Aia nā polokalamu kele i kākoʻo piha ʻole , hiki iā ʻoe ke hahai i ka loulou a ʻike i ka papa hoʻohālikelike ma lalo loa. ʻO IE ma ke ʻano hoʻohilahila hou.
Hiki iā ʻoe ke hana i nā mea hoihoi loa me nā kahawai i loaʻa: hiki iā ʻoe ke clone, hoʻololi i ka hoʻonā wikiō, hoʻoponopono i ka maikaʻi o ka leo, hiki iā ʻoe ke lawe a "hoi" i ke kahawai Media Stream i tag a nānā iā ʻoe iho ma ka ʻaoʻao html. A i ʻole hiki iā ʻoe ke kahakiʻi i kahi kahawai ma ka canvas, a hoʻonohonoho iā WebGL a i ʻole CSS3, a hoʻopili i nā kānana like ʻole i ka wikiō, hopu i ka wikiō i hoʻoponopono ʻia mai ka canvas a laila hoʻouna ma luna o ka pūnaewele i ke kikowaena, transcode a hoʻolaha i nā mea a pau (hello bigo live, twitch a me nā mea ʻē aʻe). Ma ʻaneʻi ʻaʻole wau e loiloi i ka hana ʻana o ia mau mea, e hāʻawi wau i ʻelua mau hiʻohiʻona i loaʻa ma ka pūnaewele:
- ke hana nei nā kāne i ka CV manawa maoli ma Javascript. Loaʻa iā lākou kahi holoʻokoʻa nā hale waihona puke js like ʻole no ka hana ʻana me kahi kahawai wikiō ma ke kāwele: ʻike i nā maka, nā mea, ka hoʻohana ʻana i nā kānana (masks, e like me Instagram), etc.
- Nā palapala API no ke kiʻi ʻana i ke kahawai wikiō mai ka canvas. Ua kākoʻo ʻia ma Chrome, Opera a me Firefox
RTCPeerConnection
No laila ua hiki mākou i kahi, akā pehea e hoʻololi maoli ai i ke wikiō i kahi mea hoʻohana ʻē aʻe? Hele mai i mua . I ka pōkole, ma kahi kokoke i kēia kaʻina pono ʻoe e hana i kahi mea RTCPeerConnection:
const peerConnection = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
});Hōʻike mākou i nā iceServers ma ke ʻano he koho - he kikowaena kēia e kōkua i ka hoʻolako ʻana i kahi pilina ma waena o ʻelua mau polokalamu ma hope o NATʻom. ʻO ia hoʻi, ua hoʻoholo ʻia ka pilikia ma aneʻi: pehea e ʻike ai i ka ip o ka interlocutor inā aia ʻo ia ma hope o ka NAT o kāna mea hoʻolako? Hele mai ka protocol ICE i ka hoʻopakele, ʻoiaʻiʻo, ʻaʻole pili ʻo ICE i WebRTC i nā mea āpau, akā ʻoi aku ka nui ma hope.
Ma mua, ua loaʻa iā mākou nā kahawai 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);Ma hope aʻe, e hoʻomaka ana ka hanana i makemake ʻia ma ka peerConnection, ma ka mea nāna e hana i kahi hāʻawi (ma ke ʻano o SDP - Session Description Protocol) a hāʻawi iā ia i ka peerConnection ma o ke ʻano setLocalDescription. E pili ana i ka SDP - he aha ia a e pili ana i ka hāʻawi a me nā ʻano pane - e kamaʻilio hou mākou.
Ma hope o ka hāʻawi ʻana i kahi LocalDescription peerConnection, "hui" ka polokalamu kele i nā moho hau, ʻo ia hoʻi, ʻimi i nā ala like ʻole e kamaʻilio ma o NAT. Ke ahi ka hanana onicegatheringstatechange. Ma ka mea lawelawe onicegatheringstatechange, ʻae mākou i kahi pilina i ke kahawai webrtc-signaling-server e hoʻololi i ka wehewehe Session ma waena o nā 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);
}
};ʻO ka webrtc-signaling-server ka mea kikowaena i koi ʻia e hoʻololi i ka wehewehe ʻana ma waena o nā hoa ʻelua, hiki ke lilo i ka websocket maʻalahi a i ʻole xhr-server ma kekahi PL. He mea maʻalahi kāna hana: e ʻae i ka wehewehe ʻana o ka hālāwai mai kekahi hoa a hoʻololi iā ia i kekahi.
Ma hope o ka hoʻololi ʻana i nā wehewehe Session, ua mākaukau nā ʻaoʻao ʻelua e hoʻolaha a loaʻa i nā kahawai wikiō, ma ka ʻaoʻao e loaʻa ai ke kahawai wikiō, hoʻomaka ka hanana ontrack ma ka peerConnection, ma ka mea hoʻohana, hiki ke hāʻawi ʻia nā mele i loaʻa iā ia. a nānā i kāu kamaʻilio punahele. ʻO ke kumumanaʻo a me nā kikoʻī.
Nā loulou a me nā palapala:
- palapala
- ka hoʻokō ʻana i nā protocol WebRTC ma ka hele
- he puke mai nā mea nāna i hana i ka pion
- Puke Kiʻekiʻe Kiʻekiʻe Pūnaewele Pūnaewele. Kūkākūkā ʻia nā pilikia o ka hōʻoia ʻana i ka hana kiʻekiʻe o nā noi pūnaewele. I ka hopena, wehewehe ʻia ʻo WebRTC. He mea kahiko loa ka puke (2013), akā, ʻaʻole nalowale kona pili.
Ma ka ʻaoʻao aʻe, makemake wau e hāʻawi i kahi hapa iki o ke kumumanaʻo a ma ka hoʻomaʻamaʻa ʻana i ka hoʻokipa ʻana a me ka hana ʻana o kahi kahawai wikiō ma ka server me ka hoʻohana ʻana i ka pion, transcoding i HLS ma o ffmpeg no ka hoʻolaha ʻana i nā mea nānā i ka polokalamu kele pūnaewele.
No ka poe hoomanawanui: (he hoʻokolohua wale nō kēia).
Source: www.habr.com