Ба гунае дар аз мақолаҳои кӯҳна ва аллакай партофташуда, ман дар бораи он навиштам, ки чӣ гуна шумо метавонед ба осонӣ ва табиатан видеоро аз канвас тавассути вебсокетҳо пахш кунед. Дар он мақола, ман мухтасар дар бораи чӣ гуна сабт кардани видео аз камера ва садо аз микрофон истифода кардам , чӣ гуна ҷараёни қабулшударо рамзгузорӣ кардан ва тавассути вебсокетҳо ба сервер фиристодан. Аммо, дар асл онҳо ин корро намекунанд, барои пахшҳо онҳо ё нармафзори махсусеро истифода мебаранд, ки бояд насб ва конфигуратсия карда шаванд. , ё онҳо WebRTC-ро истифода мебаранд, ки аз қуттӣ кор мекунад, яъне он насби ягон плагинҳои флеш плеери ла талаб намекунад, ки аллакай дар моҳи декабр аз браузери Chromium бурида мешавад.
Имрӯз мо дар бораи WebRTC сӯҳбат хоҳем кард.
Алоқаи воқеии веб (WebRTC) як протоколи ягона нест, он маҷмӯи пурраи стандартҳо, протоколҳо ва API-ҳои JavaScript мебошад, ки дар якҷоягӣ иртиботи воқеии видео-аудио ба ҳамсол ба ҳамсолро таъмин мекунанд ва инчунин метавонанд барои интиқоли ҳама гуна видео истифода шаванд. маълумоти дуӣ. Одатан, браузерҳо ҳамчун ҳамсол амал мекунанд, аммо он инчунин метавонад як барномаи мобилӣ бошад, масалан. Барои ташкили алоқаи p2p байни муштариён, дастгирии браузер барои намудҳои гуногуни рамзгузории видео ва аудио, дастгирии протоколҳои гуногуни шабакавӣ, таъмини ҳамкории сахтафзор бо браузер (тавассути қабатҳои OS): веб-камераҳо, кортҳои садоӣ зарур аст. Ҳамаи ин технологияҳо дар паси абстраксияи JavaScript API барои роҳати таҳиягар пинҳон карда шудаанд.
Ҳамааш ба се API мепайвандад:
-
— дафъаи гузашта бархам дода, имруз дар бораи у каме бештар менависам. Барои гирифтани ҷараёнҳои видео / аудио аз сахтафзор хидмат мекунад
-
— алоқаи байни ду муштариро таъмин мекунад (p2p)
-
- барои интиқоли маълумоти худсарона байни ду муштарӣ хизмат мекунад
Омода кардани ҷараёнҳои аудио ва видео барои интиқол
Ҳамааш аз "забти" веб-камера ва ҷараёнҳои медиаи микрофон оғоз мешавад. Албатта, ҷараёнҳои хом барои ташкили телеконфронс мувофиқ нестанд, ҳар як ҷараёнро коркард кардан лозим аст: сифатро беҳтар кунед, аудиоро бо видео ҳамоҳанг созед, аломатҳои синхронизатсияро дар ҷараёни видео ҷойгир кунед ва суръати бит ба фарохмаҷрои доимии канал мувофиқат кунед. . Браузер ҳамаи инро ғамхорӣ мекунад, таҳиякунанда ҳатто набояд дар бораи таъмин кардани рамзгузорӣ барои ҷараёнҳои медиа хавотир шавад. Дар дохили браузери муосир аллакай қабатҳои нармафзор барои сабт кардан, беҳтар кардани сифат (бардоштани акси садо ва садо аз садо, беҳтар кардани тасвир), рамзгузории видео ва аудио мавҷуданд. Схемаи қабат дар расм нишон дода шудааст. 1:
Райс. 1. Қабатҳои коркарди аудио ва видео дар браузер
Ҳама коркард бевосита дар худи браузер сурат мегирад, ҳеҷ чизи иловагӣ. плагинҳо лозим нест. Бо вуҷуди ин, вазъ барои соли 2020 то ҳол он қадар гулобӣ нест. Браузерҳое ҳастанд, ки ҳанӯз пурра дастгирӣ намекунанд , шумо метавонед истинодро пайгирӣ кунед ва ҷадвали мутобиқатро дар поёни он бубинед. Махсусан IE боз таассуфовар аст.
Шумо метавонед бо ҷараёнҳои қабулшуда корҳои хеле ҷолиб анҷом диҳед: шумо метавонед клон кунед, ҳалли видеоро тағир диҳед, сифати аудиоро идора кунед, шумо метавонед ҷараёни Media Stream-ро гирифта, ба он "пайваст кунед". барчасп кунед ва дар саҳифаи html ба худ нигаред. Ё шумо метавонед ҷараёнро дар канвас кашед ва WebGL ё CSS3-ро насб кунед ва филтрҳои гуногунро ба видео татбиқ кунед, видеои коркардшударо аз канвас сабт кунед ва сипас онро тавассути шабака ба сервер фиристед, рамзгузорӣ кунед ва ба ҳама нашр кунед (салом bigo live, twitch) ва дигарон). Дар ин ҷо ман таҳлил намекунам, ки чӣ гуна ин корҳо анҷом дода мешаванд, ман якчанд мисолҳоеро медиҳам, ки дар веб пайдо шудаанд:
- бачаҳо дар вақти воқеӣ CV-ро дар Javascript кор мекунанд. Онҳо як кулл доранд китобхонаҳои гуногуни js барои кор бо ҷараёни видео дар рони: ошкор кардани чеҳраҳо, объектҳо, татбиқи филтрҳо (ниқобҳо, ба монанди Instagram) ва ғайра. Намунаи олиҷаноби чӣ гуна шумо метавонед видеои вақти воқеиро мустақиман дар браузер бидуни плагинҳои иловагӣ коркард кунед.
- Ҳуҷҷатҳои 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);Баъдан, рӯйдоди оид ба гуфтушунид дар peerConnection оташ мезанад, ки дар коркардкунандаи он мо бояд пешниҳоде эҷод кунем (аз нуқтаи назари SDP - Протоколи тавсифи сессия) ва онро тавассути усули setLocalDescription ба peerConnection таъин кунем. Дар бораи SDP - ин чист ва дар бораи форматҳои пешниҳод ва ҷавоб - мо минбаъд сӯҳбат хоҳем кард.
Пас аз таъини LocalDescription peerConnection, браузер номзадҳои яхро "ҷамъ" мекунад, яъне роҳҳои гуногуни муошират тавассути NAT -ро пайдо мекунад. Чорабинии onicegatheringstatechange оташ мегирад. Дар коркардкунандаи onicegatheringstatechange, мо имкон медиҳем, ки пайвастшавӣ ба ҷараёни webrtc-signaling-server барои мубодилаи Тавсифи сессия байни ҳамсолон:
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 серверест, ки барои табодули тавсифи сессия байни ду ҳамсол лозим аст, он метавонад соддатарин вебсокет ё xhr-сервер дар ҳама гуна PL бошад. Вазифаи он оддӣ аст: қабул кардани тавсифи сессия аз як ҳамсол ва интиқол додани он ба дигар.
Пас аз табодули тавсифи сессия, ҳарду ҷониб омодаанд, ки ҷараёнҳои видеоиро пахш ва қабул кунанд, дар он тарафе, ки ҷараёни видеоро қабул мекунад, воқеаи ontrack дар peerConnection оғоз мешавад, ки дар коркардкунандаи он, трекҳои гирифташуда метавонанд ба ва ба мусоҳиби дӯстдоштаи худ назар кунед. Назария ва тафсилоти иловагӣ.
Пайвандҳо ва адабиёт:
- ҳуҷҷатгузорӣ
- татбиқи протоколҳои WebRTC дар роҳ
- китоб аз офарандагони пион
- Шабакаи браузери баландсифатро китоб кунед. Масъалахои таъмини кори баланди замимахои веб муфассал мухокима карда мешаванд. Дар охир, WebRTC тавсиф карда мешавад. Китоб албатта кӯҳна аст (2013), аммо аҳамияти худро гум намекунад.
Дар қисми навбатӣ, ман мехоҳам як қисми бештари назарияро диҳам ва дар амал қабул ва коркарди ҷараёнҳои видеоиро дар сервер бо истифода аз pion, transcoding ба HLS тавассути ffmpeg барои пахши минбаъда ба тамошобинон дар браузер таҳлил кунам.
Барои бесабр: (ин танҳо як озмоиш аст).
Манбаъ: will.com