Difuzăm un flux video de la o cameră IP folosind WebRTC. De ce nu vedem adoptarea pe scară largă a WebRTC? Cele mai bune servicii pentru testarea camerei web
Rezolvarea problemei difuzării online de la o cameră IP, în general, nu necesită utilizarea WebRTC. Camera în sine este un server, are o adresă IP și poate fi conectată direct la router pentru a distribui conținut video. Deci, de ce să folosiți tehnologia WebRTC?
Există cel puțin două motive pentru aceasta:
1. Pe măsură ce numărul de telespectatori ai unei transmisii Ethernet crește, mai întâi se va simți lipsa grosimii canalului și apoi resursele camerei în sine.
2. După cum am menționat mai sus, camera IP este un server. Dar ce protocoale poate folosi pentru a trimite videoclipuri către browserul desktop? Dispozitiv mobil? Cel mai probabil, acesta va fi fluxul HTTP, unde cadrele video sau imaginile JPEG sunt transmise prin HTTP. Streamingul HTTP, după cum știți, nu este pe deplin potrivit pentru streaming videoîn timp real, deși s-a dovedit bine în videoclipurile la cerere, unde interactivitatea fluxului și latența nu sunt deosebit de importante. De fapt, dacă vizionați un film, o întârziere de câteva secunde nu va înrăutăți situația decât dacă vizionați filmul în același timp cu altcineva. "Oh nu! Jack a ucis-o! - Alice îi scrie lui Bob un spoiler în chat cu 10 secunde înainte de finalul tragic.
Sau va fi RTSP/RTP și H.264, caz în care un plugin pentru player video, cum ar fi VLC sau QuickTime, trebuie instalat în browser. Un astfel de plugin va captura și reda videoclipuri, la fel ca playerul însuși. Dar avem nevoie de streaming real bazat pe browser, fără a instala cârje/plugin-uri suplimentare.
Mai întâi, să facem un instantaneu al camerei IP pentru a afla ce anume trimite acest dispozitiv către browser. Subiectul de testare va fi camera D-Link DCS 7010L:
Puteți citi mai multe despre instalarea și configurarea camerei de mai jos, dar aici ne vom uita doar la ce folosește aceasta pentru streaming video. Când intram în panoul de administrare al camerei prin interfața web, vedem ceva de genul acesta (scuze pentru peisaj):
Imaginea se deschide în toate browserele și se îngheață uniform, aproximativ o dată pe secundă. Avand in vedere ca atat camera cat si laptopul pe care urmarim streamul sunt conectate la acelasi router, totul ar trebui sa fie lin si frumos, dar nu este cazul. Arata ca HTTP. Să lansăm Wireshark pentru a confirma presupunerile noastre:
Aici vedem o secvență de fragmente TCP lungi de 1514 octeți
Și un HTTP 200 final OK cu lungimea JPEG primit:
Nu avem nevoie de acest tip de streaming. Nu netedă, idioți solicitări HTTP. Câte astfel de solicitări pe secundă poate gestiona camera? Există motive să credem că la 10 spectatori sau mai devreme, camera se va îndoi în siguranță sau va începe să se defecteze îngrozitor și să producă diapozitive.
Dacă te uiți în Pagini HTML panoul de administrare al camerei, vom vedea acest cod interesant:
If(browser_IE) DW(""); else ( if(mpMode == 1) var RTSPName = g_RTSPName1; else if(mpMode == 2) var RTSPName = g_RTSPName2; else if(mpMode == 3) var RTSPName = g_RTSPName3; var o=""; if(g_isIPv6) //pentru că ipv6 nu acceptă rtsp. var host = g_netip; altfel var host = g_host; o+=""; o+=""; o+=""; o+=""; o+=""; o+=""; / /alertă(o);DW(o); )
RTSP/RTP este exact ceea ce aveți nevoie reproducere corectă video. Dar va funcționa asta în browser? - Nu. Dar dacă instalați pluginul QuickTime, totul va funcționa. Dar facem streaming pur bazat pe browser.
Aici mai putem aminti Flash Player, care poate prin server potrivit tip Wowza primește flux RTMP convertit din RTSP, RTP, H.264. Dar Flash Player, după cum știți, este și un plugin de browser, deși este incomparabil mai popular decât VLC sau QuickTime.
ÎN în acest caz,, vom testa aceeași re-streaming RTSP/RTP, dar un browser compatibil WebRTC va fi folosit ca dispozitiv de redare fără pluginuri suplimentare de browser sau alte cârje. Vom configura un server de releu care va prelua fluxul de la camera IP și îl va trimite pe Internet unui număr arbitrar de utilizatori care folosesc browsere care acceptă WebRTC.
Conectarea unei camere IP După cum am menționat mai sus, am selectat pentru testare cameră IP simplă D-Link DCS-7010L. Criteriul cheie de selecție aici a fost suportul dispozitivului pentru protocolul RTSP, deoarece prin acesta serverul nostru va primi fluxul video de la cameră.Conectam camera la router folosind cablul de corecție inclus. După pornirea alimentării și conectarea la router, camera a luat o adresă IP prin DHCP, în cazul nostru a fost 192.168.1.34 (Dacă mergi la setările routerului, vei vedea că dispozitivul DCS 7010L este conectat - asta e tot ). Este timpul să testăm camera.
Deschideți adresa IP specificată în browser 192.168.1.34 pentru a ajunge la interfața web pentru administratorul camerei. În mod implicit, nu există nicio parolă.
După cum puteți vedea, videoclipul de la cameră este difuzat corect în panoul de administrare. În același timp, se observă tremurări periodice. Acesta este ceea ce vom remedia folosind WebRTC.
Configurarea camerei În primul rând, în setările camerei, dezactivăm autentificarea - ca parte a testării, vom oferi fluxul tuturor celor care solicită. Pentru a face acest lucru, în interfața web a camerei, accesați Setări de configurare– Rețea și setați valoarea opțiunii de autentificare la Dezactivare.Acolo verificăm și valoarea portului de protocol RTSP, implicit este 554. Formatul videoclipului transmis este determinat de profilul utilizat. Puteți seta până la trei dintre ele în cameră, noi îl vom folosi pe primul, live1.sdp - implicit este configurat să folosească H.264 pentru video și G.711 pentru audio. Puteți modifica setările dacă este necesar în secțiunea Configurare – Audio și Video.
Acum puteți verifica funcționarea camerei prin RTSP. Deschidere VLC Player(puteți folosi oricare altul care acceptă RTSP - QuickTime, Windows Media Player, RealPlayer etc.) și în dialogul Open URL setați adresa RTSP a camerei: rtsp://192.168.1.34/live1.sdp
Ei bine, totul funcționează așa cum ar trebui. Camera reproduce în mod regulat fluxul video în player prin protocolul RTSP.
Apropo, fluxul este redat destul de lin și fără artefacte. Ne așteptăm la același lucru de la WebRTC.
Instalare server Deci, camera este instalată, testată cu playere desktop și gata pentru difuzare prin server. Folosind whatismyip.com determinăm adresa IP externă a camerei. În cazul nostru a fost 178.51.142.223. Tot ce rămâne este să-i spuneți routerului că atunci când accesați prin RTSP pe portul 554, cererile primite vor fi transmise către camera IP.Introduceți setările corespunzătoare în router...
...și verificați adresa IP externă și portul RTSP folosind telnet:
Telnet 178.51.142.223 554
După ce ne-am asigurat că există un răspuns pe acest port, trecem la instalarea serverului WebRTC.
Va fi responsabil de gazduire server virtual pe Centos pe 64 de biți pe Amazon EC2.
Pentru a evita problemele de performanță, am ales o instanță m3.medium cu un singur VCPU:
Da, da, există și Linode și DigitalOcean, dar în acest caz am vrut să încerc Amazon.
Privind în viitor, voi scrie că în panoul de control Amazon EC2 trebuie să adăugați mai multe reguli (porturi înainte), fără de care exemplul nu va funcționa. Acestea sunt porturi pentru trafic WebRTC (SRTP, RTCP, ICE) și porturi pentru trafic RTSP/RTP. Dacă încercați, regulile Amazon ar trebui să aibă ceva similar pentru traficul de intrare:
Apropo, cu DigitalOcean totul va fi mai simplu, doar deschideți aceste porturi pe firewall sau opriți-l pe acesta din urmă. Conform celei mai recente experiențe în operarea instanțelor DO, ei încă emit o adresă IP statică și nu se deranjează cu NAT, ceea ce înseamnă că nu este necesară redirecționarea portului, ca în cazul Amazon.
Vom folosi WebRTC Media & Broadcasting Server de la Flashphoner ca software de server care transmite fluxul RTSP/RTP către WebRTC. Serverul de streaming este foarte asemănător cu Wowza, care poate transmite un flux RTSP/RTP către Flash. Singura diferență este că acest flux va fi trimis către WebRTC și nu către Flash. Acestea. DTLS sincer va trece între browser și server, se va stabili o sesiune SRTP și fluxul codificat în VP8 va merge către vizualizator.
Pentru instalare vom avea nevoie de acces SSH.
Sub spoiler - descriere detaliata comenzi executate
1. Am descărcat arhiva de instalare a serverului:
$wget flashphoner.com/downloads/builds/WCS/3.0/x8664/wcs3_video_vp8/FlashphonerMediaServerWebRTC-3.0/FlashphonerMediaServerWebRTC-3.0.868.tar.gz
2. Extins:
$tar -xzf FlashphonerMediaServerWebRTC-3.0.868.tar.gz
3. Instalat:
$cd FlashphonerMediaServerWebRTC-3.0.868
$./install.sh
În timpul procesului de instalare, am introdus adresa IP externă a serverului: 54.186.112.111 și 172.31.20.65 intern (la fel ca IP privat).
4. A pornit serverul:
$service webcallserver pornire
5. Verificați jurnalele:
$tail - f /usr/local/FlashphonerWebCallServer/logs/server_logs/flashphoner.log
6. Asigurați-vă că serverul a pornit și este gata de lucru:
$ps aux | grep Flashphoner
7. Apache instalat și lansat:
$yum instalează httpd
$service httpd start
8. A descărcat fișiere web și le-a plasat în folder standard apache /var/www/html
cd /var/www/html
$wget github.com/flashphoner/flashphoner_client/archive/wcs_media_client.zip
$unzip webrtc_media_client.zip
9. Introduceți adresa IP a serverului în configurația flashphoner.xml:
10. A oprit firewall-ul.
$service iptables se opreste
În teorie, în loc de punctul 10, ar fi corect să setăm toate porturile și regulile de firewall necesare, dar în scopuri de testare am decis să dezactivăm pur și simplu firewall-ul.
Configurarea serverului Să ne amintim că structura transmisiei noastre WebRTC este următoarea:
Am instalat deja elementele principale ale acestei diagrame; tot ce rămâne este să stabilim „săgețile” interacțiunilor.
Conexiunea dintre browser și serverul WebRTC este asigurată de clientul web, care este disponibil pe Github:. Un set de JS, CSS și fișiere HTML este pur și simplu introdus în /var/www/html în etapa de instalare (vezi punctul 9 de mai sus sub spoiler).
Interacțiunea dintre browser și server este configurată în fișierul de configurare XML flashphoner.xml. Acolo trebuie să introduceți adresa IP a serverului, astfel încât clientul web să se poată conecta la serverul WebRTC prin HTML5 Websockets (punctul 9 de mai sus).
Configurarea serverului se termină aici; puteți verifica funcționarea acestuia:
Deschideți pagina clientului web index.html în browser (pentru aceasta, Apache a fost instalat pe același server Amazon cu comanda yum -y install httpd):
54.186.112.111/wcs_media_client/?id=rtsp://webrtc-ipcam.ddns.net/live1.sdp
Aici este webrtc-ipcam.ddns.net domeniu liber, primit prin server DNS dinamic noip.com, care trimite la adresa noastră IP externă. Am spus routerului să redirecționeze cererile RTSP către 192.168.1.34 în conformitate cu regulile de difuzare adrese de rețea NAT (vezi și mai sus).
Parametrul id=rtsp://webrtc-ipcam.ddns.net/live1.sdp specifică adresa URL a fluxului pentru redare. Serverul WebRTC va solicita fluxuri de la cameră, le va procesa și le va trimite browserului pentru redare prin WebRTC. Poate că routerul dvs. acceptă DDNS. Dacă nu, atunci camera IP în sine are un astfel de suport:
Și așa arată suportul DDNS în router în sine:
Acum puteți începe să testați și să evaluați rezultatele.
Testare După deschiderea linkului în browser conexiune în curs către serverul WebRTC, care trimite o solicitare către camera IP pentru a primi un flux video. Întregul proces durează câteva secunde.
În acest moment, se stabilește o conexiune între browser și server prin intermediul websocket-urilor, apoi serverul solicită camera IP prin RTSP, primește fluxul H.264 prin RTP și îl transcodează în VP8 / SRTP - care în cele din urmă redă browserul WebRTC.
În partea de jos a videoclipului, este afișată adresa URL a fluxului video, care poate fi copiată și deschisă pentru vizionare din alt browser sau filă.
Ne asigurăm că acesta este cu adevărat WebRTC. Dacă am fi înșelați, iar videoclipul de la camera IP este transmis din nou prin HTTP? Să nu ne uităm cu mâna pe poză, ci să verificăm ce fel de trafic primim de fapt. Desigur, lansăm din nou Wireshark și consola de depanare în Chrome. ÎN Consola Chrome browser putem vedea următoarele:
De data aceasta nimic nu clipește și nicio imagine nu este vizibilă transmisă prin HTTP. Tot ce vedem de data aceasta sunt cadre Websocket și cele mai multe dintre ele sunt tipuri de ping/pong pentru a menține o sesiune Websocket. Cadre interesante: connect, prepareRtspSession și onReadyToPlay - aceasta este ordinea în care se stabilește o conexiune la server: mai întâi o conexiune Websocket și apoi o cerere de stream pentru redare.
Și asta arată chrome://webrtc-internals
Conform graficelor, avem un bitrate de la camera IP de 1Mbps. Există și trafic de ieșire, cel mai probabil acestea sunt pachete RTCP și ICE. RTT-ul către serverul Amazon este de aproximativ 300 de milisecunde.
Acum să ne uităm la Wireshark, puteți vedea clar traficul UDP de la adresa IP a serverului. În imaginea de mai jos, pachetele au 1468 de octeți. Acesta este WebRTC. Mai exact, pachetele SRTP care transportă cadre video VP8, pe care le putem observa pe ecranul browserului. În plus, solicitările STUN trec (cel mai jos pachet din imagine) - acesta este WebRTC ICE care verifică cu atenție conexiunea.
De asemenea, merită remarcată latența relativ scăzută (ping-ul către centrul de date a fost de aproximativ 250 ms) pentru redarea video. WebRTC funcționează prin SRTP/UDP și asta, orice s-ar spune, este cel mai mult cale rapidă livrarea pachetelor, spre deosebire de HTTP, RTMP și alte metode de streaming asemănătoare TCP. Acestea. Întârzierea vizibilă pentru ochi ar trebui să fie RTT + timpul de buffering, decodare și redare de către browser. Vizual, acesta este cazul în acest caz - ochiul aproape că nu vede întârzierea, este mai mică de 500 de milisecunde.
Următorul test este conectarea altor spectatori. A reușit să deschidă 10 Windows Chrome, iar fiecare dintre ei a arătat câte o poză. În același timp, Chrome însuși a început să devină puțin plictisitor. La deschiderea celei de-a 11-a ferestre pe alt computer, redarea a rămas fără probleme.
Despre WebRTC pe dispozitivele mobile După cum știți, WebRTC este acceptat de browserele Chrome și Firefox pe platforma Android.Să verificăm dacă emisiunea noastră va fi afișată acolo:
Pe imagine telefon HTC, V browser Firefox este afișat videoclipul de la cameră. Nu există diferențe de fluiditate a redării față de desktop.
Concluzie Ca urmare, am reușit să lansăm o transmisie online WebRTC de la o cameră IP către mai multe browsere cu cu efort minim. Nu au fost necesare dansuri cu tamburin sau știință-rachetă - doar cele de bază cunoștințe Linuxși console SSH.Calitatea difuzării a fost la un nivel acceptabil, iar întârzierea redării era invizibilă pentru ochi.
Pentru a rezuma, putem spune că emisiunile WebRTC bazate pe browser au dreptul de a exista, deoarece în cazul nostru, WebRTC nu mai este o cârjă sau un plugin, ci o adevărată platformă de redare a videoclipurilor în browser.
De ce nu vedem implementare pe scară largă WebRTC? Principalul obstacol este poate lipsa codecurilor. Comunitatea WebRTC și vânzătorii ar trebui să facă un efort și să introducă codecul H.264 în WebRTC. Nu există nimic de spus împotriva VP8, dar de ce să renunți la milioane de dispozitive și software compatibile care funcționează cu H.264? Brevete, astfel de brevete...Pe locul doi, nu sprijin deplinîn browsere. Cu IE și Safari, de exemplu, întrebarea rămâne deschisă și acolo va trebui să treci la alt tip de streaming sau să folosești un plugin precum webrtc4all.
Deci, în viitor, sperăm să vedem mai multe solutii interesante, în care transcodarea și conversia fluxurilor nu vor fi necesare și majoritatea browserelor vor putea reda fluxuri cu diverse dispozitive deja direct.
Pe dreapta colțul de sus Găsim pictograma roată, cunoscută și sub numele de „Service”. Deschideți fila „Proprietăți browser”. Selectați secțiunea de securitate, selectați pictograma „Internet”, faceți clic pe butonul „Altele”. În meniul de setări care se deschide, căutați linii cu Active X și activați fiecare scenariu sau setați-le în poziția „sugerare”.
Dacă totul este făcut corect, atunci când lovești interfata web dispozitive, ni se va solicita să instalăm pluginul, după care putem efectua de locuri de muncă cu normă întreagă cu camerele tale video.
Posibilitatea de a viziona supraveghere video prin alta browser terță parte este de asemenea disponibil, dar pentru aceasta trebuie să instalați o extensie specială IE Tab. Deschideți pictograma „trei puncte” - setări managementul Google Crom. Selectați linia " Instrumente suplimentare„Dați clic pe extensii din meniul derulant.
În fereastra „Extensii” care se deschide, în colțul din stânga sus, faceți clic pe pictograma cu trei liniuțe și găsiți „Chrome Store”.
În fereastra de căutare, căutați extensia „IE TAB” de care avem nevoie. Faceți clic pe instalare.
Vrei să știi cum să câștigi 50 de mii lunar online?
Urmărește interviul meu video cu Igor Krestinin
=>>
Majoritatea programelor și serviciilor create pentru comunicarea între oameni oferă posibilitatea comunicării video. Pentru a face acest lucru, trebuie să utilizați .
Mai mult, dacă laptopul are o cameră încorporată inițial, atunci pornit calculator desktop, de regulă, este absent. În acest caz, pentru a utiliza comunicația video, este necesară o achiziție și o instalare suplimentară.
În principiu, orice procesor este echipat cu un special conector USB, permițându-vă să conectați unități flash, tastaturi și orice dispozitive cu același conector.
Prin urmare, nu vor fi probleme la conectarea unei camere web. Cu toate acestea, aș dori să înțeleg cum să verific camera de pe un computer dacă funcționează sau nu. Acesta este exact ceea ce va discuta acest articol.
Înainte de a începe să utilizați dispozitivul de transmitere a imaginii, trebuie să îl conectați la computer printr-un cablu USB.
Apoi în colțul din dreapta jos calculator personal Va apărea o fereastră pop-up care indică faptul că driverele sunt în curs de instalare. După aceasta, în funcție de sistemul de operare, verificarea dispozitivului video se poate face în diferite moduri.
De exemplu, în sala de operație sistem Windows XP, driverele sunt instalate automat, după care puteți accesa meniul Start și selectați Panou de control.
Apoi găsiți „Scanere și camere” din listă și faceți clic pe „Dispozitiv video USB”. După aceasta, dacă totul a fost instalat corect, imaginea transmisă de la cameră va apărea pe monitor.
Pentru ceilalti sisteme de operare necesar încărcare suplimentară drivere de pe site-urile web ale producătorilor de camere web. În ceea ce privește verificarea, pentru aceasta va trebui să intrați într-un program în care există o opțiune de comunicare video și să o efectuați cu ajutorul acestuia.
Verificarea dispozitivului videoCa exemplu, vă voi da pe cel mai frecvent utilizat, accesați „Instrumente”.
În acest caz, puteți verifica funcționalitatea camerei prin secțiunea „Setări” din elementul „Setări video”.
Astfel, întrebarea cum să verifici camera pe computer dacă funcționează sau nu este rezolvată. Cu toate acestea, dacă după verificarea opțiunilor descrise mai sus, dispozitivul nu funcționează, atunci ar trebui să încercați să îl instalați pe alt computer pentru a vă asigura că funcționează corect.
Dacă funcționează, atunci căutați cauza problemei pe computer, în caz contrar, ar trebui să contactați serviciul sau să îl schimbați cu web nou aparat foto.
Cum se verifică camera de pe un laptopUn dispozitiv video este disponibil pe orice laptop, dar acest lucru nu exclude posibilitatea instalării echipament adițional, prin conectarea la acesta printr-un cablu USB. Pentru a verifica dacă funcționează, puteți face acest lucru în mai multe moduri.
Prima presupune verificarea utilizând meniul Start:
A doua metodă, s-ar putea spune, este universală și ușor de utilizat pentru orice computer, care constă în verificarea echipamentului folosind Skype, Mail Agent și alte servicii de comunicare unde este posibilă apelarea video.
Cum să verificați camera de pe computer pe internetÎn prezent, există destul de multe servicii care vă permit să vă verificați camera web online.
Lista site-urilor unde puteți verifica camera online:
Odată ce accesați aceste site-uri, vi se cere să faceți clic pe butonul „verificați camera” și să permiteți accesul la camera dvs. Dacă totul este în ordine, veți vedea imediat imaginea de pe camera dvs. Dacă există probleme, vă vor spune despre asta.
De ce nu funcționează camera web?Se poate întâmpla să fi instalat totul și la verificarea conexiunii camera să nu funcționeze. Astfel de situații sunt posibile din mai multe motive:
Iată câteva motive și soluții în cazul în care dispozitivul dvs. nu funcționează.
PlusCând utilizați un computer, merită să actualizați periodic driverele video, mai ales dacă intenționați să utilizați un dispozitiv video. Când instalați camera, dacă driverul dvs. este învechit, va apărea o fereastră de sistem care vă va cere să îl actualizați.
Doar urmați instrucțiunile și programul va fi actualizat. Dacă actualizarea eșuează, puteți utiliza programul pentru a scana și instala șoferii dispăruți DriverFinder.
De asemenea, dacă echipamentul video nu funcționează, nu ar fi de prisos să fie executat verificare profundă instalat pe computer pentru disponibilitate malwareȘi .
Uneori, conectorul USB devine inoperant, ceea ce face ca camera să nu funcționeze. Prin urmare, dacă întâmpinați probleme când îl conectați la un port USB, încercați să îl conectați la altul.
Din toate acestea rezultă că sunt multe căi diferite Verificarea camerei pentru funcționalitate, precum și metodele de depanare pe care le puteți face singur.
P.S. Atașez capturi de ecran ale câștigurilor mele din programele de afiliere. Și vă reamintesc că oricine o poate face, chiar și un începător! Principalul lucru este să o faci corect, ceea ce înseamnă să înveți de la cei care fac deja bani, adică de la profesioniști.
Vrei să știi ce greșeli fac începătorii? 
99% dintre începători fac aceste greșeli și eșuează în afaceri și câștigă bani pe internet! Aruncați o privire pentru a evita repetarea acestor greșeli - „3 + 1 GREȘELI DE ÎNCEPTATORI CARE UCIAZĂ REZULTATELE”.
Ai nevoie urgent de bani? 
Descărcați gratuit: „TOP - 5 moduri de a câștiga bani pe internet.” 5 cele mai bune moduri a face bani pe internet, ceea ce vă va aduce garantat rezultate de 1.000 de ruble pe zi sau mai mult.
Iată o soluție gata făcută pentru afacerea ta! 
Iar pentru cei obișnuiți să ia soluții gata făcute, există „Proiect soluții gata făcute să începi să faci bani pe internet”. Aflați cum să vă începeți propria afacere online, chiar și pentru cel mai ecologic începător, fără cunoștințe tehnice și chiar fără expertiză.
Prieteni! Se apropie vremurile în care aproape tot ceea ce necesita Flash în browser poate fi făcut fără el. Nu știu despre tine, dar asta îmi trezește multe emoții pozitive. Unul dintre pașii către înlocuirea flash este implementarea API-ului javascript getUserMedia (Stream) în browsere. Pe acest moment Stream API pentru streaming video este implementat pe cel mai recent desktop versiuni Chromeși Opera. Firefox vine. Flux audio „în curând”. Nici măcar nu știu dacă să mă aștept la ceva de la IE.. în teorie, el ar prefera să moară (.. și va muri) decât să înceapă să-i ajungă din urmă pe toți ceilalți.
Să aruncăm o privire la un exemplu și apoi să vedem cum funcționează:
Să ne dăm seama cum funcționează.
Pentru a începe, vom avea nevoie de următoarele elemente:
După cum puteți vedea, dacă reușește, apelul înapoi va returna un obiect de flux, pe baza căruia puteți obține adresa URL a fluxului video. Puteți face acest lucru folosind window.URL.createObjectURL(stream) , care vă poate fi familiar dacă ați folosit vreodată API-ul fișierului js.
JS var url = window.URL.createObjectURL(stream);- transmiteți această adresă URL obiectului video
- când se face clic pe butonul, capturăm cadrul video curent în pânză
- luați data:url-ul imaginii rezultate din pânză
- si gata, ai terminat! Puteți face ce doriți cu el: trimiteți-l la server, filtrați-l, transferați-l unui prieten printr-un socket etc. Puteți citi mai multe despre formatul base64 și data:url.
Desigur, este mai bine și mai frumos să creezi toate elementele (pânză, video, ..) în mod dinamic, dar pentru claritate și înțelegere, să le plasăm inițial static pe pagină:
HTML ▲ ▲ ▲ Permite camera ▲ ▲ ▲(De mai sus pagina curenta) video canvas JS window.onload = function () ( var canvas = document.getElementById("canvas"); var video = document.getElementById("video"); var button = document.getElementById("button"); var allow = document.getElementById("allow"); var context = canvas.getContext("2d"); var videoStreamUrl = false; // funcție care va fi executată când se face clic pe butonul de captare a cadrului var captureMe = function () ( dacă ( !videoStreamUrl ) alert(„Fie nu ați făcut clic pe „permite” în partea de sus a ferestrei, fie ceva este în neregulă cu fluxul video”) // răsturnează pânza orizontal (vezi descrierea din partea de jos a articolului) context. translate(canvas .width, 0); context.scale(-1, 1); // desenează cadrul video curent pe pânză context.drawImage(video, 0, 0, video.width, video.height); // obțineți date: url-ul imaginii c canvas var base64dataUrl = canvas.toDataURL("image/png"); context.setTransform(1, 0, 0, 1, 0, 0); // eliminați toate transformările personalizate de pânză // la în această etapă puteți trimite în siguranță base64dataUrl la server și îl puteți salva acolo ca fișier (sau ceva) // dar vom adăuga aceste imagini de testare la exemplul nostru: var img = new Image(); img.src = base64dataUrl; window.document.body.appendChild(img); ) button.addEventListener("click", captureMe); // navigator.getUserMedia și window.URL.createObjectURL (troubled times of browser controversies 2012) navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL; // solicită permisiunea de a accesa navigatorul video în flux al camerei.getUserMedia((video: true), function (stream) ( // a fost primită permisiunea de la utilizator // ascunde indiciu allow.style.display = "none"; / / obțineți adresa URL a videoclipului în flux videoStreamUrl = window.URL.createObjectURL(stream); // setați ca sursă pentru video video.src = videoStreamUrl; ), function () ( console.log("ceva este în neregulă cu fluxul video); sau utilizatorul a interzis utilizarea acestuia:P "); )); ); CSSMirroring în timpul fotografierii
În exemplul de mai sus, am capturat imagini cu o imagine în oglindă orizontală. De ce intrebi. Uneori poți întâmpina astfel de probleme. Acest lucru este valabil mai ales atunci când trebuie să vă poziționați cu precizie imaginea în raport cu cadrul sau cu obiectele din jur. De exemplu, plasați fața într-o zonă specificată pentru scanare, combinați-o cu o mască prestabilită etc. În acest caz, va fi mai convenabil pentru utilizator dacă imaginea primită de la cameră este afișată în oglindă (orizontal) pe monitor.
Cum am reușit acest lucru:
În primul rând, am făcut-o transformarea css pentru video
Video CSS( transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); -moz-transform: scaleX(-1); -webkit-transform: scaleX (-1); )În al doilea rând, am rotit imaginea pe pânză în același mod
JS // întoarce oglinda pânzei pe orizontală context.translate(canvas.width, 0); context.scale(-1, 1);Daca nu ai nevoie reflexie în oglindă, eliminați doar acea parte js și css
Noroc! Aștept cu nerăbdare întrebări și corecturi în comentarii.
O extensie de browser este un plugin care este instalat suplimentar în browser și îndeplinește anumite funcții (în browser Extensii Opera numite anterior widget-uri). Funcțiile îndeplinite de extensie pot fi complet diferite - de la traducerea cuvintelor pe orice site deschis, diverse divertisment și până la funcții utile pentru webmasteri și optimizatori SEO.
Comoditatea extensiilor constă în faptul că acestea sunt întotdeauna la îndemână, de obicei în colțul din dreapta al browserului dvs. în formularul icoane frumoase 18x18 pixeli. Pentru a efectua aceasta sau acea acțiune, faceți clic o dată pe extensia necesară- foarte confortabil! Extensiile se deschid în ferestre mici, ceea ce nu interferează cu navigarea pe site-urile preferate. Când faceți clic cu mouse-ul în afara ferestrei extensiei, extensia se închide la fel de repede cum s-a deschis.
Dezvoltatorii de browser oferă toate informațiile despre dezvoltarea și depanarea extensiilor, astfel încât oricine înțelege ceva despre tehnologiile web își poate crea propria extensie. Fiecare browser are, de asemenea un numar mare de extensii utile, care poate fi descărcat de pe site-urile web oficiale ale browserului.
site-ul vă oferă să organizați supravegherea video prin Internet folosind extensia MyIPCam pentru browsere Google Chrome, Mozilla Fifefox, Opera (sunt acceptate atât Opera pe motorul Presto, cât și noul Opera 15+ pe motorul Chromium) și Yandex Browser. Când instalați extensia noastră, camerele dumneavoastră IP vă vor fi disponibile imediat, fără a vă înregistra la serviciul nostru. Extensia va accesa direct camera dvs. IP și va primi o imagine de la aceasta.
Există multe avantaje ale supravegherii video printr-o extensie de browser. De exemplu, pentru a vizualiza camerele IP, nu trebuie să vă înregistrați diverse servicii Supraveghere video. Tot ce trebuie să faceți este să selectați modelul camerelor dvs. în setările extensiei, să introduceți adresele IP sau numele DNS ale acestora, să setați o autentificare și o parolă. Și supravegherea video este gata.
Supravegherea video printr-o extensie de browser este cea mai mare metoda operațională vizualizarea camerelor dvs. IP dacă citiți știrile sau navigați pe internet!
Doar faceți clic pe pictograma din colțul din dreapta sus și camerele dvs. IP se deschid într-o fereastră mică și începe difuzarea video de la ele. Pentru a închide fereastra de extensie, faceți clic în afara ferestrei de extensie. Această abordare nu numai că vă permite să vă vizualizați camerele cel mai rapid și mai convenabil, atunci când nu aveți timp să fiți distras de mișcările inutile ale corpului pentru a vedea situația acasă, dar nici nu interferează cu munca dvs. pe Internet. Veți avea ocazia să nu închideți site-ul sau să vă îndepărtați de site-ul pe care îl vizualizați în prezent.
Condiții necesare pentru organizarea supravegherii video printr-o extensie de browser:
- Camerele IP trebuie să fie accesibile de pe Internet. Acestea. dacă vă puteți vizualiza camera de oriunde, de la birou sau de acasă, atunci acest lucru este posibil și prin extensie. Dacă nu știți cum să faceți o cameră IP accesibilă de pe Internet, citiți articolul.
- Este posibil să utilizați extensii în rețele locale. În acest caz, extensia indică adrese IP locale Camerele dvs. (tip 192.168.X.X). Puteți vizualiza camerele dvs. de acasă doar dacă sunteți acasă, camere IP de birou - dacă sunteți la birou. Dezavantaj - Nu veți putea vizualiza camerele IP de acasă dacă vă aflați, de exemplu, într-un birou.
- Extensia MyIPCam pentru vizualizarea camerelor IP prin Google Chrome și Yandex Browser
Extensia vă permite să vă vizualizați camerele IP în browsere populare Google Chrome și Yandex Browser. Pentru a lucra în setările extensiei, trebuie să selectați modelul camerei, să setați adresa, autentificarea și parola pentru a accesa camera IP.
Descărcați extensia MyIPCam de pe site-ul oficial Chrome Web Store - Extensia MyIPCam pentru vizualizarea camerelor IP printr-un browser Mozilla Firefox
Extensia (supliment) vă permite să vă vizualizați camerele IP Browser Mozilla Firefox. Pentru a lucra în setările extensiei, trebuie să selectați modelul camerei, să setați adresa, autentificarea și parola pentru a accesa camera IP.
Descărcați extensia MyIPCam de pe site-ul oficial Mozilla Firefox - Extensia MyIPCam pentru vizualizarea camerelor IP prin browser-ul Opera
Extensia vă permite să vă vizualizați camerele IP în browser Opera. Pentru a lucra în setările extensiei, trebuie să selectați modelul camerei, să setați adresa, autentificarea și parola pentru a accesa camera IP.
Descărcați extensia MyIPCam de pe site-ul oficial Opera
Vrei să fii în fiecare browser al clienților tăi? Vom dezvolta propria noastră extensie pentru dvs. Contactează-ne și extinde-ți capacitățile cu noi! Detalii.
