Ann an dòigh air choireigin bho seann artaigilean agus artaigilean a chaidh an trèigsinn mar-thà, sgrìobh mi mu cho furasta agus cho nàdarrach ‘s as urrainn dhut bhidio a chraoladh bhon chanabhas tro websockets. Anns an artaigil sin, bhruidhinn mi goirid mu mar a ghlacas tu bhidio bho chamara agus fuaim bho mhicreofon a ’cleachdadh , mar a chòdaicheas tu an t-sruth a fhuaireadh agus a chuir thu tro websockets chun t-seirbheisiche. Ach, ann an da-rìribh chan eil iad a’ dèanamh seo, airson craolaidhean bidh iad a’ cleachdadh an dàrna cuid bathar-bog sònraichte a dh’ fheumar a chuir a-steach agus a rèiteachadh: far-làimhe, faodaidh seo a bhith , no bidh iad a’ cleachdadh WebRTC, a bhios ag obair dìreach a-mach às a’ bhogsa, is e sin, chan fheum e plugins a la flash player a chuir a-steach, a thèid a ghearradh a-mach à brabhsair Chromium mu thràth san Dùbhlachd.
An-diugh bruidhnidh sinn mu WebRTC.
Chan e aon phròtacal a th’ ann an Web Real-Time Communication (WebRTC), tha e na chruinneachadh iomlan de inbhean, phròtacalan agus APIan JavaScript a tha còmhla a’ toirt seachad conaltradh bhidio-claisneachd fìor-ùine bho cho-aoisean, agus faodar a chleachdadh cuideachd gus gin a ghluasad. dàta binary. Mar as trice bidh brobhsairean ag obair mar cho-aoisean, ach faodaidh e a bhith na thagradh gluasadach cuideachd, mar eisimpleir. Gus conaltradh p2p a chuir air dòigh eadar teachdaichean, tha feum air taic brobhsair airson diofar sheòrsaichean còdachadh bhidio is claisneachd, taic airson grunn phròtacalan lìonra, a’ dèanamh cinnteach à eadar-obrachadh bathar-cruaidh leis a ’bhrobhsair (tro shreathan OS): camarathan-lìn, cairtean fuaim. Tha a h-uile hodgepodge seo de theicneòlasan falaichte air cùl tarraing JavaScript API airson goireasachd an leasaiche.
Bidh e uile a’ goil sìos gu trì APIan:
-
- air a thoirt às a chèile an turas mu dheireadh, an-diugh sgrìobhaidh mi beagan a bharrachd mu dheidhinn. A’ frithealadh gus sruthan bhidio / claisneachd fhaighinn bhon bhathar-cruaidh
-
- a’ toirt seachad conaltradh eadar dà neach-dèiligidh (p2p)
-
- a’ frithealadh dàta neo-riaghailteach a ghluasad eadar dà neach-dèiligidh
Ag ullachadh sruthan claisneachd is bhidio airson an sgaoileadh
Bidh e uile a’ tòiseachadh le “glacadh” na sruthan meadhanan camara-lìn agus microfòn. Gu dearbh, chan eil sruthan amh freagarrach airson tele-cho-labhairt a chuir air dòigh, feumar gach sruthan a phròiseasadh: leasachadh càileachd, sioncronaich claisneachd le bhidio, cuir comharran sioncronaidh anns an t-sruth bhidio, agus dèan cinnteach gu bheil am bitrate a rèir leud-bann an t-sianail a tha ag atharrachadh gu cunbhalach. . Bidh am brabhsair a’ gabhail cùram de seo uile, chan fheum an leasaiche eadhon dragh a ghabhail mu bhith a’ toirt seachad còdachadh airson sruthan meadhanan. Taobh a-staigh brobhsair ùr-nodha, tha sreathan bathar-bog ann mu thràth airson glacadh, leasachadh càileachd (cuir air falbh mac-talla agus fuaim bho fhuaim, leasaich an dealbh), còdachadh bhidio is claisneachd. Tha an sgeama còmhdach air a shealltainn ann am fige. 1:
Reis. 1. Sreathan de ghiollachd claisneachd is bhidio sa bhrobhsair
Bidh a h-uile giollachd a’ tachairt gu dìreach sa bhrobhsair fhèin, gun a bharrachd. chan eil feum air plugins. Ach, chan eil cùisean fhathast cho rosach airson 2020. Tha brobhsairean ann nach eil a’ toirt làn thaic fhathast , faodaidh tu an ceangal a leantainn agus an clàr co-chòrdalachd fhaicinn aig a’ bhonn. Tha IE gu sònraichte na bhriseadh-dùil a-rithist.
Faodaidh tu rudan gu math inntinneach a dhèanamh leis na sruthan a gheibhear: faodaidh tu clonadh, fuasgladh bhidio atharrachadh, càileachd claisneachd a làimhseachadh, faodaidh tu an t-sruth Media Stream a ghabhail agus “dubhan” gu tag agus coimhead ort fhèin air an duilleag html. No faodaidh tu sruth a tharraing air canabhas, agus WebGL no CSS3 a shuidheachadh, agus diofar shìoltachain a chuir an sàs ann am bhidio, a’ bhidio giullachd a ghlacadh bhon chanabhas agus an uairsin a chuir thairis air an lìonra chun t-seirbheisiche, transcode agus foillseachadh chun a h-uile duine (hello bigo live, twitch agus feadhainn eile). An seo cha dèan mi sgrùdadh air mar a tha rudan mar sin air an dèanamh, bheir mi seachad eisimpleir no dhà a lorgar air an lìon:
- tha na balaich a’ dèanamh CV fìor-ùine ann an Javascript. Tha slàn aca diofar leabharlannan js airson a bhith ag obair le sruth bhidio air canabhas: lorg aghaidhean, nithean, cur an sàs sìoltachain (masg, mar ann an Instagram), msaa. Sàr eisimpleir air mar as urrainn dhut bhidio fìor-ùine a phròiseasadh gu dìreach sa bhrobhsair gun plugins a bharrachd.
- Sgrìobhainnean API airson sruth bhidio a ghlacadh bhon chanabhas. Taic mu thràth ann an Chrome, Opera agus Firefox
Ceangal RTCPeer
Mar sin thàinig sinn chun na h-ìre, ach ciamar a ghluaiseas sinn a’ bhidio gu neach-cleachdaidh eile? A 'tighinn air adhart . Ann an ùine ghoirid, aig cha mhòr a’ cheum seo feumaidh tu nì RTCPeerConnection a chruthachadh:
const peerConnection = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
});Bidh sinn a 'sònrachadh iceServers mar aon de na roghainnean - is e seo frithealaiche a chuidicheas le bhith a' toirt seachad ceangal eadar dà bhrobhsair air cùlaibh NAT'om. Is e sin, tha an duilgheadas air fhuasgladh an seo: ciamar a gheibh thu a-mach ip an neach-conaltraidh ma tha e air cùl NAT an t-solaraiche aige? Tha protocol ICE a 'tighinn gu teasairginn, gu dearbh, chan eil ICE a' buntainn ri WebRTC idir, ach barrachd air sin nas fhaide air adhart.
Roimhe sin, fhuair sinn sruthan 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);An ath rud, bidh an tachartas air a bheil feum air co-rèiteachadh a’ losgadh air an peerConnection, anns an làimhseachadh feumaidh sinn tairgse a chruthachadh (a thaobh SDP - Session Description Protocol) agus a shònrachadh don peerConnection tron dòigh setLocalDescription. Mu SDP - dè a th’ ann agus mu na cruthan tairgse is freagairt - bruidhnidh sinn nas fhaide.
Às deidh dha Ceangal co-aoisean LocalDescription a shònrachadh, bidh am brabhsair “a’ cruinneachadh ” tagraichean deigh, is e sin, lorg e diofar dhòighean air conaltradh tro NAT. Tha an tachartas atharrachaidh stàite cruinneachaidh a’ losgadh. Anns an inneal-làimhseachaidh onicegatheringstatechange, leigidh sinn le ceangal ris an t-sruth webrtc-signaling-server gus Tuairisgeul an t-Seisein iomlaid eadar co-aoisean:
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);
}
};Is e an webrtc-signaling-server am frithealaiche a dh’ fheumar gus tuairisgeul an t-seisein iomlaid eadar dà cho-aoisean, faodaidh e a bhith mar an websocket no xhr-server as sìmplidh air PL sam bith. Tha an obair aige sìmplidh: gabhail ri tuairisgeul seisean bho aon cho-aoisean agus a ghluasad gu fear eile.
Às deidh iomlaid tuairisgeulan seisean, tha an dà thaobh deiseil airson sruthan bhidio a chraoladh agus fhaighinn, air an taobh a gheibh an t-sruth bhidio, tha an tachartas ontrack air a phiobrachadh air an peerConnection, agus anns an làimhseachadh, faodar na slighean a fhuaireadh a shònrachadh do agus thoir sùil air an neach-conaltraidh as fheàrr leat. Barrachd teòiridh agus mion-fhiosrachadh.
Ceanglaichean agus litreachas:
- sgrìobhainnean
- buileachadh protocolaidhean WebRTC a’ dol
- leabhar bho luchd-cruthachaidh pion
- Glèidh lìonra brobhsair àrd-choileanadh. Bithear a’ beachdachadh gu mionaideach air cùisean dèanamh cinnteach à àrd-choileanadh de thagraidhean lìn. Aig an deireadh, tha WebRTC air a mhìneachadh. Tha an leabhar gu cinnteach sean (2013), ach chan eil e a’ call a bhuntanas.
Anns an ath phàirt, tha mi airson beagan a bharrachd cuibhreann de theòiridh a thoirt seachad agus ann an cleachdadh mion-sgrùdadh a dhèanamh air fàilteachadh agus giullachd sruth bhidio air an t-seirbheisiche a ’cleachdadh pion, a’ transcoding gu HLS tro ffmpeg airson a chraoladh às deidh sin do luchd-amhairc sa bhrobhsair.
Airson an neach mì-fhoighidneach: (chan eil an seo ach deuchainn).
Source: www.habr.com