va bene penso di fare per iniziare è una specie di
andato 10 – sì la mia prima volta che va –
la prima volta in Danimarca è bello essere
qui il sole splende
comunque io lavoro per Google sono uno sviluppatore
difendere il mio nome è Sam Dutton su
Twitter Sono in realtà SW 12 Sam DUP e
su Twitter è qualcuno completamente
diverso così ho intenzione sorto onna I
credo che a quanto pare sia appena stato morso da
una vespa comunque sul serio se vuoi
seguire con queste diapositive lì a
vai app WebRTC calmo se davvero
ossessionato c’è un repository github che conosci
patch e problemi tutto questo davvero
benvenuto, naturalmente sto andando a parlare
su WebRTC ho intenzione di parlare di come
puoi creare un’applicazione web RTC, ma mi piacerebbe
iniziare dando una specie di a
un po ‘ di contesto per il progetto così tu
sapere WebRTC è una collaborazione come
Robert ha detto di portare in tempo reale
comunicazione al browser come a
il mio collega Serge Lesha Pearl ha detto
sai che la comunicazione umana dovrebbe essere
come naturale in un’app Web come l’immissione di testo
in una casella di testo è come se ne conoscessi una
l’ultimo può essere uno degli ultimi
pezzi mancanti nel browser in modo che il
i valori fondamentali del progetto sono stati
che deve essere tutti i componenti devono
essere open-source e che deve essere gratuito
per gli sviluppatori di implementare app WebRTC
e gratuito per gli utenti e ovviamente al
il cuore di questo è video e audio
comunicazione ma anche capacità di
comunicare dati arbitrari tra fine
utenti di app WebRTC e questo deve
essere in grado di accedere che conosci il
streaming video audio di altissima qualità
ma per farlo in modo che fosse basso
costo per le persone di implementare queste app
e come si è scoperto tu conosci il tipo
di base di questo è stato che WebRTC
funzionerebbe peer-to-peer tradizionale reale
app di comunicazioni temporali e questo molto
diagramma molto più semplice
di impresa difficile da implementare ma
anche tu sai andare via di tipo
sistemi secondari il tipo di visione di
WebRTC è questo diagramma con un bianco
nuvola soffice nel mezzo ma lo sai
il punto qui è abilitare il peer-to-peer
comunicazione come vedremo sono le cose
mai così semplice ma questo è il nocciolo di
questo per permetterti di conoscere dati e audio
e lo streaming video tra colleghi
direttamente così per realizzare questo il
Il progetto WebRTC doveva fare un certo numero di
cose che dovevano definire
protocolli e definire i protocolli che
sarebbe utilizzato dal progetto nell’ITF
e quindi per costruire standard di specifiche con
il w3c quindi abbiamo la bozza WebRTC e
media capture e streaming e così via e
quindi fare questa roba in una specie di a
la parte veramente difficile è costruirli
cose nel browser, quindi avevamo bisogno
davvero buoni media e comunicazioni
impila solo una parola sul jingle perché
questo è un po ‘ al centro di molti
il jingle di lavoro WebRTC è un’estensione
a XMPP per abilitare audio come voce e
video con chat e jingle Lib è un C ++
libreria sviluppata da Google per implementare
quello e il tipo di parti di trasporto di rete
di questo sono al centro di WebRTC e
si sente un sacco di roba su Live
jingle se lo fai un po ‘di approfondimento
in esso WebRTC che abbiamo visto in parallelo
lo sviluppo di alta qualità aperta
source codec vp8 e AAPI e così via
e l’obiettivo, naturalmente, è che questo sia
costruendo sai un nuovo tipo di
ecosistema di comunicazione un nuovo modo di
comunicare così dove siamo dove siamo
ora abbiamo implementato l’API WebRTC
su Chrome e Chrome per Android Firefox
e ora Firefox per Android che è
la grande opera ha detto che lo saranno
implementazione su desktop e per dispositivi mobili
l’opera, naturalmente, si è trasferita
sbattere le palpebre e ora siamo nativi
collegamenti per WebRTC in Java e molti altri
recentemente per iOS in Objective C um one
cosa a cui semplicemente piaceva
io come uno sviluppatore QT carino con
appena QT il progetto ha appena annunciato
che useranno il cromo e
ciò significa che le app sono state costruite con
il simpatico quadro che conosci incorporato
dispositivi un sacco di potenziale multipiattaforma
avrà tutte queste cose come hanno detto
lavorando fuori dalla scatola per me è così
davvero eccitante quindi abbiamo al momento
qualcosa come ben oltre un miliardo
Endpoint WebRTC molto più previsti
per il prossimo futuro sulla prossima coppia
di anni quindi sai che questo sarà il
fine della telefonia come sappiamo che il tempo sarà
dillo ma penso che tu sappia solo
guardando il tipo di applicazioni
ne abbiamo visto di recente ce ne sono alcuni davvero
roba interessante già in arrivo
abbiamo appena fatto la prima intervista TV
via WebRTC questo era a Londra pochi
settimane fa fatto da Sky nei vecchi tempi a
fai questo lo sai che ti serve tutto questo
kit tutte queste persone che ti servivano
questi camion OB e lo staff con cui andare
loro e lo hanno fatto con una macchina fotografica
mi piace esattamente come quello che ho qui
e uno di questi microfoni Yeti che sono io
Non conosco centinaia di euro quindi è per me
è che conosci un potenziale fantastico lì
quindi questo è un po ‘il tipo di
la visione di WebRTC ma solo tu lo sai
pensando a cosa dobbiamo costruire
comunicazione in tempo reale quindi al centro I
Immagino che la comunicazione in tempo reale sia la
possibilità di accedere a voce e video e a
comunica che sai di pensare
telefonia e video chat e così via e
questo è un tipo di caso d’uso principale per
WebRTC e per questo abbiamo bisogno di cui abbiamo bisogno
realizzare tre tipi di cose così
in primo luogo dobbiamo essere in grado di ottenere
l’audio e il video abbiamo bisogno di un modo per ottenere
sai cose dal tuo microfono e dal tuo
fotocamera e in secondo luogo abbiamo bisogno di essere in grado
per comunicare quei dati e questo si trasforma
rivela essere, naturalmente, non lo sai
molto complesso e la terza parte è questa
capacità di comunicare dati arbitrari
altri tipi di dati, nonché audio e
video quindi per questo abbiamo tre principali
API JavaScript abbiamo il flusso multimediale
più noto penso alla maggior parte delle persone da
ottenere i media utente un modo per ottenere l’accesso
a audio e video locali dal tuo microfono
e fotocamera e abbiamo rtcpeerconnection
che è l’ API per stabilire
connessioni e comunicazione tra
colleghi che ricevo la vendita dei dati è una specie di
parte di questo, ma questa è l’API per
Comunicando dati arbitrari parlerò
su questa roba più tardi in modo tale flusso di media
questo è il termine astrazione
di streaming media possiamo ottenere un media
flusso usando il Navigator getusermedia
il ministero dei metodi rappresenta come a
un’unica sorgente di streaming sincronizzata
i dati e ogni flusso multimediale possono avere
più tracce di streaming multimediale ciascuna di
quelli che rappresentano audio o video e noi
prendi uno come dico usando getusermedia
e puoi vedere nell’esempio qui in
lo schema che abbiamo effettivamente ottenuto
scomposto un gradino più in là dove un
la traccia audio del flusso multimediale è a sinistra
canale e un canale giusto e tu puoi
immagina varianti su quel tema navigato
getusermedia accetta tre argomenti
primo di questi è abbastanza interessante
ma in questo esempio è molto semplice
può vedere l’oggetto vincoli al
laggiù tutto quello che sto dicendo qui è prendermi
il video non mi interessa da dove viene
solo il dispositivo predefinito è tutto ciò che ho
voglio che il video non sia audio nient’altro e
allora puoi vedere nella callback di successo
che è passato uno stream stream stream
e quindi in questo esempio un semplice
esempio lo stiamo impostando come
come la fonte di un elemento video
vediamo che in azione ora
quindi noti quando ho aperto questa pagina
questo è in esecuzione getusermedia se tu
non l’ho visto prima che lo stia permettendo
accesso alla mia macchina fotografica e, si spera
trovandone lì andiamo un po ‘di video
arrivando da lì se solo guardiamo
il codice quando lo rileviamo un po ‘
puoi vederlo se guardiamo al flusso
oggetto qui puoi vedere che ne ho vari
proprietà lì e potremmo fare le cose
come fermare il flusso che dovrebbe congelare
l’acquisizione del video se approfondiamo
nel flusso un po ‘se otteniamo il video
tracce ma vedrai che possiamo vedere
uno per ciascuna delle fonti che in
questo caso è solo il built-in
fotocamera che ha un ID e un tipo e un
etichetta e così via solo una parola su
autorizzazioni se si esegue un’app WebRTC come
usando getusermedia da HTTP lo farai
solo essere chiesto la prima volta per l’accesso
al microfono della fotocamera e così via
è davvero a portata di mano, lo sai che le persone non lo fanno
ripetutamente ogni volta che usano il tuo
l’app ha chiesto ancora e ancora e ancora
può farlo anche nelle app di Chrome con
autorizzazioni di acquisizione video di acquisizione audio
qualcosa che era potenzialmente davvero
utile per il test è che è possibile eseguire
Chrome con una bandiera in modo che nessuna autorizzazione
è mai stato chiesto ovviamente questo è utile
perché non conosco le situazioni di test unitario
dove sta andando essere difficile da provare
e avere il permesso accettato così ancora
ti consente di eseguire getusermedia
senza dover ok che ogni volta e
l’interfaccia utente dà la possibilità di cambiare
impostazioni in seguito una parola di avvertimento
Continuerò a farlo
non puoi eseguire getusermedia dal tuo
file system locale questo torna a
mordimi tutto il tempo nel momento in cui tu
ottenere questo davvero sconcertante piccolo
messaggio di autorizzazione negato se si esegue
getusermedia a livello locale ci sono piani per
dare messaggi di avvertimento molto migliori ma
solo un avvertimento su questi avvertimenti
perché è quello che è quello che è un
bella domanda che sai che è molto
di API devono essere eseguiti da un server
non eseguito dal file system locale I
non so davvero che non vedo davvero il
benefici per quello, ma intendo Mike tu
potrebbe avere di più sì, Mike parlerà
a te in seguito che um sì è un
buona domanda penso che tu sappia il grande
cosa funziona con WebRTC che non è un
plug-in è che abbiamo accesso a tutti
questi conosci il tipo di ricchezza di
HTML e CSS e JavaScript in questo
esempio, abbiamo ottenuto getusermedia
video e poi le immagini da quello di
essendo plumbed in un elemento di tela poi
ogni pixel di questo viene analizzato e
da quello stiamo ottenendo arte ASCII come
come nel testo reale, che è gentile
faccia i gatti
So che le persone potrebbero avere scusa se lo hai fatto
potrebbe aver visto tutti questi ma loro ancora
li amo questo usa il localizzatore di testa
faccia a tracciare la libreria JavaScript
funzionerà oh sì ci andiamo avremmo
ottenere i media dell’utente quindi se mi muovo in giro sono
controllando il gioco con la posizione del mio
In un certo senso capisci che hai il generale
idea
Eric bidelman è un bel vecchio filtro CSS
Photobooth davvero semplice, eccoti qui
ottenendo immagini da cui proviene
getusermedia e quindi puoi solo aggiungere
I filtri CSS sono davvero semplici da fare
una specie di cose pazze e poi
non puoi sapere perché sono rotti
qui ma puoi quindi ottenere quelle immagini
e salvali solo cose semplici
con i filtri CSS la webcam giocattolo fa un po ‘
la stessa cosa ma con WebGL e
se ne diamo un’occhiata ora vedrai
cosa voglio dire che è un po ‘lo stesso
processo e sì strano tipo di delicatezza
okay, quello farà oh mio dio, è solo
orrendo
comunque se fossi davvero così nutso io
potrei condividerlo con i miei amici
solo una parola sui vincoli di nuovo tu
tu se ricordi il semplice esempio I
ha appena detto dammi il video predefinito
video qualunque sia quello che non volevo
audio perché sarebbe il feedback che conosci
ora puoi fare qualcosa di più interessante
cose con vincoli in particolare
è possibile specificarli per essere obbligatori per
getUserMedia
se il obbligatorio allora getusermedia lo farà
fare i capricci se si tratta di quel vincolo
non è soddisfatta e rifiuterà di collaborare
e non andrai da nessuna parte se lo sono
opzionale, quindi getusermedia proverà a
soddisfare tale limite ma cadrà
torna a recitare come se non avessi mai chiesto
per quello in primo luogo se se questo è
non è possibile così per questo abbiamo
cose come la risoluzione che affrontano la tua modalità
conosco la scelta delle telecamere e così via
dare un’occhiata a questo esempio di
azione in questo caso diamo un’occhiata al
il codice su github è probabilmente il migliore
posto così se guardiamo il JavaScript
per questo provate e incontrate questo
che abbiamo tre diversi vincoli
è abbastanza grande, ne abbiamo tre
diversi valori di vincoli ciascuno
specificando una dimensione diversa per il
immagine quando premiamo il pulsante a seconda
su quale pulsante si preme otteniamo a
diverso vincolo e puoi vederti
può effettivamente leggere che è il reale
la dimensione del video che stai vedendo è arrivata da
conosci la larghezza del video in altezza e noi
può ottenere in questo esempio vga QVGA
chug-chug-chug o anche più pixel come
così sì, possiamo specificare ciò che vogliamo
dalla fotocamera in quel caso, come mi piace
sul piatto ha detto il precedente
diapositive in scala e ritaglio non è stato
implementato in modo che tu sia da un fisso
insieme di valori
un altro esempio un po ‘di più
complesso qui è la capacità di usare
vincoli per selezionare nuovamente la videocamera
Ti mostrerò solo brevemente il codice
per questo su Github se guardiamo al
JavaScript lo puoi vedere quando apriamo
questa pagina se puoi vedere lì con
usando il metodo di traccia del flusso multimediale ottieni ‘
Fonti questo sta diventando un elenco di
dispositivi a cui sono connessi
questa macchina che potremmo usare come
fonte per i media e nel callback
per questo stiamo impostando quei valori
in una selezione in modo da poter selezionare il
microfono e la videocamera e quando
andiamo a chiamare il to getusermedia
ci vengono dati dei vincoli che sono basati
il valore corrente della della
selezionare quindi l’ID del microfono o
l’ID della fotocamera quindi se guardiamo
adesso vedrete che ho solo una
fonte video disponibile lì se collego
in questa pratica fotocamera e aggiornare il
pagina guardiamo vediamo che puoi vedere
Ora ho una scelta di due due telecamere
e posso tornare all’altra okay
lasciami tornare alla videocamera ora questo
davvero utile per i cellulari così io
tenterà di utilizzare questa fotocamera come un
economico e allegro tipo di wolfvision
dispositivo e ti mostra questo lavoro su
il mio telefono, quindi sto utilizzando Chrome Beta qui
a proposito se vuoi scaricare
Chrome Beta non puoi ottenerlo direttamente
dal Play Store devi andare a
browser sul tuo telefono chrome è buono e
trovalo da lì e poi puoi
installalo da un link quindi proverò
e fai questo così puoi vederlo
questo è difficile, quindi sto ricevendo utente
i media qui e puoi vedere che è
la scelta era sul davanti
fotocamera in questo caso si chiama fotocamera
uno e poi se mi trasferisco al
fotocamera posteriore è possibile vedere che
Ho un video di video di te
molto comunque ci andiamo ma ovviamente
che conosci il vero potere che c’è
per è per dispositivi mobili e una coppia
delle cose che stanno arrivando lo farai
avere la possibilità di scegliere la fonte con
In realtà ti mostrerò le specifiche con il
la modalità fronte enum è chiamata casualmente
cosa che tipo di fa la stessa cosa
ma ti consente di non dover specificare
un ID per un dispositivo, ma in generale dico io
vuoi che l’utente di fronte al dispositivo o al
dispositivo di fronte all’ambiente o sinistra o
Giusto e così via , anche noi otterremo
la possibilità di utilizzare i vincoli di applicazione
metodo che significa che puoi dinamicamente
cambiare i vincoli da JavaScript che
di nuovo sarà molto potente per fare
roba al volo, penso di nuovo tu lo sai
tornando a questa idea che il reale
il potere del robot che vedi è quando arriva
contro altri IDE AP
abbiamo la capacità di integrare il Web
Audio con con getusermedia e cosa
questo significa che puoi usare l’output
dal tuo microfono o l’input da
il tuo microfono come input per due Web
Audio in modo da utilizzare il flusso multimediale di creazione
il metodo sorgente qui che puoi vedere è
ottenere un flusso dal getusermedia
richiamata diamo un’occhiata a questo
in pratica poi sono qui dal mio collega
Chris Wilson, quindi sì, c’è la chiamata
per ottenere i media dell’utente che chiede il permesso
la roba dall’audio dal microfono è
essere alimentato in Web Audio che è quindi
analizzando quell’audio e facendo questo bello
visualizzazione della tela come
e quindi possiamo anche usare il registratore j / s su
registra quella roba così bla bla bla bla bla
e poi scaricarlo sì okay no
ho perso la mia presentazione okay
quindi di nuovo sai solo un sacco di
potenziale lì per lavorare WebRTC in
altre API con vincoli anche noi
avere la possibilità di ottenere video da altri
fonti quindi l’ovvio esempio di questo
è la cattura dello schermo, quindi abbiamo l’abilità
per impostare la fonte per essere quello che sei
vedendo sullo schermo quindi una piccola demo di
che se vengo fuori da schermo intero tu
posso vedere che devo accettare e tu sai
dare il permesso di farlo e poi se io
spostalo un po ‘ e vedrai
abbiamo la cattura dello schermo in corso
di leggermente inutile ma sì l’altro
l’ altro modo di farlo è in realtà
l’interfaccia di tabulazione in per for
Acquisizione di schede cromo per app Chrome che
ti permette di ottenere una singola scheda che è a
tutto il potenziale penso che l’abilità sia giusta
per definire una singola scheda che abbiamo appena visto
implementato in Firefox che è
fantastica l’ API di registrazione del flusso multimediale
e noi abbiamo l’intenzione di attuare tale
in cromo solo per mostrarti un po ‘
esempio di quello in esecuzione in Firefox
ogni notte, quindi quello che abbiamo qui è
getusermedia viene chiamato e in the in
la richiamata per quel registratore multimediale
l’oggetto è istanziato e quindi quello è
essenzialmente creando un blob di registrato
dati quindi se qualcuno l’ha sentito, ma quale
in questo esempio è solo che si svolge
in un elemento audio ma si potrebbe
scarica anche quello
quindi questo tu sai lo scopo di questo
Ovviamente è necessario abilitare la registrazione di
flussi audio e video, se lo sei
interessato a queste cose che potresti desiderare
guardare il
Streaming API che è una sorta di generico
concetto per lo streaming di dati che è in
il processo di essere specificato molto
la gente ha chiesto specificamente il
capacità di fare essenzialmente fotografie
e di nuovo ovviamente questo è fondamentale
app in esecuzione su dispositivi mobili bene noi
avere una specifica per questo essenzialmente ha
due metodi uno è ottenere frame che ottiene
una cornice piena di dati immagine e l’altra
metodo è scattare foto che tipo di fa
quello che dice e crea un valore di blob
di immagine a cui è possibile accedere da on
gestore di foto
quindi sì, sta arrivando in questo momento
e vale la pena guardare le specifiche così
roba è grandiosa, ma ovviamente è solo così
diventa davvero potente quando possiamo usarlo
questo per lo streaming tra colleghi così dentro
Per utilizzare la comunicazione abbiamo bisogno di questo
API e l’API è rtcpeerconnection così
rtcpeerconnection consente la connessione
tra due peer e poi fa il lavoro
di streaming di dati audio e video in modo che
concetto in questo in un certo senso è abbastanza
semplice hai un flusso multimediale su uno
lato pompa che in rtcpeerconnection
e poi si ottiene un flusso multimediale fuori
All’altra estremità naturalmente rtcpeerconnection
deve fare molto c’è molto che va
in questo rtcpeerconnection deve fare
cose come la riduzione del rumore sono simili
piccole cose come cui un duro lavoro
come la cancellazione dell’eco, come si chiama
buffering dinamico del jitter quale tipo di
ferma il singhiozzo video e il tutto
processo per consentire una comunicazione fluida
anche quando ci sono singhiozzi di ampiezza di banda
e così su questo diagramma è davvero
c’è solo per mostrarti un sacco di
cose che non devi fare
preoccuparsi come uno sviluppatore web
per fortuna WebRTC fa molto dietro il
scene ora il tipo di segreto colpevole
su WebRTC è quello nonostante sia
peer-to-peer noi
hanno ancora bisogno di server per creare app WebRTC
sai che non è possibile a questo punto
in tempo per essere fuori dal mio modo di non farlo
sapere per un apatosauro fuori nel
Internet
connettimi ai dati del mio flusso di amici con
amico mio, sì, sarebbe fantastico
non funziona così, quindi abbiamo bisogno
servizio per due cose essenzialmente noi
devono essere in grado di scambiare i metadati
tra pari in una conversazione WebRTC
questo è chiamato segnalazione e anche noi abbiamo bisogno
i server per far fronte a voi conoscono il vero
questi sono mondo di Nat e firewall
chiamato stordire e girare i server e quello
l’intero quadro che li utilizza è
chiamato ghiaccio e di nuovo è il più
dettaglio su questo l’architettura
intorno a questo che è stato lo sai
specificato nella ITF si chiama J sorso ma
il tipo di idea semplice qui è giusto
che sai che stai segnalando via
qualche meccanismo non specificato e quello allora
che può abilitare lo streaming multimediale direttamente
tra il chiamante e il callee così
ci sono questi due processi in corso
ed è un punto semplice ma è così
tipo di al centro dell’architettura
di WebRTC quindi per segnalazione dobbiamo essere
in grado di scambiare queste cose chiamate
descrizione della sessione oggetti in primo luogo noi
è necessario indossare endpoint RTC da scambiare
informazioni sui media così è come
conosci i codec che supporto e
i codec che sto per inviare
informazioni del genere ora l’altra parte
di questo è per i coetanei essere in grado di farlo
scambia le informazioni di rete quindi questo è il
tipo di IP e porta quello che un dispositivo
si può accedere da così in altre parole
quando vuoi fare una connessione con te
bisogno di contattare il peer che vuoi
comunicare e dare loro
Informazioni sulla rete in modo che possano
in realtà quindi avviare una conversazione con
tu
bene RTC deliberatamente non definisce nessuno
meccanismo di messaggistica puoi usare quello che tu
come per la segnalazione e non c’è
protocollo di messaggistica per sparare
e sia e il pensiero dietro
questo è che queste cose sono cambiate
persone diverse hanno opinioni diverse
in modo che ciò non debba essere
il web RTC sputa le specifiche web RTC di
anche la segnalazione di rotta può essere utilizzata
scambiare i dati delle applicazioni così quando si
sai che gli utenti stanno iniziando con il
processo di inizializzazione della tua app quindi
possono scambiare dati usando lo stesso
segnalazione di setup così come faremo a
fai questo bene il tipo di parte principale
di questo è ovviamente quella segnalazione
ha bisogno di essere bidirezionale, quindi se tu
immagina come Fred vuole chiamare Wilma
ben intenzione di Fred deve andare oltre un
segnalazione server e amico fred è
intenzione di dover scambiare messaggi
con il server di segnalazione per iniziare
e poi quando Wilma viene coinvolto
ci saranno messaggi in corso
segnalazione di messaggi che vanno da Fred via
il server di segnalazione a Wilma e poi
da Wilma tramite il servizio di segnalazione
di nuovo a Fred, ora, naturalmente, tu
sapere con HTTP quel tipo di richiesta
modello di risposta questo in passato forse
è stato un po ‘complicato sai che potresti
fai questo ripetendo sondaggi come quello di Fred
L’app WebRTC potrebbe continuare a chiedere il
servizio di segnalazione hai un messaggio
da Wilma hai un buon messaggio
da Wilma sai che sarebbe questo
inefficiente e ovviamente non sta andando
ridimensionare anche se in pratica
e ho visto app in cui sei tu
lo sai con un po ‘ di ottimizzazione
questo può effettivamente funzionare un altro
l’alternativa è fare lunghi sondaggi
conosci la cometa come la chiami tu
per consentire una sorta di falso bidirezionale
comunicazione con il server questo è
effettivamente utilizzato da Google App Engine
l’API del canale con alcuni dei
esempi che ho mostrato che potresti effettivamente usare
Ajax xhr e sorgenti di eventi di origine evento
l’ API per abilitare ciò che viene chiamato
il server ha inviato eventi così per un server a
mantenere una connessione con un’app Web e
mandarti sapere i dati push dal server
all’app Web c’è una demo
Là
se vuoi dare un’occhiata a
azione forse una soluzione più naturale
è WebSocket che è ovviamente
intrinsecamente bidirezionale e tu sai
questo è supportato da tutti i browser
che supporta WebRTC desktop e mobile
e ovviamente puoi usare TLS con
WebSocket che è sicuro ed evita
alcuni problemi di proxy e così via se tu
voglia di saperne di più su che avevo
raccomandare a guardare sai garrix
capitolo su WebRTC che è giusto
uscendo e sì Peter Lee Peter
roba di lubbers ci sta benissimo
In realtà ho creato un laboratorio di codice per questo
se vuoi provare a costruire un
server di segnalazione utilizza IO socket
correndo sul nodo, certo che conosci il
l’unica presa con questo è che tu
bisogno di avere un server che esegue il nodo e
la ratata ovvio che è che un sacco di
servizi di hosting economici ti supportano
conosci PHP o qualsiasi altra cosa per quelli
situazioni che potresti usare degli isolatori a
char o qualsiasi altra cosa, ma se si desidera avere
uno sguardo a questo mi sento di raccomandare questo
perché è molto semplice con il socket IO
usare il socket IO per scambiare messaggi
e se guardiamo il codice del codice di laboratorio
effetto lo vedrai e questo è giusto
la parte di segnalazione non c’è web RTC in
questo ma puoi vedere che lo sai
questo è il codice per il server che è
è piuttosto semplice e se guardiamo
anche al codice cliente per questa app
è davvero molto semplice da fare
costruisci sapere costruire un servizio di segnalazione
in esecuzione su un nodo con socket
IO e c’è anche un esempio dal vivo
se vuoi dare un’occhiata a questo
correndo lì solo per un paio di
i trucchi ci vanno nei dettagli ma
solo una cosa da ricordare se lo fai
costruisci un servizio di segnalazione che conosci
la segnalazione intrinseca non è alta
larghezza di banda questi sono piccoli messaggi
scambiato per lo più all’inizio di a
Chiamata WebRTC ma sapete, naturalmente, se
hai un sacco di utenti allora
il carico può ancora essere molto pesante su on
un server di segnalazione
così quando gli oggetti rtcpeerconnection sono
inizializzati devono fare un paio di
cose che prima devono accertare
condizioni dei media locali quindi questo è il
roba di cui stavo parlando
capacità di codec di risoluzione e così via
e la seconda cosa che devono fare è
è farti conoscere questi potenziali questi
indirizzi di rete che potenzialmente il
il collega può usare per contattarli
queste sono queste cose chiamate candidati
così i media elaborano il processo per
lo scambio di metadati multimediali funziona un po ‘
così così ancora è come immaginare
Fred sta chiamando Wilma Fred chiama il
rtcpeerconnection crea metodi di offerta
e questo dà una parte della sessione SDP
descrizione dei dati del protocollo che vende
roba sulle condizioni dei media locali Fred
quindi lo imposta come descrizione locale
a questo punto dal modo in cui puoi modificare
roba con i codec e così via
perché questo processo può essere fatto manualmente
e dopo che Fred l’ha stabilito come suo locale
Descrizione egli può quindi inviare che
serializzare tali dati inviarlo a Wilma
Wilma fa la stessa cosa dentro
Reverse, ma la risposta è così
si dispone di questo processo offerta risposta fred
creando metadati multimediali impostandolo
localmente inviandolo a Wilma Wilma
creando i suoi metadati multimediali locali
impostazione che lo invia a livello locale
Fred e poi entrambi hanno quello che è
chiamato una descrizione remota c’è a
tipo di processo simile che accade
all’incirca nello stesso tempo di trovare la rete
informazioni in modo che il modo in cui funziona è
che Fred e Wilma creano il loro
oggetti rtcpeerconnection se questo è
successo con gli eventi Ice Candidate
inizia a diffondersi e in un bello
evento candidato puoi ottenere queste cose
chiamati candidati quali informazioni
di come questo pilastro può essere contattato in
altre parole un IP esterno e una porta di
quale il dispositivo host per quell’app
può essere contattato così Fred e Wilma entrambi
prendi questi candidati e poi loro
iniziare a spararsi l’un l’altro e quando
li ricevono che tu avresti usato aggiungere
candidato ghiacciato a fornire tali informazioni
a rtcpeerconnection in questo modo lo sono
scambiare informazioni sulla rete in ordine
per essere in grado di impostare il nucleo questo è
che cosa appare una descrizione della sessione RTC
così è questo sono i metadati dei media
l’offerta risponde parte di questo è il
tipo di cose che vengono inviate se
vuoi sapere cosa sono tutte queste cose
significa e i dati effettivi sono molto più lunghi
di questo
controlla gli esempi ITF con i dettagli
spiegazioni e questo è un esempio di a
offerta candidata scusa un oggetto candidato
quindi il candidato qui i dati il
bit che vedi i valori candidati
lì ho aggiunto questo su localizzato ma questo
è stato ottenuto dall’evento candidato sul ghiaccio
e tu mandi un gruppo di questi candidati
oggetti alla persona che stai cercando
comunicare con così possono provare e
fai una connessione con te se vuoi
per vedere tutto questo in stampa
in azione non ti mostrerò ora ma il
è davvero un grande esempio sul w3c
lato ha l’intero processo di peer
connessione con con segnalazione solo a
mostra una sorta di demo di SDP in questo modo
è un po ‘caldo dalla stampa leggermente
ruvido così in questo esempio che stiamo ottenendo
media locali e poi creerò un peer
oggetto di connessione e quindi creerò
un’offerta e quindi potresti vedere che è
questo è un intero pezzo di SDP per un
offerta e potrei effettivamente modificarlo se
Volevo farlo è un po ‘come modificare il codec
valori e così via quindi dovrò quindi impostare tale
fuori come l’offerta locale
sarà passato all’altro questo è
tipo di sciocco perché è due peer
oggetti di connessione in una pagina ma tu
so che hai un’idea e poi possiamo
creare la risposta che è gentile
simile ma dall’altra parte lo imposta
rispondi e poi abbiamo un pari
collegamento qualcosa che è appena stato
implementato che secondo me è
davvero potente
è questa idea di poter usare il
uscita da una rtcpeerconnection come
flusso multimediale da una connessione RCP come
l’input per un altro ora il motivo
questo è interessante è che ci dà
la possibilità per un’app Web di scegliere come
per inoltrare un flusso ad un altro PA così dentro
questo di nuovo è tutto in una pagina, quindi è così
un po ‘inutile, ma inizierò
ottenere alcuni media e poi è
visualizzandolo in un elemento video
Chiamerò così per questo secondo
oggetto di peerconnection e quindi è
passando attraverso un sacco di altri
oggetti di peerconnection a questo finale
oggetto di peerconnection e quindi riproduzione
che i media si diffondono in un altro video
elemento in modo che consenta alle app Web di scegliere
come inoltrano i flussi a un altro peer
se vuoi guardare la connessione peer
capisci questo è un bene
luogo per iniziare
questa è la connessione peer senza nessuno
segnalando che è circa un centinaio di righe
i codici mostrano l’intero processo in azione
se vuoi una specie di video pieno di grassi
chat app questo è il tipo di canonico
app di chat google con un sacco di registrazione
la console molto buona per se tu sei
cercando di elaborare il tipo di processi
la sequenza di eventi come ho detto noi
hanno anche la capacità di WebRTC per
comunicare dati arbitrari e tu sai
Penso che questo sia ciò che penso per molto
la gente in realtà questo è uno dei più
ci sono parti potenti del progetto
alcuni tipi di casi d’uso ovvi quindi tu
immagina due come due persone che giocano a
gioco e hanno bisogno di comunicare
dati arbitrari come questo che è
in realtà è completamente falsificato ma ottieni
l’idea generale così potresti essere
comunicare le posizioni dei giocatori con
un altro giocatore e deve farlo
quello con la latenza più bassa possibile
API se il canale dati rtcdatachannel è
molto simile deliberatamente a WebSocket
ma ovviamente il punto sui dati
canale è che vanno, sai che sei
scambiando direttamente dati arbitrari
tra pari non devi andare
attraverso
un server WebSocket intermedio che puoi
opzionalmente scegli questo
trasporto di comunicazione per essere affidabile
o inaffidabile ciò che significa è che se
tu dici che la comunicazione deve essere
affidabile quindi quello che stai dicendo è questo
deve fallire a meno che ogni pacchetto sia
consegnato e ovviamente lo farai
ne ho bisogno per cose come non lo so
condivisione di file qualunque se si dice che
sei contento di prestazioni migliori ma
può essere inaffidabile allora quel tipo di I
non so che va bene per cose come
si scambia la posizione del giocatore di gioco
cose che in realtà non dobbiamo ottenere
ogni pezzo di dati affidabile affidabile
il trasporto è stato implementato SCTP in
firefox per un po ‘di tempo e ora in chrome
31 e chrome 30 dietro una bandiera che è
bene, sì, l’API ha questo aspetto
come puoi vedere è una bella
tipo diretto di aggiunta al pari
connessione per specificare che si desidera
usa un canale dati e poi quando arrivi
il canale dati che puoi configurare
canale per gestire la messaggistica molto simile
con WebSocket ancora una volta molto semplice
attraverso un esempio di pagina di farlo
se vuoi dare un’occhiata a come i dati
canale funziona un po ‘più eccitante
demo penso che sia la prima app di condivisione questo
ti permette di condividere file usando
rtcdatachannel quindi sceglierò questo è un
foto del mio pub locale in Tooting in
Londra da cui stiamo cercando di salvare
in fase di sviluppo, quindi l’ ho specificato
come il file che voglio condividere tramite
rtcdatachannel e poi ho solo bisogno di
passare a qualcuno un URL per quello che è
qui quindi devi far finta che sia acceso
un’altra macchina ma ottieni il generale
idea
quindi sì, ho appena comunicato
con me questa questa fotografia ma tu
posso immaginare che questo sia molto
potente
la capacità di a per condividere file
senza una specie di file intermedio
servizio così come ho detto che sai in un
mondo perfetto tutto sarebbe come questo
faremmo semplicemente questa comunicazione
direttamente tra pari, ovviamente nel
nel mondo reale abbiamo Nat e firewall
abbiamo bisogno di essere in grado di far fronte a tale in
per stabilire lo streaming tra
colleghi, quindi abbiamo questo ben consolidato
in realtà la tecnologia per questo chiamato stordire
un server stordente ha un compito davvero semplice
che è solo per quando viene fatta una richiesta
per rispondere con un IP pubblico e una porta
che il dispositivo richiedente può essere
contattato da così è sai che è
è un server semplice che non fa molto
è una specie di relativamente a buon mercato per correre
e sì è un po ‘come funziona
lo sai che il server Sun vive
la su internet pubblica al di fuori del
firewall se fallisce ne abbiamo un altro
metodo che è quello di utilizzare un server di turno
turn server è essenzialmente un relay
server di nuovo questo è vivere
l’ Internet pubblica e l’idea di questo
è questo se a causa di firewall complessi
e questo è e così via diretto peer-to-peer
la comunicazione fallisce, possiamo passare attraverso questo
relay server ha chiamato il server di turn ora
il lato negativo di questo è ovviamente quello
essenzialmente quei server di turno sono
trasmettere tutti i dati di streaming in modo che il
non devono essere particolarmente intelligenti
ma hanno a che fare con molti
larghezze di banda in modo che il costo di questo ci
se guardi l’ app dell’app RTC I
detto questo è il valore che è
passato nel rctp economico
rtcpeerconnection oggetto per specificare il
stordire e girare i server con alcuni
i dettagli di accesso lì è facoltativo da usare
stordire e girare, ma questo è il tipo di
cosa faresti se vuoi usarlo
quei server
la struttura che viene utilizzata dagli artisti
apparire collegamento a lavorare con questi
le tecnologie si chiamano ghiaccio, quindi lo sai
se il tipo di trade-off qui è
quello stordimento è ovviamente economico perché tutto
stai facendo sta ottenendo un IP esterno
la porta per un turno di dispositivo è un po ‘come funziona
in ogni caso, ma è più costoso
ed è meno efficiente il ghiaccio funziona con a
tutta la lista di candidati che conosci
Ho mostrato prima sono passati
tra pari, il ghiaccio funziona con quella lista
di candidati per trovare il percorso ottimale
e in effetti conosci la maggior parte di
le chiamate tra colleghi funzioneranno effettivamente
direttamente peer-to-peer con il
aiuto di stordire è, voglio dire che è
intorno a queste statistiche attorno al tipo di
tipo di sei su sette funzionano bene
in questo modo è leggermente meno tra
chiamate business to business se lo si desidera
per far funzionare un server stordente ce ne sono alcuni
opzioni Google ha una prova ma tu
può usare per il test e ci sono aperti
implementazioni di sorgenti RFC 576 sei
stordito scusa si trasforma e c’è una VM
immagine disponibile per questo per Amazon Web
I servizi hanno solo una breve spiegazione
sicurezza molte persone chiedono questo
è una specie di core per il progetto WebRTC
sai che abbiamo la crittografia obbligatoria
tutti i componenti di WebRTC e di
Certo che ti ho mostrato che abbiamo l’interfaccia utente
interazioni pensate per essere al sicuro
optare esplicitamente per
partecipare a una chiamata WebRTC e io
pensa che se tu lo sai di più
aspetto sicuro di questo è ovviamente il
WebRTC è integrato nel browser, quindi è così
sandbox non ci sono plugin, no
processo di aggiornamento separato non c’è modo
per tipo di persone del trucco in
installazione di extra quindi abbiamo sì questi
percorsi sicuri che dovrebbero effettivamente dire
TLS piuttosto che HTTP perché potresti
lavorare con
websocket ma tutto è al sicuro
quelli Pro lo sai criptato in quelli
processi solo per ripetere se quando
stai costruendo segnali che devi usare
TLS altrimenti se stai segnalando è
incline a sapere di essere stato intercettato
ovviamente non criptato che si apre
un sacco di potenziale per tipo di uomo nel
roba di mezzo di reindirizzamento delle chiamate e così via
per intercettare il personale, magari iniettando
roba e così via quindi è davvero cruciale
con la segnalazione quando si implementa che
per usare protocolli sicuri così abbiamo dentro
il caso semplice si sa connessione con
WebRTC tra due diversi dispositivi noi
potrebbe in realtà e questo funziona per molti
di app WebRTC la capacità solo per
creare più oggetti rtcpeerconnection
e usare quelli per connettere molti
dispositivi tra loro in diversi tipi
di configurazioni ora questo non scala
ovviamente e il tipo di robusto
rispondere a questo è usare qualcosa
chiamato un’unità di controllo multipunto
questi sono server appositamente progettati
gestire i media per abilitare un po ‘di intelligenza
anche roba da fare con i media in arrivo
con diversi codec e risoluzioni
e così via e essere in grado di fare una specie di
distribuzione efficiente di tali media
tra molti e molti colleghi, quindi WebRTC
è stato progettato per questo tipo di
diverse topologie ma anche a
abilitare la comunicazione con l’esterno
mondo
quindi in particolare pensando al telefono
sistema questa una pila di cose che è
stato implementato per abilitare web RTC a
lavorare con i client sip è come un video
over right voice over IP e video
sistemi di conferenza e anche alcuni sì
qualche telefono cellulare dal telefono fuori è
tipo di integrato con jQuery e il
xing gaia embeddable proprio controllo del widget
che fuori per la connessione a PSTN PSN è come
il
semplice vecchia rete telefonica davvero carina
cosa scusa, continuo a portarlo ogni
tempo che parlo , mostrerò questi ragazzi
da voxi proprio troppo hanno fatto questo io
pensano a Burning Man quest’anno hanno fatto
lo hanno impostato per noi su Google i / oa
un paio di anni fa hanno costruito
la propria rete mobile utilizzando l’open
Rete cellulare open source BTS e cosa
ciò significava che si erano incorporati
che con il loro gateway per WebRTC
che potresti farti fare il telefono
chiama da qualsiasi vecchio telefono attraverso
il loro gateway attraverso il loro BTS aperto
vendere a un’app WebRTC in esecuzione su a
computer che per me è fantastico per te
so che questa è la telefonia senza un corriere
e questo lo sai davvero
utile in situazioni in cui non c’è
infrastrutture o infrastruttura è
stato danneggiato così un sacco di potenziale di
quella roba
solo un veloce puntatore ad alcuni strumenti
per aiutarti a creare app WebRTC chrome
ha una pagina interna WebRTC che dà
pile e pile di statistiche e così via
su quello che succede con la vostra con
le tue connessioni WebRTC e puoi
scarica tutto e guarda
davvero carino quando tu quando sei
cercando di capirci qualcosa
in procinto di vedere per essere in grado di guardare a tutti
i dati di segnalazione da lì un altro
è uno spessore JavaScript mantenuto da
Google ha adattato la tua specie di abstract
via alcune delle differenze nei prefissi
e così via le specifiche tecniche sono piuttosto stabili
ora ma ti ha permesso di usare lo stesso
gli stessi termini senza dover cambiare
che ogni volta c’è un cambiamento se tutto
questo è troppo, quindi consiglio questi
Strutture JavaScript sono una pila di
buone strutture JavaScript mature per
creare app Web RTC senza dover
andare in tutto il processo di roba che ero
parlando di li ho qui
in realtà ma ci sono anche questi semplici
web RTC ha un server di segnalazione – chiamato
master single sign così semplice con RTC
è molto semplice per
è davvero facile creare un’app con a
poche righe di codice
allo stesso modo PJs fa lo stesso per i dati
canale solo sì tipo di dieci righe di
JavaScript se non vuoi scrivere
qualsiasi codice ci sono molti
servizi completi ora sul web aperti
parlare la linea V e altri asterisco e così via
sopra
abilitare le chiamate WebRTC senza fare nulla
lavorare per implementare qualsiasi cosa e di
Naturalmente il vecchio codice C ++ è anche lì
se vuoi dare un’occhiata al
pacchetto che puoi controllare se tu
vuoi maggiori informazioni su WebRTC I
mantenere una lista che è in cima
c’è qual è il tipo di tutte le cose che io
conoscere e avere sentito parlare e ottenere
alcuni contributi anche a questo e
si, consiglio di dare un’occhiata al
Presentazione I / O di Google che Justin a
Bertie e ho fatto quest’anno un sacco di bene
roba lì un sacco di modi per contattare
WebRTC persone il forum principale per
discussione tecnica è discutere WebRTC
il gruppo di Google e una pila di nuovi
roba viene sempre pubblicata su Google+
più WebRTC e lo sai davvero
benvenute, ovviamente, le persone sono una caratteristica
richieste e segnalazioni di bug quindi tienili
arrivando su Co bug comm slash new e yeah
So cosa mi interessa
cosa fanno gli sviluppatori web con il tipo WebRTC
di fuori dei mondi al di là dei mondi
di tipo di telefonia e video
conferenza e tutto ciò così sono davvero
interessato a vedere cosa piacciono alla gente
sai che in questa stanza farà con
queste API sono volevo solo finire
in realtà facendo qualche chat WebRTC se
chiunque ha un browser se lo desidera
vai a questa pagina è torquey punto io / go
web RTC Vedrò solo se potremmo avere un
video chat tra chiunque si presenti e
la terra funzionerà se qualcuno ha un
Mi limiterò a mostrare di nuovo l’URL , quindi se
chiunque voglia aderire a questo vedremo se
possiamo ottenere la gente su questo è esso andando
lavoro forse non vogliamo due diversi
le reti qui ora eccoci
ciao a chiunque tu sia dispiaciuto, penso
questo è tutto
abbiamo qualcun altro questo è bello e
questo è un tipo di metodo di forza bruta tu
so che molte sono le connessioni TCP
è geniale
Riconosco quel tipo, okay, comunque
meglio finire come dico le diapositive
sono online su go web RTC appspot.com
e sì vi ringrazio tanto ho un
un paio di minuti che non so di prendere
alcune domande
Non so se verrò consegnato a
trova con domande o non ancora ok lo farò
prova a rispondere a questo e su Firefox
e cioè bene abbiamo il supporto per
Firefox che è fantastico
Ovviamente, ha avuto pieno supporto con
WebRTC tramite Chrome Frame ma certamente
non in futuro io non ne conosciamo alcuni
le persone potrebbero aver visto questo WebRTC dell’UE
proposta che penso che tu sappia molto
di commenti sul RTC web esistente
proposta quindi penso che sia molto avvincente
quando abbiamo WebRTC su una volta sappiamo
iniziare ad avere endpoint WebRTC simili
miliardi di loro diventa molto
convincente per IE
e Safari e così via, vedremo dove
quello va
come se non avesse senso includere
la consapevolezza della posizione in WebRTC che è
davvero interessante sì sicuramente posso
pensa a molti casi d’uso per questo
questo è un vero punto di persone
essere fuori dalle persone di contatto chi sei
sapere cercando forse di rispondere alle domande
e così via nelle vicinanze del prossimo
la domanda è a cosa serve il codec
inviando i dati sul perché è così
possibile controllare la larghezza di banda o
sintonizzazione automatica in base alla disponibilità
risorse sì tipo di voi è possibile modificare il
lo sdp che hai impostato come locale
descrizione e invia al tuo collie che
quindi usano come descrizione remota
così puoi modificare quella roba e il
i codec che usi sai cosa sono
implementato dall’app per Chrome
abbiamo conosciuto il vp8 e un novizio ma
puoi modificare i dettagli per quello sì
se hai bisogno di maggiori informazioni su di loro
e vai al gruppo di discussione WebRTC se
hai bisogno di cose più specifiche su questo
può RTC gestire NAT carrier-grade cgn
dove i singoli clienti
dietro più strati di rete sì
questa è una buona domanda anche a te
sappi che i miei piccoli diagrammi mostrano gentilezza
di un piccolo moscerino ed è tutto molto
semplice ma nel mondo reale è più
complesso di quello che si può avere firewall
e moscerini dietro i moscerini e così via e così via
sopra
dipende che non sono molto esperto
questo ma tu sai che dipende da
dipende dal server di stordimento ma
ovviamente questo può essere un problema e questo
è dove abbiamo i server di turno per fornire
un fallback tristemente per quella complessità
che ovviamente ci coinvolge particolarmente
le aziende che gestiscono proprio questi
complesso e potenzialmente lo sai
configurazioni di rete a volte obsolete ma
sì è complicato e io no
ho davvero una buona risposta per come possiamo
sai sviluppare stordire per far fronte
con questi immagino sempre più complesso
configurazioni di gnat ah ora questo è grande qualsiasi
pensieri su p2p CDN via WebRTC intendevo
per mostrare ciò, i possibili utenti sono preoccupati
per quanto riguarda la larghezza di banda, penso che questo sia davvero
area interessante quindi l’idea è che tu
non limitarti a condividere file come il
roba che ho mostrato con condividi prima ma tu
fare qualcosa di simile a quello che non so se
Qualcuno ha visto tra pari CDN i ragazzi sono
chiamato pr5 hanno implementato questa roba
ed è un concetto davvero interessante
è è una specie di file peer-to-peer
condividendo così lo sai concettualmente
l’idea è che tu saresti in grado di ottenere
attività non predefinite da un server ma
di default da qualche altro peer che tu
so che si spera, naturalmente, è vicino
sei in rete, ora sai in un certo senso
questo è esattamente il tipo di cosa che
possiamo vedere con questo canale dati ITC
possibilità di lavorare con file o blocchi
di file potrebbe essere il tipo di p2p
il sogno si avvera ovviamente il grande
è sconosciuto come funzionerà in Prak
e non ho una risposta a questo bene
si sa come efficienti che possono essere
se questo può funzionare bene come quello
funziona con larghezze di banda che conosci come qualsiasi
sistema peer-to-peer se si è improvvisamente
lavorando come redistributore di contenuti
sai che non sappiamo come sarebbe
lavorare se tutti iniziano se tutti
iniziato a utilizzare il peer CDN e avviato
distribuzione di contenuti peer-to-peer tramite
via WebRTC quindi non conosco la risposta
quello ma è che penso molto
area interessante peer-to-peer
condivisione di file e distribuzione solo fob
in realtà CDN esegue peer-to-peer
piuttosto che da questo tipo di
configurazioni di servizio monolitiche penso che sia così
l’ultima domanda se qualcuno ha di più
domande sarò in giro oggi e
domani quindi sentiti libero di venire e
parlami o mandami una e- mail
Dutton su google.com quindi grazie mille
tanto
andato 10 – sì la mia prima volta che va –
la prima volta in Danimarca è bello essere
qui il sole splende
comunque io lavoro per Google sono uno sviluppatore
difendere il mio nome è Sam Dutton su
Twitter Sono in realtà SW 12 Sam DUP e
su Twitter è qualcuno completamente
diverso così ho intenzione sorto onna I
credo che a quanto pare sia appena stato morso da
una vespa comunque sul serio se vuoi
seguire con queste diapositive lì a
vai app WebRTC calmo se davvero
ossessionato c’è un repository github che conosci
patch e problemi tutto questo davvero
benvenuto, naturalmente sto andando a parlare
su WebRTC ho intenzione di parlare di come
puoi creare un’applicazione web RTC, ma mi piacerebbe
iniziare dando una specie di a
un po ‘ di contesto per il progetto così tu
sapere WebRTC è una collaborazione come
Robert ha detto di portare in tempo reale
comunicazione al browser come a
il mio collega Serge Lesha Pearl ha detto
sai che la comunicazione umana dovrebbe essere
come naturale in un’app Web come l’immissione di testo
in una casella di testo è come se ne conoscessi una
l’ultimo può essere uno degli ultimi
pezzi mancanti nel browser in modo che il
i valori fondamentali del progetto sono stati
che deve essere tutti i componenti devono
essere open-source e che deve essere gratuito
per gli sviluppatori di implementare app WebRTC
e gratuito per gli utenti e ovviamente al
il cuore di questo è video e audio
comunicazione ma anche capacità di
comunicare dati arbitrari tra fine
utenti di app WebRTC e questo deve
essere in grado di accedere che conosci il
streaming video audio di altissima qualità
ma per farlo in modo che fosse basso
costo per le persone di implementare queste app
e come si è scoperto tu conosci il tipo
di base di questo è stato che WebRTC
funzionerebbe peer-to-peer tradizionale reale
app di comunicazioni temporali e questo molto
diagramma molto più semplice
di impresa difficile da implementare ma
anche tu sai andare via di tipo
sistemi secondari il tipo di visione di
WebRTC è questo diagramma con un bianco
nuvola soffice nel mezzo ma lo sai
il punto qui è abilitare il peer-to-peer
comunicazione come vedremo sono le cose
mai così semplice ma questo è il nocciolo di
questo per permetterti di conoscere dati e audio
e lo streaming video tra colleghi
direttamente così per realizzare questo il
Il progetto WebRTC doveva fare un certo numero di
cose che dovevano definire
protocolli e definire i protocolli che
sarebbe utilizzato dal progetto nell’ITF
e quindi per costruire standard di specifiche con
il w3c quindi abbiamo la bozza WebRTC e
media capture e streaming e così via e
quindi fare questa roba in una specie di a
la parte veramente difficile è costruirli
cose nel browser, quindi avevamo bisogno
davvero buoni media e comunicazioni
impila solo una parola sul jingle perché
questo è un po ‘ al centro di molti
il jingle di lavoro WebRTC è un’estensione
a XMPP per abilitare audio come voce e
video con chat e jingle Lib è un C ++
libreria sviluppata da Google per implementare
quello e il tipo di parti di trasporto di rete
di questo sono al centro di WebRTC e
si sente un sacco di roba su Live
jingle se lo fai un po ‘di approfondimento
in esso WebRTC che abbiamo visto in parallelo
lo sviluppo di alta qualità aperta
source codec vp8 e AAPI e così via
e l’obiettivo, naturalmente, è che questo sia
costruendo sai un nuovo tipo di
ecosistema di comunicazione un nuovo modo di
comunicare così dove siamo dove siamo
ora abbiamo implementato l’API WebRTC
su Chrome e Chrome per Android Firefox
e ora Firefox per Android che è
la grande opera ha detto che lo saranno
implementazione su desktop e per dispositivi mobili
l’opera, naturalmente, si è trasferita
sbattere le palpebre e ora siamo nativi
collegamenti per WebRTC in Java e molti altri
recentemente per iOS in Objective C um one
cosa a cui semplicemente piaceva
io come uno sviluppatore QT carino con
appena QT il progetto ha appena annunciato
che useranno il cromo e
ciò significa che le app sono state costruite con
il simpatico quadro che conosci incorporato
dispositivi un sacco di potenziale multipiattaforma
avrà tutte queste cose come hanno detto
lavorando fuori dalla scatola per me è così
davvero eccitante quindi abbiamo al momento
qualcosa come ben oltre un miliardo
Endpoint WebRTC molto più previsti
per il prossimo futuro sulla prossima coppia
di anni quindi sai che questo sarà il
fine della telefonia come sappiamo che il tempo sarà
dillo ma penso che tu sappia solo
guardando il tipo di applicazioni
ne abbiamo visto di recente ce ne sono alcuni davvero
roba interessante già in arrivo
abbiamo appena fatto la prima intervista TV
via WebRTC questo era a Londra pochi
settimane fa fatto da Sky nei vecchi tempi a
fai questo lo sai che ti serve tutto questo
kit tutte queste persone che ti servivano
questi camion OB e lo staff con cui andare
loro e lo hanno fatto con una macchina fotografica
mi piace esattamente come quello che ho qui
e uno di questi microfoni Yeti che sono io
Non conosco centinaia di euro quindi è per me
è che conosci un potenziale fantastico lì
quindi questo è un po ‘il tipo di
la visione di WebRTC ma solo tu lo sai
pensando a cosa dobbiamo costruire
comunicazione in tempo reale quindi al centro I
Immagino che la comunicazione in tempo reale sia la
possibilità di accedere a voce e video e a
comunica che sai di pensare
telefonia e video chat e così via e
questo è un tipo di caso d’uso principale per
WebRTC e per questo abbiamo bisogno di cui abbiamo bisogno
realizzare tre tipi di cose così
in primo luogo dobbiamo essere in grado di ottenere
l’audio e il video abbiamo bisogno di un modo per ottenere
sai cose dal tuo microfono e dal tuo
fotocamera e in secondo luogo abbiamo bisogno di essere in grado
per comunicare quei dati e questo si trasforma
rivela essere, naturalmente, non lo sai
molto complesso e la terza parte è questa
capacità di comunicare dati arbitrari
altri tipi di dati, nonché audio e
video quindi per questo abbiamo tre principali
API JavaScript abbiamo il flusso multimediale
più noto penso alla maggior parte delle persone da
ottenere i media utente un modo per ottenere l’accesso
a audio e video locali dal tuo microfono
e fotocamera e abbiamo rtcpeerconnection
che è l’ API per stabilire
connessioni e comunicazione tra
colleghi che ricevo la vendita dei dati è una specie di
parte di questo, ma questa è l’API per
Comunicando dati arbitrari parlerò
su questa roba più tardi in modo tale flusso di media
questo è il termine astrazione
di streaming media possiamo ottenere un media
flusso usando il Navigator getusermedia
il ministero dei metodi rappresenta come a
un’unica sorgente di streaming sincronizzata
i dati e ogni flusso multimediale possono avere
più tracce di streaming multimediale ciascuna di
quelli che rappresentano audio o video e noi
prendi uno come dico usando getusermedia
e puoi vedere nell’esempio qui in
lo schema che abbiamo effettivamente ottenuto
scomposto un gradino più in là dove un
la traccia audio del flusso multimediale è a sinistra
canale e un canale giusto e tu puoi
immagina varianti su quel tema navigato
getusermedia accetta tre argomenti
primo di questi è abbastanza interessante
ma in questo esempio è molto semplice
può vedere l’oggetto vincoli al
laggiù tutto quello che sto dicendo qui è prendermi
il video non mi interessa da dove viene
solo il dispositivo predefinito è tutto ciò che ho
voglio che il video non sia audio nient’altro e
allora puoi vedere nella callback di successo
che è passato uno stream stream stream
e quindi in questo esempio un semplice
esempio lo stiamo impostando come
come la fonte di un elemento video
vediamo che in azione ora
quindi noti quando ho aperto questa pagina
questo è in esecuzione getusermedia se tu
non l’ho visto prima che lo stia permettendo
accesso alla mia macchina fotografica e, si spera
trovandone lì andiamo un po ‘di video
arrivando da lì se solo guardiamo
il codice quando lo rileviamo un po ‘
puoi vederlo se guardiamo al flusso
oggetto qui puoi vedere che ne ho vari
proprietà lì e potremmo fare le cose
come fermare il flusso che dovrebbe congelare
l’acquisizione del video se approfondiamo
nel flusso un po ‘se otteniamo il video
tracce ma vedrai che possiamo vedere
uno per ciascuna delle fonti che in
questo caso è solo il built-in
fotocamera che ha un ID e un tipo e un
etichetta e così via solo una parola su
autorizzazioni se si esegue un’app WebRTC come
usando getusermedia da HTTP lo farai
solo essere chiesto la prima volta per l’accesso
al microfono della fotocamera e così via
è davvero a portata di mano, lo sai che le persone non lo fanno
ripetutamente ogni volta che usano il tuo
l’app ha chiesto ancora e ancora e ancora
può farlo anche nelle app di Chrome con
autorizzazioni di acquisizione video di acquisizione audio
qualcosa che era potenzialmente davvero
utile per il test è che è possibile eseguire
Chrome con una bandiera in modo che nessuna autorizzazione
è mai stato chiesto ovviamente questo è utile
perché non conosco le situazioni di test unitario
dove sta andando essere difficile da provare
e avere il permesso accettato così ancora
ti consente di eseguire getusermedia
senza dover ok che ogni volta e
l’interfaccia utente dà la possibilità di cambiare
impostazioni in seguito una parola di avvertimento
Continuerò a farlo
non puoi eseguire getusermedia dal tuo
file system locale questo torna a
mordimi tutto il tempo nel momento in cui tu
ottenere questo davvero sconcertante piccolo
messaggio di autorizzazione negato se si esegue
getusermedia a livello locale ci sono piani per
dare messaggi di avvertimento molto migliori ma
solo un avvertimento su questi avvertimenti
perché è quello che è quello che è un
bella domanda che sai che è molto
di API devono essere eseguiti da un server
non eseguito dal file system locale I
non so davvero che non vedo davvero il
benefici per quello, ma intendo Mike tu
potrebbe avere di più sì, Mike parlerà
a te in seguito che um sì è un
buona domanda penso che tu sappia il grande
cosa funziona con WebRTC che non è un
plug-in è che abbiamo accesso a tutti
questi conosci il tipo di ricchezza di
HTML e CSS e JavaScript in questo
esempio, abbiamo ottenuto getusermedia
video e poi le immagini da quello di
essendo plumbed in un elemento di tela poi
ogni pixel di questo viene analizzato e
da quello stiamo ottenendo arte ASCII come
come nel testo reale, che è gentile
faccia i gatti
So che le persone potrebbero avere scusa se lo hai fatto
potrebbe aver visto tutti questi ma loro ancora
li amo questo usa il localizzatore di testa
faccia a tracciare la libreria JavaScript
funzionerà oh sì ci andiamo avremmo
ottenere i media dell’utente quindi se mi muovo in giro sono
controllando il gioco con la posizione del mio
In un certo senso capisci che hai il generale
idea
Eric bidelman è un bel vecchio filtro CSS
Photobooth davvero semplice, eccoti qui
ottenendo immagini da cui proviene
getusermedia e quindi puoi solo aggiungere
I filtri CSS sono davvero semplici da fare
una specie di cose pazze e poi
non puoi sapere perché sono rotti
qui ma puoi quindi ottenere quelle immagini
e salvali solo cose semplici
con i filtri CSS la webcam giocattolo fa un po ‘
la stessa cosa ma con WebGL e
se ne diamo un’occhiata ora vedrai
cosa voglio dire che è un po ‘lo stesso
processo e sì strano tipo di delicatezza
okay, quello farà oh mio dio, è solo
orrendo
comunque se fossi davvero così nutso io
potrei condividerlo con i miei amici
solo una parola sui vincoli di nuovo tu
tu se ricordi il semplice esempio I
ha appena detto dammi il video predefinito
video qualunque sia quello che non volevo
audio perché sarebbe il feedback che conosci
ora puoi fare qualcosa di più interessante
cose con vincoli in particolare
è possibile specificarli per essere obbligatori per
getUserMedia
se il obbligatorio allora getusermedia lo farà
fare i capricci se si tratta di quel vincolo
non è soddisfatta e rifiuterà di collaborare
e non andrai da nessuna parte se lo sono
opzionale, quindi getusermedia proverà a
soddisfare tale limite ma cadrà
torna a recitare come se non avessi mai chiesto
per quello in primo luogo se se questo è
non è possibile così per questo abbiamo
cose come la risoluzione che affrontano la tua modalità
conosco la scelta delle telecamere e così via
dare un’occhiata a questo esempio di
azione in questo caso diamo un’occhiata al
il codice su github è probabilmente il migliore
posto così se guardiamo il JavaScript
per questo provate e incontrate questo
che abbiamo tre diversi vincoli
è abbastanza grande, ne abbiamo tre
diversi valori di vincoli ciascuno
specificando una dimensione diversa per il
immagine quando premiamo il pulsante a seconda
su quale pulsante si preme otteniamo a
diverso vincolo e puoi vederti
può effettivamente leggere che è il reale
la dimensione del video che stai vedendo è arrivata da
conosci la larghezza del video in altezza e noi
può ottenere in questo esempio vga QVGA
chug-chug-chug o anche più pixel come
così sì, possiamo specificare ciò che vogliamo
dalla fotocamera in quel caso, come mi piace
sul piatto ha detto il precedente
diapositive in scala e ritaglio non è stato
implementato in modo che tu sia da un fisso
insieme di valori
un altro esempio un po ‘di più
complesso qui è la capacità di usare
vincoli per selezionare nuovamente la videocamera
Ti mostrerò solo brevemente il codice
per questo su Github se guardiamo al
JavaScript lo puoi vedere quando apriamo
questa pagina se puoi vedere lì con
usando il metodo di traccia del flusso multimediale ottieni ‘
Fonti questo sta diventando un elenco di
dispositivi a cui sono connessi
questa macchina che potremmo usare come
fonte per i media e nel callback
per questo stiamo impostando quei valori
in una selezione in modo da poter selezionare il
microfono e la videocamera e quando
andiamo a chiamare il to getusermedia
ci vengono dati dei vincoli che sono basati
il valore corrente della della
selezionare quindi l’ID del microfono o
l’ID della fotocamera quindi se guardiamo
adesso vedrete che ho solo una
fonte video disponibile lì se collego
in questa pratica fotocamera e aggiornare il
pagina guardiamo vediamo che puoi vedere
Ora ho una scelta di due due telecamere
e posso tornare all’altra okay
lasciami tornare alla videocamera ora questo
davvero utile per i cellulari così io
tenterà di utilizzare questa fotocamera come un
economico e allegro tipo di wolfvision
dispositivo e ti mostra questo lavoro su
il mio telefono, quindi sto utilizzando Chrome Beta qui
a proposito se vuoi scaricare
Chrome Beta non puoi ottenerlo direttamente
dal Play Store devi andare a
browser sul tuo telefono chrome è buono e
trovalo da lì e poi puoi
installalo da un link quindi proverò
e fai questo così puoi vederlo
questo è difficile, quindi sto ricevendo utente
i media qui e puoi vedere che è
la scelta era sul davanti
fotocamera in questo caso si chiama fotocamera
uno e poi se mi trasferisco al
fotocamera posteriore è possibile vedere che
Ho un video di video di te
molto comunque ci andiamo ma ovviamente
che conosci il vero potere che c’è
per è per dispositivi mobili e una coppia
delle cose che stanno arrivando lo farai
avere la possibilità di scegliere la fonte con
In realtà ti mostrerò le specifiche con il
la modalità fronte enum è chiamata casualmente
cosa che tipo di fa la stessa cosa
ma ti consente di non dover specificare
un ID per un dispositivo, ma in generale dico io
vuoi che l’utente di fronte al dispositivo o al
dispositivo di fronte all’ambiente o sinistra o
Giusto e così via , anche noi otterremo
la possibilità di utilizzare i vincoli di applicazione
metodo che significa che puoi dinamicamente
cambiare i vincoli da JavaScript che
di nuovo sarà molto potente per fare
roba al volo, penso di nuovo tu lo sai
tornando a questa idea che il reale
il potere del robot che vedi è quando arriva
contro altri IDE AP
abbiamo la capacità di integrare il Web
Audio con con getusermedia e cosa
questo significa che puoi usare l’output
dal tuo microfono o l’input da
il tuo microfono come input per due Web
Audio in modo da utilizzare il flusso multimediale di creazione
il metodo sorgente qui che puoi vedere è
ottenere un flusso dal getusermedia
richiamata diamo un’occhiata a questo
in pratica poi sono qui dal mio collega
Chris Wilson, quindi sì, c’è la chiamata
per ottenere i media dell’utente che chiede il permesso
la roba dall’audio dal microfono è
essere alimentato in Web Audio che è quindi
analizzando quell’audio e facendo questo bello
visualizzazione della tela come
e quindi possiamo anche usare il registratore j / s su
registra quella roba così bla bla bla bla bla
e poi scaricarlo sì okay no
ho perso la mia presentazione okay
quindi di nuovo sai solo un sacco di
potenziale lì per lavorare WebRTC in
altre API con vincoli anche noi
avere la possibilità di ottenere video da altri
fonti quindi l’ovvio esempio di questo
è la cattura dello schermo, quindi abbiamo l’abilità
per impostare la fonte per essere quello che sei
vedendo sullo schermo quindi una piccola demo di
che se vengo fuori da schermo intero tu
posso vedere che devo accettare e tu sai
dare il permesso di farlo e poi se io
spostalo un po ‘ e vedrai
abbiamo la cattura dello schermo in corso
di leggermente inutile ma sì l’altro
l’ altro modo di farlo è in realtà
l’interfaccia di tabulazione in per for
Acquisizione di schede cromo per app Chrome che
ti permette di ottenere una singola scheda che è a
tutto il potenziale penso che l’abilità sia giusta
per definire una singola scheda che abbiamo appena visto
implementato in Firefox che è
fantastica l’ API di registrazione del flusso multimediale
e noi abbiamo l’intenzione di attuare tale
in cromo solo per mostrarti un po ‘
esempio di quello in esecuzione in Firefox
ogni notte, quindi quello che abbiamo qui è
getusermedia viene chiamato e in the in
la richiamata per quel registratore multimediale
l’oggetto è istanziato e quindi quello è
essenzialmente creando un blob di registrato
dati quindi se qualcuno l’ha sentito, ma quale
in questo esempio è solo che si svolge
in un elemento audio ma si potrebbe
scarica anche quello
quindi questo tu sai lo scopo di questo
Ovviamente è necessario abilitare la registrazione di
flussi audio e video, se lo sei
interessato a queste cose che potresti desiderare
guardare il
Streaming API che è una sorta di generico
concetto per lo streaming di dati che è in
il processo di essere specificato molto
la gente ha chiesto specificamente il
capacità di fare essenzialmente fotografie
e di nuovo ovviamente questo è fondamentale
app in esecuzione su dispositivi mobili bene noi
avere una specifica per questo essenzialmente ha
due metodi uno è ottenere frame che ottiene
una cornice piena di dati immagine e l’altra
metodo è scattare foto che tipo di fa
quello che dice e crea un valore di blob
di immagine a cui è possibile accedere da on
gestore di foto
quindi sì, sta arrivando in questo momento
e vale la pena guardare le specifiche così
roba è grandiosa, ma ovviamente è solo così
diventa davvero potente quando possiamo usarlo
questo per lo streaming tra colleghi così dentro
Per utilizzare la comunicazione abbiamo bisogno di questo
API e l’API è rtcpeerconnection così
rtcpeerconnection consente la connessione
tra due peer e poi fa il lavoro
di streaming di dati audio e video in modo che
concetto in questo in un certo senso è abbastanza
semplice hai un flusso multimediale su uno
lato pompa che in rtcpeerconnection
e poi si ottiene un flusso multimediale fuori
All’altra estremità naturalmente rtcpeerconnection
deve fare molto c’è molto che va
in questo rtcpeerconnection deve fare
cose come la riduzione del rumore sono simili
piccole cose come cui un duro lavoro
come la cancellazione dell’eco, come si chiama
buffering dinamico del jitter quale tipo di
ferma il singhiozzo video e il tutto
processo per consentire una comunicazione fluida
anche quando ci sono singhiozzi di ampiezza di banda
e così su questo diagramma è davvero
c’è solo per mostrarti un sacco di
cose che non devi fare
preoccuparsi come uno sviluppatore web
per fortuna WebRTC fa molto dietro il
scene ora il tipo di segreto colpevole
su WebRTC è quello nonostante sia
peer-to-peer noi
hanno ancora bisogno di server per creare app WebRTC
sai che non è possibile a questo punto
in tempo per essere fuori dal mio modo di non farlo
sapere per un apatosauro fuori nel
Internet
connettimi ai dati del mio flusso di amici con
amico mio, sì, sarebbe fantastico
non funziona così, quindi abbiamo bisogno
servizio per due cose essenzialmente noi
devono essere in grado di scambiare i metadati
tra pari in una conversazione WebRTC
questo è chiamato segnalazione e anche noi abbiamo bisogno
i server per far fronte a voi conoscono il vero
questi sono mondo di Nat e firewall
chiamato stordire e girare i server e quello
l’intero quadro che li utilizza è
chiamato ghiaccio e di nuovo è il più
dettaglio su questo l’architettura
intorno a questo che è stato lo sai
specificato nella ITF si chiama J sorso ma
il tipo di idea semplice qui è giusto
che sai che stai segnalando via
qualche meccanismo non specificato e quello allora
che può abilitare lo streaming multimediale direttamente
tra il chiamante e il callee così
ci sono questi due processi in corso
ed è un punto semplice ma è così
tipo di al centro dell’architettura
di WebRTC quindi per segnalazione dobbiamo essere
in grado di scambiare queste cose chiamate
descrizione della sessione oggetti in primo luogo noi
è necessario indossare endpoint RTC da scambiare
informazioni sui media così è come
conosci i codec che supporto e
i codec che sto per inviare
informazioni del genere ora l’altra parte
di questo è per i coetanei essere in grado di farlo
scambia le informazioni di rete quindi questo è il
tipo di IP e porta quello che un dispositivo
si può accedere da così in altre parole
quando vuoi fare una connessione con te
bisogno di contattare il peer che vuoi
comunicare e dare loro
Informazioni sulla rete in modo che possano
in realtà quindi avviare una conversazione con
tu
bene RTC deliberatamente non definisce nessuno
meccanismo di messaggistica puoi usare quello che tu
come per la segnalazione e non c’è
protocollo di messaggistica per sparare
e sia e il pensiero dietro
questo è che queste cose sono cambiate
persone diverse hanno opinioni diverse
in modo che ciò non debba essere
il web RTC sputa le specifiche web RTC di
anche la segnalazione di rotta può essere utilizzata
scambiare i dati delle applicazioni così quando si
sai che gli utenti stanno iniziando con il
processo di inizializzazione della tua app quindi
possono scambiare dati usando lo stesso
segnalazione di setup così come faremo a
fai questo bene il tipo di parte principale
di questo è ovviamente quella segnalazione
ha bisogno di essere bidirezionale, quindi se tu
immagina come Fred vuole chiamare Wilma
ben intenzione di Fred deve andare oltre un
segnalazione server e amico fred è
intenzione di dover scambiare messaggi
con il server di segnalazione per iniziare
e poi quando Wilma viene coinvolto
ci saranno messaggi in corso
segnalazione di messaggi che vanno da Fred via
il server di segnalazione a Wilma e poi
da Wilma tramite il servizio di segnalazione
di nuovo a Fred, ora, naturalmente, tu
sapere con HTTP quel tipo di richiesta
modello di risposta questo in passato forse
è stato un po ‘complicato sai che potresti
fai questo ripetendo sondaggi come quello di Fred
L’app WebRTC potrebbe continuare a chiedere il
servizio di segnalazione hai un messaggio
da Wilma hai un buon messaggio
da Wilma sai che sarebbe questo
inefficiente e ovviamente non sta andando
ridimensionare anche se in pratica
e ho visto app in cui sei tu
lo sai con un po ‘ di ottimizzazione
questo può effettivamente funzionare un altro
l’alternativa è fare lunghi sondaggi
conosci la cometa come la chiami tu
per consentire una sorta di falso bidirezionale
comunicazione con il server questo è
effettivamente utilizzato da Google App Engine
l’API del canale con alcuni dei
esempi che ho mostrato che potresti effettivamente usare
Ajax xhr e sorgenti di eventi di origine evento
l’ API per abilitare ciò che viene chiamato
il server ha inviato eventi così per un server a
mantenere una connessione con un’app Web e
mandarti sapere i dati push dal server
all’app Web c’è una demo
Là
se vuoi dare un’occhiata a
azione forse una soluzione più naturale
è WebSocket che è ovviamente
intrinsecamente bidirezionale e tu sai
questo è supportato da tutti i browser
che supporta WebRTC desktop e mobile
e ovviamente puoi usare TLS con
WebSocket che è sicuro ed evita
alcuni problemi di proxy e così via se tu
voglia di saperne di più su che avevo
raccomandare a guardare sai garrix
capitolo su WebRTC che è giusto
uscendo e sì Peter Lee Peter
roba di lubbers ci sta benissimo
In realtà ho creato un laboratorio di codice per questo
se vuoi provare a costruire un
server di segnalazione utilizza IO socket
correndo sul nodo, certo che conosci il
l’unica presa con questo è che tu
bisogno di avere un server che esegue il nodo e
la ratata ovvio che è che un sacco di
servizi di hosting economici ti supportano
conosci PHP o qualsiasi altra cosa per quelli
situazioni che potresti usare degli isolatori a
char o qualsiasi altra cosa, ma se si desidera avere
uno sguardo a questo mi sento di raccomandare questo
perché è molto semplice con il socket IO
usare il socket IO per scambiare messaggi
e se guardiamo il codice del codice di laboratorio
effetto lo vedrai e questo è giusto
la parte di segnalazione non c’è web RTC in
questo ma puoi vedere che lo sai
questo è il codice per il server che è
è piuttosto semplice e se guardiamo
anche al codice cliente per questa app
è davvero molto semplice da fare
costruisci sapere costruire un servizio di segnalazione
in esecuzione su un nodo con socket
IO e c’è anche un esempio dal vivo
se vuoi dare un’occhiata a questo
correndo lì solo per un paio di
i trucchi ci vanno nei dettagli ma
solo una cosa da ricordare se lo fai
costruisci un servizio di segnalazione che conosci
la segnalazione intrinseca non è alta
larghezza di banda questi sono piccoli messaggi
scambiato per lo più all’inizio di a
Chiamata WebRTC ma sapete, naturalmente, se
hai un sacco di utenti allora
il carico può ancora essere molto pesante su on
un server di segnalazione
così quando gli oggetti rtcpeerconnection sono
inizializzati devono fare un paio di
cose che prima devono accertare
condizioni dei media locali quindi questo è il
roba di cui stavo parlando
capacità di codec di risoluzione e così via
e la seconda cosa che devono fare è
è farti conoscere questi potenziali questi
indirizzi di rete che potenzialmente il
il collega può usare per contattarli
queste sono queste cose chiamate candidati
così i media elaborano il processo per
lo scambio di metadati multimediali funziona un po ‘
così così ancora è come immaginare
Fred sta chiamando Wilma Fred chiama il
rtcpeerconnection crea metodi di offerta
e questo dà una parte della sessione SDP
descrizione dei dati del protocollo che vende
roba sulle condizioni dei media locali Fred
quindi lo imposta come descrizione locale
a questo punto dal modo in cui puoi modificare
roba con i codec e così via
perché questo processo può essere fatto manualmente
e dopo che Fred l’ha stabilito come suo locale
Descrizione egli può quindi inviare che
serializzare tali dati inviarlo a Wilma
Wilma fa la stessa cosa dentro
Reverse, ma la risposta è così
si dispone di questo processo offerta risposta fred
creando metadati multimediali impostandolo
localmente inviandolo a Wilma Wilma
creando i suoi metadati multimediali locali
impostazione che lo invia a livello locale
Fred e poi entrambi hanno quello che è
chiamato una descrizione remota c’è a
tipo di processo simile che accade
all’incirca nello stesso tempo di trovare la rete
informazioni in modo che il modo in cui funziona è
che Fred e Wilma creano il loro
oggetti rtcpeerconnection se questo è
successo con gli eventi Ice Candidate
inizia a diffondersi e in un bello
evento candidato puoi ottenere queste cose
chiamati candidati quali informazioni
di come questo pilastro può essere contattato in
altre parole un IP esterno e una porta di
quale il dispositivo host per quell’app
può essere contattato così Fred e Wilma entrambi
prendi questi candidati e poi loro
iniziare a spararsi l’un l’altro e quando
li ricevono che tu avresti usato aggiungere
candidato ghiacciato a fornire tali informazioni
a rtcpeerconnection in questo modo lo sono
scambiare informazioni sulla rete in ordine
per essere in grado di impostare il nucleo questo è
che cosa appare una descrizione della sessione RTC
così è questo sono i metadati dei media
l’offerta risponde parte di questo è il
tipo di cose che vengono inviate se
vuoi sapere cosa sono tutte queste cose
significa e i dati effettivi sono molto più lunghi
di questo
controlla gli esempi ITF con i dettagli
spiegazioni e questo è un esempio di a
offerta candidata scusa un oggetto candidato
quindi il candidato qui i dati il
bit che vedi i valori candidati
lì ho aggiunto questo su localizzato ma questo
è stato ottenuto dall’evento candidato sul ghiaccio
e tu mandi un gruppo di questi candidati
oggetti alla persona che stai cercando
comunicare con così possono provare e
fai una connessione con te se vuoi
per vedere tutto questo in stampa
in azione non ti mostrerò ora ma il
è davvero un grande esempio sul w3c
lato ha l’intero processo di peer
connessione con con segnalazione solo a
mostra una sorta di demo di SDP in questo modo
è un po ‘caldo dalla stampa leggermente
ruvido così in questo esempio che stiamo ottenendo
media locali e poi creerò un peer
oggetto di connessione e quindi creerò
un’offerta e quindi potresti vedere che è
questo è un intero pezzo di SDP per un
offerta e potrei effettivamente modificarlo se
Volevo farlo è un po ‘come modificare il codec
valori e così via quindi dovrò quindi impostare tale
fuori come l’offerta locale
sarà passato all’altro questo è
tipo di sciocco perché è due peer
oggetti di connessione in una pagina ma tu
so che hai un’idea e poi possiamo
creare la risposta che è gentile
simile ma dall’altra parte lo imposta
rispondi e poi abbiamo un pari
collegamento qualcosa che è appena stato
implementato che secondo me è
davvero potente
è questa idea di poter usare il
uscita da una rtcpeerconnection come
flusso multimediale da una connessione RCP come
l’input per un altro ora il motivo
questo è interessante è che ci dà
la possibilità per un’app Web di scegliere come
per inoltrare un flusso ad un altro PA così dentro
questo di nuovo è tutto in una pagina, quindi è così
un po ‘inutile, ma inizierò
ottenere alcuni media e poi è
visualizzandolo in un elemento video
Chiamerò così per questo secondo
oggetto di peerconnection e quindi è
passando attraverso un sacco di altri
oggetti di peerconnection a questo finale
oggetto di peerconnection e quindi riproduzione
che i media si diffondono in un altro video
elemento in modo che consenta alle app Web di scegliere
come inoltrano i flussi a un altro peer
se vuoi guardare la connessione peer
capisci questo è un bene
luogo per iniziare
questa è la connessione peer senza nessuno
segnalando che è circa un centinaio di righe
i codici mostrano l’intero processo in azione
se vuoi una specie di video pieno di grassi
chat app questo è il tipo di canonico
app di chat google con un sacco di registrazione
la console molto buona per se tu sei
cercando di elaborare il tipo di processi
la sequenza di eventi come ho detto noi
hanno anche la capacità di WebRTC per
comunicare dati arbitrari e tu sai
Penso che questo sia ciò che penso per molto
la gente in realtà questo è uno dei più
ci sono parti potenti del progetto
alcuni tipi di casi d’uso ovvi quindi tu
immagina due come due persone che giocano a
gioco e hanno bisogno di comunicare
dati arbitrari come questo che è
in realtà è completamente falsificato ma ottieni
l’idea generale così potresti essere
comunicare le posizioni dei giocatori con
un altro giocatore e deve farlo
quello con la latenza più bassa possibile
API se il canale dati rtcdatachannel è
molto simile deliberatamente a WebSocket
ma ovviamente il punto sui dati
canale è che vanno, sai che sei
scambiando direttamente dati arbitrari
tra pari non devi andare
attraverso
un server WebSocket intermedio che puoi
opzionalmente scegli questo
trasporto di comunicazione per essere affidabile
o inaffidabile ciò che significa è che se
tu dici che la comunicazione deve essere
affidabile quindi quello che stai dicendo è questo
deve fallire a meno che ogni pacchetto sia
consegnato e ovviamente lo farai
ne ho bisogno per cose come non lo so
condivisione di file qualunque se si dice che
sei contento di prestazioni migliori ma
può essere inaffidabile allora quel tipo di I
non so che va bene per cose come
si scambia la posizione del giocatore di gioco
cose che in realtà non dobbiamo ottenere
ogni pezzo di dati affidabile affidabile
il trasporto è stato implementato SCTP in
firefox per un po ‘di tempo e ora in chrome
31 e chrome 30 dietro una bandiera che è
bene, sì, l’API ha questo aspetto
come puoi vedere è una bella
tipo diretto di aggiunta al pari
connessione per specificare che si desidera
usa un canale dati e poi quando arrivi
il canale dati che puoi configurare
canale per gestire la messaggistica molto simile
con WebSocket ancora una volta molto semplice
attraverso un esempio di pagina di farlo
se vuoi dare un’occhiata a come i dati
canale funziona un po ‘più eccitante
demo penso che sia la prima app di condivisione questo
ti permette di condividere file usando
rtcdatachannel quindi sceglierò questo è un
foto del mio pub locale in Tooting in
Londra da cui stiamo cercando di salvare
in fase di sviluppo, quindi l’ ho specificato
come il file che voglio condividere tramite
rtcdatachannel e poi ho solo bisogno di
passare a qualcuno un URL per quello che è
qui quindi devi far finta che sia acceso
un’altra macchina ma ottieni il generale
idea
quindi sì, ho appena comunicato
con me questa questa fotografia ma tu
posso immaginare che questo sia molto
potente
la capacità di a per condividere file
senza una specie di file intermedio
servizio così come ho detto che sai in un
mondo perfetto tutto sarebbe come questo
faremmo semplicemente questa comunicazione
direttamente tra pari, ovviamente nel
nel mondo reale abbiamo Nat e firewall
abbiamo bisogno di essere in grado di far fronte a tale in
per stabilire lo streaming tra
colleghi, quindi abbiamo questo ben consolidato
in realtà la tecnologia per questo chiamato stordire
un server stordente ha un compito davvero semplice
che è solo per quando viene fatta una richiesta
per rispondere con un IP pubblico e una porta
che il dispositivo richiedente può essere
contattato da così è sai che è
è un server semplice che non fa molto
è una specie di relativamente a buon mercato per correre
e sì è un po ‘come funziona
lo sai che il server Sun vive
la su internet pubblica al di fuori del
firewall se fallisce ne abbiamo un altro
metodo che è quello di utilizzare un server di turno
turn server è essenzialmente un relay
server di nuovo questo è vivere
l’ Internet pubblica e l’idea di questo
è questo se a causa di firewall complessi
e questo è e così via diretto peer-to-peer
la comunicazione fallisce, possiamo passare attraverso questo
relay server ha chiamato il server di turn ora
il lato negativo di questo è ovviamente quello
essenzialmente quei server di turno sono
trasmettere tutti i dati di streaming in modo che il
non devono essere particolarmente intelligenti
ma hanno a che fare con molti
larghezze di banda in modo che il costo di questo ci
se guardi l’ app dell’app RTC I
detto questo è il valore che è
passato nel rctp economico
rtcpeerconnection oggetto per specificare il
stordire e girare i server con alcuni
i dettagli di accesso lì è facoltativo da usare
stordire e girare, ma questo è il tipo di
cosa faresti se vuoi usarlo
quei server
la struttura che viene utilizzata dagli artisti
apparire collegamento a lavorare con questi
le tecnologie si chiamano ghiaccio, quindi lo sai
se il tipo di trade-off qui è
quello stordimento è ovviamente economico perché tutto
stai facendo sta ottenendo un IP esterno
la porta per un turno di dispositivo è un po ‘come funziona
in ogni caso, ma è più costoso
ed è meno efficiente il ghiaccio funziona con a
tutta la lista di candidati che conosci
Ho mostrato prima sono passati
tra pari, il ghiaccio funziona con quella lista
di candidati per trovare il percorso ottimale
e in effetti conosci la maggior parte di
le chiamate tra colleghi funzioneranno effettivamente
direttamente peer-to-peer con il
aiuto di stordire è, voglio dire che è
intorno a queste statistiche attorno al tipo di
tipo di sei su sette funzionano bene
in questo modo è leggermente meno tra
chiamate business to business se lo si desidera
per far funzionare un server stordente ce ne sono alcuni
opzioni Google ha una prova ma tu
può usare per il test e ci sono aperti
implementazioni di sorgenti RFC 576 sei
stordito scusa si trasforma e c’è una VM
immagine disponibile per questo per Amazon Web
I servizi hanno solo una breve spiegazione
sicurezza molte persone chiedono questo
è una specie di core per il progetto WebRTC
sai che abbiamo la crittografia obbligatoria
tutti i componenti di WebRTC e di
Certo che ti ho mostrato che abbiamo l’interfaccia utente
interazioni pensate per essere al sicuro
optare esplicitamente per
partecipare a una chiamata WebRTC e io
pensa che se tu lo sai di più
aspetto sicuro di questo è ovviamente il
WebRTC è integrato nel browser, quindi è così
sandbox non ci sono plugin, no
processo di aggiornamento separato non c’è modo
per tipo di persone del trucco in
installazione di extra quindi abbiamo sì questi
percorsi sicuri che dovrebbero effettivamente dire
TLS piuttosto che HTTP perché potresti
lavorare con
websocket ma tutto è al sicuro
quelli Pro lo sai criptato in quelli
processi solo per ripetere se quando
stai costruendo segnali che devi usare
TLS altrimenti se stai segnalando è
incline a sapere di essere stato intercettato
ovviamente non criptato che si apre
un sacco di potenziale per tipo di uomo nel
roba di mezzo di reindirizzamento delle chiamate e così via
per intercettare il personale, magari iniettando
roba e così via quindi è davvero cruciale
con la segnalazione quando si implementa che
per usare protocolli sicuri così abbiamo dentro
il caso semplice si sa connessione con
WebRTC tra due diversi dispositivi noi
potrebbe in realtà e questo funziona per molti
di app WebRTC la capacità solo per
creare più oggetti rtcpeerconnection
e usare quelli per connettere molti
dispositivi tra loro in diversi tipi
di configurazioni ora questo non scala
ovviamente e il tipo di robusto
rispondere a questo è usare qualcosa
chiamato un’unità di controllo multipunto
questi sono server appositamente progettati
gestire i media per abilitare un po ‘di intelligenza
anche roba da fare con i media in arrivo
con diversi codec e risoluzioni
e così via e essere in grado di fare una specie di
distribuzione efficiente di tali media
tra molti e molti colleghi, quindi WebRTC
è stato progettato per questo tipo di
diverse topologie ma anche a
abilitare la comunicazione con l’esterno
mondo
quindi in particolare pensando al telefono
sistema questa una pila di cose che è
stato implementato per abilitare web RTC a
lavorare con i client sip è come un video
over right voice over IP e video
sistemi di conferenza e anche alcuni sì
qualche telefono cellulare dal telefono fuori è
tipo di integrato con jQuery e il
xing gaia embeddable proprio controllo del widget
che fuori per la connessione a PSTN PSN è come
il
semplice vecchia rete telefonica davvero carina
cosa scusa, continuo a portarlo ogni
tempo che parlo , mostrerò questi ragazzi
da voxi proprio troppo hanno fatto questo io
pensano a Burning Man quest’anno hanno fatto
lo hanno impostato per noi su Google i / oa
un paio di anni fa hanno costruito
la propria rete mobile utilizzando l’open
Rete cellulare open source BTS e cosa
ciò significava che si erano incorporati
che con il loro gateway per WebRTC
che potresti farti fare il telefono
chiama da qualsiasi vecchio telefono attraverso
il loro gateway attraverso il loro BTS aperto
vendere a un’app WebRTC in esecuzione su a
computer che per me è fantastico per te
so che questa è la telefonia senza un corriere
e questo lo sai davvero
utile in situazioni in cui non c’è
infrastrutture o infrastruttura è
stato danneggiato così un sacco di potenziale di
quella roba
solo un veloce puntatore ad alcuni strumenti
per aiutarti a creare app WebRTC chrome
ha una pagina interna WebRTC che dà
pile e pile di statistiche e così via
su quello che succede con la vostra con
le tue connessioni WebRTC e puoi
scarica tutto e guarda
davvero carino quando tu quando sei
cercando di capirci qualcosa
in procinto di vedere per essere in grado di guardare a tutti
i dati di segnalazione da lì un altro
è uno spessore JavaScript mantenuto da
Google ha adattato la tua specie di abstract
via alcune delle differenze nei prefissi
e così via le specifiche tecniche sono piuttosto stabili
ora ma ti ha permesso di usare lo stesso
gli stessi termini senza dover cambiare
che ogni volta c’è un cambiamento se tutto
questo è troppo, quindi consiglio questi
Strutture JavaScript sono una pila di
buone strutture JavaScript mature per
creare app Web RTC senza dover
andare in tutto il processo di roba che ero
parlando di li ho qui
in realtà ma ci sono anche questi semplici
web RTC ha un server di segnalazione – chiamato
master single sign così semplice con RTC
è molto semplice per
è davvero facile creare un’app con a
poche righe di codice
allo stesso modo PJs fa lo stesso per i dati
canale solo sì tipo di dieci righe di
JavaScript se non vuoi scrivere
qualsiasi codice ci sono molti
servizi completi ora sul web aperti
parlare la linea V e altri asterisco e così via
sopra
abilitare le chiamate WebRTC senza fare nulla
lavorare per implementare qualsiasi cosa e di
Naturalmente il vecchio codice C ++ è anche lì
se vuoi dare un’occhiata al
pacchetto che puoi controllare se tu
vuoi maggiori informazioni su WebRTC I
mantenere una lista che è in cima
c’è qual è il tipo di tutte le cose che io
conoscere e avere sentito parlare e ottenere
alcuni contributi anche a questo e
si, consiglio di dare un’occhiata al
Presentazione I / O di Google che Justin a
Bertie e ho fatto quest’anno un sacco di bene
roba lì un sacco di modi per contattare
WebRTC persone il forum principale per
discussione tecnica è discutere WebRTC
il gruppo di Google e una pila di nuovi
roba viene sempre pubblicata su Google+
più WebRTC e lo sai davvero
benvenute, ovviamente, le persone sono una caratteristica
richieste e segnalazioni di bug quindi tienili
arrivando su Co bug comm slash new e yeah
So cosa mi interessa
cosa fanno gli sviluppatori web con il tipo WebRTC
di fuori dei mondi al di là dei mondi
di tipo di telefonia e video
conferenza e tutto ciò così sono davvero
interessato a vedere cosa piacciono alla gente
sai che in questa stanza farà con
queste API sono volevo solo finire
in realtà facendo qualche chat WebRTC se
chiunque ha un browser se lo desidera
vai a questa pagina è torquey punto io / go
web RTC Vedrò solo se potremmo avere un
video chat tra chiunque si presenti e
la terra funzionerà se qualcuno ha un
Mi limiterò a mostrare di nuovo l’URL , quindi se
chiunque voglia aderire a questo vedremo se
possiamo ottenere la gente su questo è esso andando
lavoro forse non vogliamo due diversi
le reti qui ora eccoci
ciao a chiunque tu sia dispiaciuto, penso
questo è tutto
abbiamo qualcun altro questo è bello e
questo è un tipo di metodo di forza bruta tu
so che molte sono le connessioni TCP
è geniale
Riconosco quel tipo, okay, comunque
meglio finire come dico le diapositive
sono online su go web RTC appspot.com
e sì vi ringrazio tanto ho un
un paio di minuti che non so di prendere
alcune domande
Non so se verrò consegnato a
trova con domande o non ancora ok lo farò
prova a rispondere a questo e su Firefox
e cioè bene abbiamo il supporto per
Firefox che è fantastico
Ovviamente, ha avuto pieno supporto con
WebRTC tramite Chrome Frame ma certamente
non in futuro io non ne conosciamo alcuni
le persone potrebbero aver visto questo WebRTC dell’UE
proposta che penso che tu sappia molto
di commenti sul RTC web esistente
proposta quindi penso che sia molto avvincente
quando abbiamo WebRTC su una volta sappiamo
iniziare ad avere endpoint WebRTC simili
miliardi di loro diventa molto
convincente per IE
e Safari e così via, vedremo dove
quello va
come se non avesse senso includere
la consapevolezza della posizione in WebRTC che è
davvero interessante sì sicuramente posso
pensa a molti casi d’uso per questo
questo è un vero punto di persone
essere fuori dalle persone di contatto chi sei
sapere cercando forse di rispondere alle domande
e così via nelle vicinanze del prossimo
la domanda è a cosa serve il codec
inviando i dati sul perché è così
possibile controllare la larghezza di banda o
sintonizzazione automatica in base alla disponibilità
risorse sì tipo di voi è possibile modificare il
lo sdp che hai impostato come locale
descrizione e invia al tuo collie che
quindi usano come descrizione remota
così puoi modificare quella roba e il
i codec che usi sai cosa sono
implementato dall’app per Chrome
abbiamo conosciuto il vp8 e un novizio ma
puoi modificare i dettagli per quello sì
se hai bisogno di maggiori informazioni su di loro
e vai al gruppo di discussione WebRTC se
hai bisogno di cose più specifiche su questo
può RTC gestire NAT carrier-grade cgn
dove i singoli clienti
dietro più strati di rete sì
questa è una buona domanda anche a te
sappi che i miei piccoli diagrammi mostrano gentilezza
di un piccolo moscerino ed è tutto molto
semplice ma nel mondo reale è più
complesso di quello che si può avere firewall
e moscerini dietro i moscerini e così via e così via
sopra
dipende che non sono molto esperto
questo ma tu sai che dipende da
dipende dal server di stordimento ma
ovviamente questo può essere un problema e questo
è dove abbiamo i server di turno per fornire
un fallback tristemente per quella complessità
che ovviamente ci coinvolge particolarmente
le aziende che gestiscono proprio questi
complesso e potenzialmente lo sai
configurazioni di rete a volte obsolete ma
sì è complicato e io no
ho davvero una buona risposta per come possiamo
sai sviluppare stordire per far fronte
con questi immagino sempre più complesso
configurazioni di gnat ah ora questo è grande qualsiasi
pensieri su p2p CDN via WebRTC intendevo
per mostrare ciò, i possibili utenti sono preoccupati
per quanto riguarda la larghezza di banda, penso che questo sia davvero
area interessante quindi l’idea è che tu
non limitarti a condividere file come il
roba che ho mostrato con condividi prima ma tu
fare qualcosa di simile a quello che non so se
Qualcuno ha visto tra pari CDN i ragazzi sono
chiamato pr5 hanno implementato questa roba
ed è un concetto davvero interessante
è è una specie di file peer-to-peer
condividendo così lo sai concettualmente
l’idea è che tu saresti in grado di ottenere
attività non predefinite da un server ma
di default da qualche altro peer che tu
so che si spera, naturalmente, è vicino
sei in rete, ora sai in un certo senso
questo è esattamente il tipo di cosa che
possiamo vedere con questo canale dati ITC
possibilità di lavorare con file o blocchi
di file potrebbe essere il tipo di p2p
il sogno si avvera ovviamente il grande
è sconosciuto come funzionerà in Prak
e non ho una risposta a questo bene
si sa come efficienti che possono essere
se questo può funzionare bene come quello
funziona con larghezze di banda che conosci come qualsiasi
sistema peer-to-peer se si è improvvisamente
lavorando come redistributore di contenuti
sai che non sappiamo come sarebbe
lavorare se tutti iniziano se tutti
iniziato a utilizzare il peer CDN e avviato
distribuzione di contenuti peer-to-peer tramite
via WebRTC quindi non conosco la risposta
quello ma è che penso molto
area interessante peer-to-peer
condivisione di file e distribuzione solo fob
in realtà CDN esegue peer-to-peer
piuttosto che da questo tipo di
configurazioni di servizio monolitiche penso che sia così
l’ultima domanda se qualcuno ha di più
domande sarò in giro oggi e
domani quindi sentiti libero di venire e
parlami o mandami una e- mail
Dutton su google.com quindi grazie mille
tanto
Please follow and like us: