2. Web RTC
(Web Real Time Communication)
Par KONJOH SELABI Elvis Gerardin
Développeur à Afreetech(afreetech.com)
Tel: 76112285/95090007
Email : selabielvis@gdg-yaounde.org
2
4. Citation
WebRTC est un nouveau front dans la
longue guerre pour un Web ouvert et
sans entraves.
Brendan Eich , l'inventeur du
JavaScript
4
5. I- Historique
• L'un des derniers grands défis pour le web est de permettre la
communication humaine via la voix et de la vidéo: Real Time
Communication, RTC pour faire court. RTC doit être aussi naturelle
dans une application web que vous entrez du texte dans un champ de
texte. Sans elle, nous sommes limités dans notre capacité à innover
et à développer de nouvelles façons pour les gens d'interagir.
• Historiquement, le RTC a été entreprise et complexe, nécessitant des
technologies audio et vidéo coûteux pour être agréés ou développés
en interne. Intégration de la technologie RTC avec le contenu
existant, les données et les services a été difficile et prend du temps,
en particulier sur le web.
• Gmail vidéo chat est devenu populaire en 2008, et en 2011, Google
a introduit Hangouts, qui utilisent le service Google Talk (comme le
fait Gmail)
5
7. II- Concepts
Prérequis: gestion de son et de l’audio en Html5.
WebRTC met en œuvre trois API:
• MediaStream (de getUserMedia)
• RTCPeerConnection
• RTCDataChannel
7
9. II-1 MediaStream
• L' API MediaStream représente flux synchronisés des
médias. Par exemple, un flux prise de la caméra et
l'entrée microphone est synchronisé pistes vidéo et
audio. Qui se base sur le getUserMedia ();
• La méthode getUserMedia () prend trois paramètres:
• Un objet de contraintes .
• Un rappel de réussite qui, si elle est appelée, est passé
à un MediaStream.
• Un rappel d'échec qui, si elle est appelée, est passé à
un objet d'erreur.
9
10. II-1 MediaStream (Suite)
• getUserMedia () combine trois(03) Apis:
• Webcam Toy est une application qui utilise WebGL
photobooth pour ajouter des effets étranges et
merveilleux à des photos qui peuvent être partagés ou
sauvegardés localement.
• FaceKat est un jeu de « suivi du visage» construit avec
headtrackr.js .
• Caméra ASCII utilise l'API Canvas pour générer des
images ASCII.
10
13. Voici un schéma d'architecture WebRTC
montrant le rôle de RTCPeerConnection
13
14. Explication
• Les codecs et protocoles utilisés par WebRTC font une
énorme quantité de travail à faire de la communication
en temps réel possible, même sur des réseaux non
fiables:
• la dissimulation de perte de paquets
• annulation d'écho
• l'adaptabilité de la bande passante
• tampon dynamique des tremblements
• contrôle automatique du gain
• la réduction et suppression du bruit
• nettoyage de l’image.
14
16. II-3 RTCDataChannel
• L'API de RTCDataChannel permet l'échange peer-to-
peer de données arbitraires, avec une faible latence et
un débit élevé.
• Il existe de nombreux cas d'utilisation potentiels pour
l'API, y compris:
• Gaming
• Applications de bureau à distance
• Chat text en temps réel
• Le transfert de fichiers
• Les réseaux décentralisés
16
17. • L'API a plusieurs fonctionnalités pour profiter au
maximum de RTCPeerConnection et permettre une
communication puissante et flexible peer-to-peer:
• Tirer parti de la configuration de session
RTCPeerConnection.
• Canaux simultanés multiples, avec des priorités.
• Sémantique de livraison fiables et peu fiables.
• La sécurité intégrée (DTLS) et le contrôle de
congestion.
• Aptitude à utiliser avec ou sans audio ou vidéo
17
19. IV- Sécurité
WebRTC a plusieurs caractéristiques pour gérer le securité:
Implémentations WebRTC utilisent des protocoles sécurisés tels que DTLS
et SRTP .
• Le chiffrement est obligatoire pour tous les composants WebRTC, y
compris les mécanismes de signalisation.
• WebRTC n'est pas un plugin: ses composants s'exécutent dans le
sandbox du navigateur et non dans un processus séparé, les
composants ne nécessitent pas d'installation séparée, et sont mis à jour
chaque fois que le navigateur est à jour.
• Caméra et un microphone accès doit être accordé de façon explicite et,
lorsque la caméra ou le microphone sont en cours d'exécution, cela est
clairement indiqué par l'interface utilisateur.
19
21. V- Protocoles
• Le projet de la WebRTC W3C Editor
• Projet de W3C éditeur: Captage et les flux
multimédia (aka getUserMedia)
• IETF Charte Groupe de travail
• IETF WebRTC Data Channel projet de protocole
• IETF JSEP Projet
• IETF a proposé norme ICE
• IETF RTCWEB Groupe de travail Internet-Draft: Web
Communication cas d'utilisation et des exigences en
temps réel
21
22. VI- Conclusion
• Les API et les normes de WebRTC peuvent démocratiser et
décentraliser les outils de création de contenu et de communication
pour la téléphonie, les jeux, la production vidéo, faire de la musique, la
collecte de nouvelles et de nombreuses autres applications. La
technologie ne va pas beaucoup plus perturbateur que cela.
• Nous nous réjouissons de ce que font les développeurs JavaScript de
WebRTC car il devient largement appliqué. Comme blogueur
22
23. Citation
Phil Edholm a dit : «Potentially, WebRTC and HTML5 could
enable the same transformation for real-time
communications that the original browser did for
information ».
23
RTCPeerConnection est dans Chrome (sur le bureau et pour Android) et Firefox. Un mot d'explication sur le nom: après plusieurs itérations, RTCPeerConnection est actuellement mis en œuvre par Chrome comme webkitRTCPeerConnection et par Firefox comme mozRTCPeerConnection.
MediaStream : obtenir l'accès aux flux de données, tels que de la caméra et au microphone de l'utilisateur.
RTCPeerConnection : audio ou vidéo appelant, avec des installations pour le chiffrement et la gestion de la bande passante.
RTCDataChannel : peer-to-peer communication de données génériques.
Signalisation est utilisé pour échanger des trois types d'informations.
messages de contrôle de session: pour initialiser ou fermer des erreurs de communication et de rapport.
La configuration du réseau: le monde extérieur, quelle est l'adresse IP et le port de mon ordinateur?
Capacités des médias: des codecs et des résolutions peut être manipulé par mon navigateur et le navigateur qu'il souhaite communiquer?