Қандай да бір түрде ескі және қазірдің өзінде қалдырылған мақалалардан мен веб-розеткалар арқылы кенептен бейнені қаншалықты оңай және табиғи түрде таратуға болатыны туралы жаздым. Бұл мақалада мен камерадан бейне және микрофоннан дыбысты қалай түсіру керектігі туралы қысқаша айттым , қабылданған ағынды кодтау және оны веб-розеткалар арқылы серверге жіберу. Алайда, іс жүзінде олар мұны істемейді, хабар тарату үшін олар орнатылуы және конфигурациялануы қажет арнайы бағдарламалық жасақтаманы пайдаланады: бұл кездейсоқ болуы мүмкін. , немесе олар WebRTC пайдаланады, ол қораптан тыс жерде жұмыс істейді, яғни ол кез келген плагиндерді орнатуды қажет етпейді, ол Chromium браузерінен желтоқсан айында жойылады.
Бүгін біз WebRTC туралы сөйлесетін боламыз.
Web Real-Time Communication (WebRTC) бір протокол емес, ол стандарттардың, хаттамалардың және JavaScript API интерфейстерінің тұтас жиынтығы, олар бірге бір-теңімен нақты уақыттағы бейне-аудио байланысын қамтамасыз етеді және сонымен қатар кез келген ақпаратты тасымалдау үшін пайдаланылуы мүмкін. екілік деректер. Әдетте браузерлер құрдастар ретінде әрекет етеді, бірақ ол, мысалы, мобильді қосымша болуы мүмкін. Клиенттер арасында p2p байланысын ұйымдастыру үшін бейне және аудио кодтаудың әртүрлі түрлеріне шолғыш қолдауы қажет, әртүрлі желілік протоколдарды қолдау, аппараттық құралдардың браузермен өзара әрекеттесуін қамтамасыз ету (ОЖ деңгейлері арқылы): веб-камералар, дыбыс карталары. Бұл технологиялардың барлығы әзірлеушіге ыңғайлы болу үшін JavaScript API абстракциясының артында жасырылған.
Мұның бәрі үш API-ге дейін төмендейді:
-
— өткен жолы бөлшектелген, бүгін мен ол туралы біраз жазамын. Аппараттық құралдан бейне/аудио ағындарын алу үшін қызмет етеді
-
— екі клиент арасындағы байланысты қамтамасыз етеді (p2p)
-
- екі клиент арасында ерікті деректерді тасымалдау үшін қызмет етеді
Аудио және бейне ағындарын таратуға дайындау
Мұның бәрі веб-камера мен микрофонның медиа ағындарын «түсіруден» басталады. Әрине, шикі ағындар телеконференцияны ұйымдастыруға жарамайды, әрбір ағынды өңдеу қажет: сапаны жақсарту, дыбысты бейнемен синхрондау, бейне ағынында синхрондау белгілерін қою және арнаның үнемі өзгеретін өткізу қабілетіне сәйкес келетін бит жылдамдығын қамтамасыз ету. . Браузер мұның бәрін шешеді, әзірлеушіге медиа ағындары үшін кодтауды қамтамасыз ету туралы уайымдаудың қажеті жоқ. Заманауи шолғыштың ішінде түсіру, сапаны жақсарту (дыбыстан жаңғырық пен шуды жою, суретті жақсарту), бейне және дыбысты кодтауға арналған бағдарламалық жасақтама қабаттары қазірдің өзінде бар. Қабат схемасы күріште көрсетілген. 1:
Күріш. 1. Браузердегі аудио және бейне өңдеу қабаттары
Барлық өңдеу тікелей браузердің өзінде жүзеге асырылады, қосымша жоқ. плагиндер қажет емес. Дегенмен, 2020 жылға қарай бәрі қызық емес. Әлі толық қолдамайтын браузерлер бар , сілтеме бойынша өтіп, ең төменгі жағындағы үйлесімділік кестесін көре аласыз. Атап айтқанда, IE тағы да көңілді қалдырады.
Алынған ағындармен сіз өте қызықты нәрселерді жасай аласыз: сіз клондай аласыз, бейне ажыратымдылығын өзгерте аласыз, аудио сапасын өзгерте аласыз, Media Stream ағынын қабылдауға және «ілгекке» қоюға болады. белгілеңіз және html бетінде өзіңізге қараңыз. Немесе кенепте ағын салуға және WebGL немесе CSS3 орнатуға және бейнеге әртүрлі сүзгілерді қолдануға, өңделген бейнені кенептен түсіруге, содан кейін оны желі арқылы серверге жіберуге, кодты өзгертуге және барлығына жариялауға болады (сәлем bigo live, twitch) және басқалар). Мұнда мен мұндай нәрселердің қалай жасалатынын талдамаймын, мен Интернетте табылған бірнеше мысал келтіремін:
- жігіттер нақты уақытта Javascript-те түйіндеме жасап жатыр. Олардың тұтастығы бар кенепте бейне ағынымен жұмыс істеуге арналған әртүрлі JS кітапханалары: беттерді, нысандарды анықтау, сүзгілерді қолдану (Инстаграмдағы сияқты маскалар) және т.б.. Нақты уақыттағы бейнені қосымша плагиндерсіз браузерде тікелей өңдеудің тамаша мысалы.
- Кенептен бейне ағынын түсіруге арналған API құжаттамасы. Chrome, Opera және Firefox-та қазірдің өзінде қолдау көрсетіледі
RTCPeerConnection
Сонымен, біз нүктеге келдік, бірақ бейнені басқа пайдаланушыға қалай беруге болады? Алдыңғы қатарға шығады . Қысқасы, осы қадамда дерлік RTCPeerConnection нысанын жасау керек:
const peerConnection = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
});Біз опциялардың бірі ретінде iceServers көрсетеміз - бұл NAT'om артындағы екі браузер арасындағы байланысты қамтамасыз етуге көмектесетін сервер. Яғни, мәселе осында шешіледі: әңгімелесушінің IP-ін, егер ол өз провайдерінің NAT артында тұрса, қалай білуге болады? 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 тұрғысынан - сессияны сипаттау хаттамасы) және оны peerConnection жүйесіне setLocalDescription әдісі арқылы тағайындау керек. SDP туралы - бұл не және ұсыныс пен жауап форматтары туралы - біз әрі қарай сөйлесеміз.
LocalDescription peerConnection тағайындағаннан кейін браузер мұз кандидаттарын «жинайды», яғни NAT арқылы байланысудың әртүрлі жолдарын табады. onicegatheringstatechange оқиғасы өртенеді. Onicegatheringstatechange өңдегішінде біз құрдастардың арасында Сеанс сипаттамасын алмасу үшін webrtc-сигнал-сервер ағынына қосылуға рұқсат етеміз:
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-сигналдық-сервері екі теңдес арасындағы сеанс сипаттамасын алмасу үшін қажет сервер болып табылады, ол кез келген PL-дегі ең қарапайым websocket немесе xhr-сервер болуы мүмкін. Оның міндеті қарапайым: бір әріптестен сеанс сипаттамасын қабылдау және оны екіншісіне беру.
Сеанс сипаттамасымен алмасудан кейін екі тарап бейне ағындарын таратуға және қабылдауға дайын, бейне ағынын қабылдайтын жағында ontrack оқиғасы peerConnection-де іске қосылады, оның өңдеушісінде алынған тректер тағайындалуы мүмкін. және сүйікті әңгімелесушіге қараңыз. Қосымша теория және мәліметтер.
Сілтемелер мен әдебиеттер:
- құжаттама
- WebRTC протоколдарын қозғалыста енгізу
- пион жасаушылардың кітабы
- Жоғары өнімділікті браузер желісін брондаңыз. Веб-қосымшалардың жоғары өнімділігін қамтамасыз ету мәселелері жан-жақты талқыланады. Соңында WebRTC сипатталған. Кітап әрине ескі (2013), бірақ өзектілігін жоғалтпайды.
Келесі бөлімде мен теорияның біраз бөлігін бергім келеді және тәжірибеде pion көмегімен серверде бейне ағынының қабылдануын және өңделуін талдау, ffmpeg арқылы HLS-ке қайта кодтау арқылы браузерде көрермендерге кейіннен тарату үшін.
Сабырсыз адамдар үшін: (бұл тек эксперимент).
Ақпарат көзі: www.habr.com