webrtc

#webrtc
Sommario
Di 1

Capitolo 1: Iniziare con webrtc 2

Osservazioni 2

Examples 2

Impostazione di un sistema di comunicazione basato su WebRTC 2

Introduzione a WebRTC 3

Ottieni l'accesso al tuo audio e video usando l'API getUserMedia (), Hello WebRTC! 3

Capitolo 2: Esempi semplici di WebRTC 5

Parametri 5

Examples 5

Ottieni permessi per fotocamera e microfono e visualizza l'anteprima sulla pagina web 5

Capitolo 3: Usando getUserMedia () per richiedere l'accesso alla telecamera e al microfono 7

Examples 7

Utilizzo di getUserMedia () 7

Per cosa viene utilizzato getUserMedia() ? 7

Browser supportati per getUserMedia() 7

File richiesti per utilizzare getUserMedia 8

Titoli di coda 9
Di
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: webrtc

It is an unofficial and free webrtc ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official webrtc.

The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@zzzprojects.com

https://riptutorial.com/it/home 1
Capitolo 1: Iniziare con webrtc
Osservazioni
WebRTC è un progetto aperto e gratuito che fornisce ai browser e alle applicazioni mobili
funzionalità di Real-Time Communications (RTC) tramite semplici API. I componenti WebRTC
sono stati ottimizzati per servire al meglio questo scopo.

Effettua il checkout seguendo i link per ottenere maggiori informazioni su WebRTC

webrtc.org
architettura webrtc
controlla la demo live qui

Examples
Impostazione di un sistema di comunicazione basato su WebRTC

Per configurare un sistema di comunicazione basato su WebRTC, sono necessari tre componenti
principali:

1. Un server di segnalazione WebRTC

Per stabilire una connessione WebRTC, i peer devono contattare un server di segnalazione,
che fornisce quindi le informazioni sull'indirizzo che i peer richiedono per impostare una
connessione peer-to-peer. I server di segnalazione sono ad esempio:

• signalmaster : server di segnalazione leggero, basato su JavaScript

• NextRTC : server di segnalazione basato su Java
• Kurento : framework WebRTC completo
• Janus : gateway WebRTC per scopi generali

2. Un'applicazione client WebRTC

Il client accede all'implementazione WebRTC di un browser tramite un'API JavaScript o

utilizza una libreria WebRTC (ovvero come parte di un'app desktop o mobile). Per stabilire la
connessione a un peer, il client deve prima connettersi al server di segnalazione. Esempi per
i client WebRTC sono:

• Diversi progetti Kurento

• OpenWebRTC , un client multipiattaforma con focus mobile

• Peer.js Un client basato su browser (Peer.js fornisce anche un server leggero)

• Esempi di demo di Janus

3. Un server STUN / TURN

https://riptutorial.com/it/home 2
 Session Traversal Utilities per NAT (STUN) consente ai peer di scambiare informazioni sugli
indirizzi anche se si trovano dietro router che utilizzano Network Adress Translation (NAT) .
Se le restrizioni di rete impediscono ai peer di comunicare direttamente, il traffico viene
instradato tramite un server Traversal Using Relays around NAT (TURN) . Trovate una
spiegazione dettagliata e grafica di STUN e TURN all'indirizzo
http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-
stun-and-turn.html . Esempi per i server WebRTC STUN / TURN sono:

• coturn combina STUN e TURN e fa generalmente parte di un'infrastruttura WebRTC

completa.
• Janus WebRTC Gateway viene fornito con un server STUN / TURN integrato.

Introduzione a WebRTC

WebRTC è un framework aperto per il web che abilita le comunicazioni in tempo reale nel
browser. Comprende i componenti fondamentali per le comunicazioni di alta qualità sul Web,
come componenti di rete, audio e video utilizzati nelle applicazioni di chat vocale e video.

Questi componenti, se implementati in un browser, sono accessibili tramite un'API JavaScript,

consentendo agli sviluppatori di implementare facilmente la propria app Web RTC.

Lo sforzo WebRTC viene standardizzato a livello di API al W3C ea livello di protocollo presso
IETF .

• Un fattore chiave per il successo del web è che le sue tecnologie di base, come HTML,
HTTP e TCP / IP, sono aperte e liberamente implementabili. Al momento non è disponibile
una soluzione completa gratuita di alta qualità che consenta la comunicazione nel browser.
WebRTC consente questo.
• Già integrato con i migliori motori vocali e video che sono stati distribuiti su milioni di
endpoint negli ultimi 8+ anni. Google non addebita canoni per WebRTC.
• Include e astrae la tecnologia chiave NAT e firewall traversal, utilizzando STUN, ICE, TURN,
RTP-over-TCP e supporto per i proxy.
• Si basa sulla forza del browser Web: WebRTC astrae la segnalazione offrendo una
macchina a stati di segnalazione che mappa direttamente a PeerConnection. Gli sviluppatori
Web possono quindi scegliere il protocollo di scelta per il loro scenario di utilizzo (ad
esempio, ma non solo, SIP, XMPP / Jingle, ecc.).

Leggi di più su WebRTC da qui

Ottieni l'accesso al tuo audio e video usando l'API getUserMedia (), Hello
WebRTC!

navigator.mediaDevices è il metodo comune adattato in Chrome e FF a getUserMedia sin d'ora.

Un richiamo basato promesso che restituisce lo stream locale in caso di successo

navigator.mediaDevices.getUserMedia({ audio: true, video: true })

.then(stream => {

https://riptutorial.com/it/home 3
 // attach this stream to window object so you can reuse it later
window.localStream = stream;
// Your code to use the stream
})
.catch((err) =>{
console.log(err);
});

È possibile passare vincoli audio e video a getUserMedia per controllare le impostazioni di

acquisizione come risoluzione, framerate, preferenze del dispositivo e altro.

Allega lo stream a un elemento video

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

ferma sia il video che l'audio

localStream.getTracks().forEach((track) => {
track.stop();
});

ferma solo l'audio

localStream.getAudioTracks()[0].stop();

ferma solo il video

localStream.getVideoTracks()[0].stop();

Dimostrazione dal vivo

Leggi Iniziare con webrtc online: https://riptutorial.com/it/webrtc/topic/4623/iniziare-con-webrtc

https://riptutorial.com/it/home 4
Capitolo 2: Esempi semplici di WebRTC
Parametri

getUserMedia ()
Descrizione
Paramter

È costituito da un array che ci consente di specificare quali dispositivi

vincoli
multimediali utilizzare, ad esempio audio o video o entrambi

Callback di Crea una funzione per il callback di successo che ti fornirà lo stream
successo che ottieni dai tuoi dispositivi multimediali

Questo callback viene richiamato quando c'è un problema come se

Errore di callback non ci fossero dispositivi multimediali, o l'utente ha negato il permesso
di usarli

Examples
Ottieni permessi per fotocamera e microfono e visualizza l'anteprima sulla
pagina web

Per iniziare a utilizzare WebRTC è necessario ottenere il permesso di telecamera e microfono.

Per questo è necessario seguire le seguenti cose:

1. adapter.js , puoi ottenerlo da qui

2. Una pagina Web html con un tag video e un po 'di codice js

Adapter.js è uno shim di JavaScript per WebRTC, gestito da Google con l'aiuto della community
WebRTC , che astrae i prefissi dei fornitori, le differenze tra browser e le specifiche.

Ora, una volta ottenuto questo file, creare un file html con il seguente codice:

<!DOCTYPE html>
<html>
<head>
<title>My first webrtc example</title>
<script src="adapter.js"></script>
<script type="text/javascript">
function gotStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();

// Create an AudioNode from the stream

var mediaStreamSource = audioContext.createMediaStreamSource(stream);

// Connect it to destination to hear yourself

// or any other node for processing!

https://riptutorial.com/it/home 5
 mediaStreamSource.connect(audioContext.destination);
var video = document.querySelector('video');
var videoTracks = stream.getVideoTracks();
window.stream = stream; // make variable available to browser console
video.srcObject = stream;
}
function onfail(error) {
console.log("permission not granted or system don't have media
devices."+error.name);
}
navigator.getUserMedia({audio:true,video:true}, gotStream,onfail);

</script>
</head>
<body>
Welcome to webrtc
<video id="local" autoplay=""></video>
</body>
</html>

Al termine, salva questo file ed esegui nel browser. Quando esegui il browser ti verrà chiesto di
consentire a questa pagina web di accedere alla tua webcam e al tuo microfono. Consentitemi e
whola!, Vedrete l'anteprima sulla pagina web.

Leggi Esempi semplici di WebRTC online: https://riptutorial.com/it/webrtc/topic/5641/esempi-

semplici-di-webrtc

https://riptutorial.com/it/home 6
Capitolo 3: Usando getUserMedia () per
richiedere l'accesso alla telecamera e al
microfono
Examples
Utilizzo di getUserMedia ()

Come sapevamo, WebRTC si basa tutto sullo sviluppo e sulla codifica di JavaScript e per ulteriori
informazioni ed esempi si prega di fare riferimento qui e qui .

E ora, lascia che ti mostri un esempio molto semplice per usare getUserMedia();

Per cosa viene utilizzato getUserMedia() ?

getUserMedia () viene utilizzato per ottenere il rilevamento della videocamera e del microfono
dell'utente / visitatore.

Browser supportati per getUserMedia()

• Mozilla Firefox 22 (PC) o versioni successive.

• Microsoft Edge 21 (PC) o versioni successive.

• Google Chrome 23 (PC) o versioni successive.

• Opera 18 (PC) o superiore.

• Google Chrome 28 (Android) o versioni successive.

• Mozilla Firefox 24 (Android) o versioni successive.

• Opera Mobile 12 (Android) o superiore.

• iOS ( Bowser ).

• Chrome OS

• Firefox OS

• Browser BlackBerry 10 predefinito.

https://riptutorial.com/it/home 7
File richiesti per utilizzare getUserMedia
• https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/gum/js/test.js
• https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/gum/js/main.js
• https://github.com/webrtc/samples/blob/gh-pages/src/js/adapter.js
• https://github.com/webrtc/samples/blob/gh-pages/src/js/common.js
• https://github.com/webrtc/samples/blob/gh-pages/src/js/lib/ga.js

1. Inizia la codifica in un normale file HTML.

2. Nei <body></body> , includi i file API WebRTC richiesti:

Non sono in grado di utilizzare il codice dell'editor Stackoverflow, quindi ecco il codice:
http://pastebin.com/2fQzJhuG

Buon lavoro! ora sei solo un grande antipasto e dovrebbe funzionare normalmente.

Ultimo codice:

<html>
<body>
<script src="js/adapter.js"></script>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
<script src="js/lib/ga.js"></script>
<body>
</html>

E 'stato molto facile, giusto?

Leggi Usando getUserMedia () per richiedere l'accesso alla telecamera e al microfono online:
https://riptutorial.com/it/webrtc/topic/6134/usando-getusermedia----per-richiedere-l-accesso-alla-
telecamera-e-al-microfono

https://riptutorial.com/it/home 8
Titoli di coda
S.
Capitoli Contributors
No

AJ., Community, Griffin, Ichigo Kurosaki, mpromonet, Olga

1 Iniziare con webrtc
Khylkouskaya, Sasi Varunan, Timotheus.Kampik, xdumaine

Esempi semplici di
2 Ichigo Kurosaki
WebRTC

Usando
getUserMedia () per
3 richiedere l'accesso protld
alla telecamera e al
microfono

https://riptutorial.com/it/home 9