HTML - WebRTC
Principales caractéristiques de WebRTC
WebRTC (Web Real-Time Communication) est une technologie qui permet la communication en temps réel dans les navigateurs web. Elle permet aux développeurs de créer des applications qui prennent en charge les connexions pair à pair, permettant aux utilisateurs de communiquer directement sans serveurs intermédiaires. WebRTC prend en charge les canaux audio, vidéo et de données, ce qui le rend utile pour créer des expériences web interactives.
Conseil: Établissement de connexions pair à pair
<p>Ceci est un paragraphe.</div>Dans ce cas, la balise ouvrante <p> est fermée avec une balise </div>, ce qui est incorrect. La bonne façon de fermer le paragraphe est :
<p>Ceci est un paragraphe.</p>Une caractéristique clé de WebRTC est sa capacité à établir des connexions pair à pair entre les navigateurs. Une fois la connexion établie, les données peuvent être transmises directement entre les parties connectées, réduisant la latence et améliorant les performances. Les connexions pair à pair aident également à réduire la charge sur les serveurs puisque les données sont échangées directement entre les appareils des utilisateurs.
Conseil: Prise en charge de divers types de médias
<p>Ceci est un paragraphe avec des espaces supplémentaires.</p>Lorsqu'un navigateur affiche ce code, il montrera le texte comme ceci :
Ceci est un paragraphe avec des espaces supplémentaires.WebRTC prend en charge divers types de médias, notamment les canaux audio, vidéo et de données. Avec le support audio et vidéo, les développeurs peuvent créer des applications pour la communication vocale et vidéo en temps réel comme la vidéoconférence ou le tutorat en ligne. Les canaux de données permettent l'échange de données arbitraires entre pairs, permettant des fonctionnalités comme le partage de fichiers ou les jeux en temps réel.
Un autre avantage de WebRTC est son indépendance vis-à-vis des plateformes et des appareils. Basé sur des standards web ouverts et pris en charge par la plupart des navigateurs web modernes tels que Chrome, Firefox, Safari et Edge, les applications WebRTC peuvent être accessibles depuis des ordinateurs de bureau, des ordinateurs portables, des smartphones et des tablettes sans installations de plugins ou de logiciels supplémentaires. Cette compatibilité multiplateforme rend WebRTC accessible à de nombreux utilisateurs et permet aux développeurs de créer des applications qui fonctionnent sur différents appareils.
Démarrage avec WebRTC
Mise en place de l'environnement de développement
Pour commencer le développement avec WebRTC, vous avez besoin de quelques outils et bibliothèques. Assurez-vous d'avoir un éditeur de texte ou un environnement de développement intégré (IDE) pour écrire du code HTML, CSS et JavaScript. Les choix populaires incluent Visual Studio Code, Sublime Text ou Atom.
Ensuite, créez une structure HTML de base pour votre application WebRTC. Commencez par un modèle HTML5 standard qui inclut la déclaration <!DOCTYPE html>, les balises <html>, <head> et <body>. Dans la section <body>, ajoutez des conteneurs pour les éléments vidéo et tout autre composant nécessaire à votre application.
Pour activer les fonctionnalités WebRTC, incluez les fichiers JavaScript nécessaires. Les API WebRTC sont intégrées aux navigateurs modernes, donc vous n'avez pas besoin de bibliothèques externes. Cependant, vous pouvez utiliser une bibliothèque de signalisation comme Socket.IO ou un framework WebRTC comme SimpleWebRTC pour simplifier l'établissement des connexions et la gestion de la signalisation entre pairs.
Établissement d'une connexion pair à pair
Pour établir une connexion pair à pair avec WebRTC, créez une instance de l'objet RTCPeerConnection. Cet objet représente la connexion entre le pair local et un pair distant.
Conseil: Créer une instance de RTCPeerConnection
const peerConnection = new RTCPeerConnection();Lors de la création de RTCPeerConnection, configurez diverses options telles que les serveurs ICE (Interactive Connectivity Establishment) à utiliser pour la signalisation et la traversée NAT. Les serveurs ICE aident à établir des connexions directes entre pairs en fournissant les informations nécessaires pour la traversée NAT et les vérifications de connectivité.
Conseil: Configurer RTCPeerConnection avec des serveurs ICE
const configuration = {
iceServers: [
{ urls: 'stun:stun.example.com' },
{ urls: 'turn:turn.example.com', username: 'user', credential: 'password' }
]
};
const peerConnection = new RTCPeerConnection(configuration);Une fois que RTCPeerConnection est créé, gérez divers événements et changements d'état :
negotiationneeded: Déclenché lorsqu'une négociation de session est nécessaire.icecandidate: Déclenché lorsqu'un candidat ICE est généré.track: Indique qu'une nouvelle piste média (audio ou vidéo) a été ajoutée à la connexion.connectionstatechange: Reflète les changements dans l'état de la connexion pair à pair tels que "connecté", "déconnecté" ou "échoué".
En écoutant ces événements et en les gérant de manière appropriée, vous pouvez gérer le cycle de vie de la connexion pair à pair.
Conseil: Ajouter des écouteurs d'événements à RTCPeerConnection
peerConnection.addEventListener('negotiationneeded', handleNegotiationNeeded);
peerConnection.addEventListener('icecandidate', handleICECandidate);
peerConnection.addEventListener('track', handleTrackAdded);
peerConnection.addEventListener('connectionstatechange', handleConnectionStateChange);Avec votre environnement de développement configuré et la structure de base en place pour établir une connexion pair à pair, vous êtes prêt à commencer à construire votre application WebRTC en travaillant avec des flux média, en implémentant la signalisation et en créant des canaux de données pour une communication en temps réel.
Travailler avec les flux multimédias
Accès aux périphériques multimédias de l'utilisateur
Pour accéder aux périphériques multimédias de l'utilisateur comme la caméra et le microphone, utilisez la méthode getUserMedia() fournie par l'API WebRTC. Cette méthode demande à l'utilisateur la permission d'utiliser ses périphériques multimédias.
Conseil: Accès aux périphériques multimédias de l'utilisateur
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(stream => {
// Accès accordé, gérer le flux multimédia
})
.catch(error => {
// Accès refusé ou erreur survenue
});Lors de la demande d'accès aux périphériques multimédias, vous pouvez spécifier des contraintes pour contrôler la qualité et les paramètres des flux multimédias. Les contraintes peuvent inclure des propriétés comme la résolution vidéo, la fréquence d'images, ou des identifiants de périphériques spécifiques.
Conseil: Spécification de contraintes pour les flux multimédias
const constraints = {
audio: true,
video: {
width: 1280,
height: 720,
frameRate: 30
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
// Accès accordé avec les contraintes spécifiées
})
.catch(error => {
// Accès refusé ou erreur survenue
});Une fois l'accès aux périphériques multimédias accordé, la méthode getUserMedia() renvoie une promesse qui se résout avec un objet MediaStream. Cet objet représente le flux multimédia et contient des pistes pour l'audio et/ou la vidéo. Vous pouvez gérer les flux multimédias en accédant aux pistes individuelles à l'aide de la méthode getTracks(). Cela vous permet de contrôler des pistes spécifiques, comme les mettre en sourdine ou les arrêter.
Conseil: Gestion des flux multimédias
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(stream => {
const audioTracks = stream.getAudioTracks();
const videoTracks = stream.getVideoTracks();
// Mettre en sourdine la piste audio
audioTracks[0].enabled = false;
// Arrêter la piste vidéo
videoTracks[0].stop();
})
.catch(error => {
// Accès refusé ou erreur survenue
});Affichage et manipulation des médias
Pour afficher les flux multimédias, attachez-les aux éléments vidéo HTML en utilisant la propriété srcObject. Cette propriété accepte un objet MediaStream et le définit comme source pour votre élément vidéo.
Conseil: Attachement des flux multimédias aux éléments vidéo
<video id="localVideo" autoplay playsinline></video>Conseil: Affichage des flux multimédias
navigator.mediaDevices.getUserMedia({video: true})
.then(stream => {
const localVideo = document.getElementById('localVideo');
localVideo.srcObject = stream;
});WebRTC permet également d'appliquer des filtres et des effets aux vidéos en utilisant CSS ou JavaScript. Par exemple, vous pouvez utiliser des filtres CSS pour ajuster la luminosité, le contraste et appliquer un flou à votre élément vidéo.
Conseil: Utilisation de filtres CSS sur les éléments vidéo
video {
filter: brightness(1.2) contrast(0.8) blur(2px);
}JavaScript peut être utilisé pour manipuler les vidéos de manière programmatique. Vous pouvez accéder aux images individuelles d'une vidéo en utilisant un élément canvas et appliquer des filtres et effets personnalisés à l'aide de bibliothèques de traitement d'images comme OpenCV.js. L'enregistrement et la sauvegarde de vidéos sont possibles avec l'API MediaRecorder. Cette API permet d'enregistrer et de sauvegarder dans différents formats tels que WebM ou MP4.
Conseil: Enregistrement et sauvegarde des flux multimédias
const mediaRecorder = new MediaRecorder(stream);
const chunks = [];
mediaRecorder.addEventListener('dataavailable', event => {
chunks.push(event.data);
});
mediaRecorder.addEventListener('stop', () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
// Sauvegarder ou télécharger la vidéo enregistrée
});
mediaRecorder.start();
//...
mediaRecorder.stop();Signalisation et Communication
Comprendre les concepts de signalisation
La signalisation aide à établir et gérer les connexions WebRTC entre pairs. Elle implique l'échange d'informations pour coordonner la communication et négocier les paramètres de session. La signalisation est utilisée pour échanger les descriptions de session, les informations réseau et les capacités multimédia entre pairs.
WebRTC ne définit pas de protocole ou de méthode de signalisation spécifique. Au lieu de cela, il laisse le choix de l'implémentation de la signalisation au développeur. Les protocoles de signalisation courants incluent SIP (Session Initiation Protocol), XMPP (Extensible Messaging and Presence Protocol), et des protocoles personnalisés construits sur WebSocket ou HTTP.
Pour implémenter un serveur de signalisation simple, vous pouvez utiliser une technologie côté serveur comme Node.js avec une bibliothèque comme Socket.IO. Le serveur de signalisation agit comme un hub pour échanger des messages entre pairs. Il reçoit les messages d'un pair et les transmet au destinataire prévu.
Implémentation d'un serveur de signalisation simple utilisant Socket.IO
Conseil: Implementing a simple signaling server using Socket.IO
const io = require('socket.io')(server);
io.on('connection', socket => {
socket.on('offer', offer => {
socket.broadcast.emit('offer', offer);
});
socket.on('answer', answer => {
socket.broadcast.emit('answer', answer);
});
socket.on('candidate', candidate => {
socket.broadcast.emit('candidate', candidate);
});
});Le serveur écoute les événements offer, answer, et candidate des clients connectés. Lorsqu'il reçoit un message, il le diffuse à tous les autres clients connectés.
Échange de descriptions de session et de candidats
Pour établir une connexion WebRTC, les pairs doivent échanger des descriptions de session et des candidats ICE. Les descriptions de session contiennent des informations sur les capacités multimédia de chaque pair tandis que les candidats ICE contiennent des informations réseau pour établir une connexion directe.
Le processus implique la création d'une offre et d'une réponse. Le pair initiateur crée une offre en utilisant la méthode createOffer() de l'objet RTCPeerConnection. L'offre inclut les capacités multimédia du pair initiateur.
Création d'une offre
Conseil: Creating an offer
peerConnection.createOffer()
.then(offer => {
peerConnection.setLocalDescription(offer);
signalOffer(offer);
})
.catch(error => {
// Gérer l'erreur
});Après avoir créé l'offre, définissez-la comme votre description locale en utilisant setLocalDescription() puis envoyez-la au pair distant via votre serveur de signalisation.
Le pair distant reçoit cette offre puis la définit comme sa description distante en utilisant setRemoteDescription(). Il crée ensuite une réponse en utilisant createAnswer(), définit cette réponse comme sa description locale, puis renvoie cette réponse via votre serveur de signalisation.
Création d'une réponse
Conseil: Creating an answer
peerConnection.setRemoteDescription(offer)
.then(() => {
return peerConnection.createAnswer();
})
.then(answer => {
peerConnection.setLocalDescription(answer);
signalAnswer(answer);
})
.catch(error => {
// Gérer l'erreur
});Pendant ce processus d'échange, les candidats ICE sont générés par chaque pair contenant les informations réseau nécessaires pour établir des connexions directes qui sont également envoyées via vos serveurs de signalisation lorsqu'elles sont générées par les points d'extrémité de chaque côté respectivement.
Gestion des candidats ICE
Conseil: Handling ICE candidates
peerConnection.addEventListener('icecandidate', event => {
if(event.candidate) {
signalCandidate(event.candidate);
}
});
function handleCandidate(candidate) {
peerConnection.addIceCandidate(candidate)
.catch(error => {
// Gérer l'erreur
});
}Le pair distant ajoute les candidats ICE reçus dans sa connexion RTCPeer via la méthode addIceCandidate une fois que les échanges d'offre/réponse ainsi que les candidats Ice ont été complétés avec succès, établissant ainsi des communications directes permettant des transferts audio/vidéo/données directement entre eux sans plus d'intermédiaires impliqués.
Canaux de données
Création et gestion des canaux de données
Les canaux de données WebRTC permettent l'échange de données entre pairs en temps réel. Les canaux de données offrent un mécanisme de livraison fiable et ordonné, les rendant utiles pour créer des applications interactives comme le chat, le partage de fichiers ou des outils collaboratifs.
Pour créer un canal de données, utilisez la méthode createDataChannel() sur l'objet RTCPeerConnection. Spécifiez une étiquette pour le canal de données et fournissez éventuellement des options de configuration telles que le nombre maximum de retransmissions ou la garantie d'ordonnancement.
Conseil: Création d'un canal de données
const dataChannel = peerConnection.createDataChannel('chat', {
ordered: true,
maxRetransmits: 3
});Une fois un canal de données créé, vous pouvez envoyer des données en utilisant la méthode send(). Les données peuvent être une chaîne de caractères, un Blob, un ArrayBuffer, ou un ArrayBufferView. Pour recevoir des données, écoutez l'événement message sur le canal de données.
Conseil: Envoi et réception de données
// Envoi de données
dataChannel.send('Bonjour, WebRTC !');
// Réception de données
dataChannel.addEventListener('message', event => {
console.log('Reçu :', event.data);
});Pour fermer un canal de données, appelez la méthode close() sur l'objet. L'événement close sera déclenché lorsqu'il est fermé.
Conseil: Fermeture d'un canal de données
dataChannel.close();
dataChannel.addEventListener('close', () => {
console.log('Canal de données fermé');
});Il est important de gérer correctement les événements et les erreurs. Quelques événements courants incluent :
open: Déclenché quand il est ouvert et prêt.close: Déclenché quand il est fermé.error: Indique qu'une erreur s'est produite.
Conseil: Gestion des événements
dataChannel.addEventListener('open', () => {
console.log('Canal de données ouvert');
});
dataChannel.addEventListener('close', () => {
console.log('Canal de données fermé');
});
dataChannel.addEventListener('error', error => {
console.error('Erreur :', error);
});Implémentation d'applications en temps réel avec les canaux de données
Les canaux de données permettent le développement d'applications en temps réel qui nécessitent un échange à faible latence entre pairs. Voici quelques exemples :
Création d'une application de chat simple :
- Créez un canal pour chaque connexion entre pairs.
- Lors de l'envoi de messages, utilisez send().
- Du côté réception, écoutez l'événement message et affichez le message reçu.
- Gérez les événements comme open et close pour gérer l'état de la connexion.
Partage de fichiers :
- Créez un canal pour le partage de fichiers.
- Lors de la sélection des fichiers à partager, lisez-les avec l'API FileReader.
- Divisez le fichier en petits morceaux et envoyez chaque morceau via le canal en utilisant send().
- Du côté réception, écoutez l'événement message, accumulez les morceaux reçus et reconstruisez le fichier.
- Fournissez un moyen de sauvegarder ou télécharger le fichier reçu.
Collaboration sur des documents :
- Créez un canal pour la collaboration sur les documents.
- Lors de modifications du document, envoyez les changements sous forme de données structurées (par exemple, JSON) via le canal.
- Du côté réception, écoutez le message et appliquez les changements reçus à la copie locale du document.
- Utilisez la transformation opérationnelle ou une technique similaire pour gérer les modifications simultanées et maintenir la cohérence.
- Synchronisez l'état entre tous les pairs connectés. Voici la traduction en français :
Sujets avancés et bonnes pratiques
Considérations de sécurité
Lors de la création d'applications WebRTC, la sécurité est importante. WebRTC fournit un chiffrement intégré pour les flux de médias et de données. Pour préserver la confidentialité des communications des utilisateurs, WebRTC utilise le protocole SRTP (Secure Real-time Transport Protocol) pour le chiffrement des médias et le protocole DTLS (Datagram Transport Layer Security) pour échanger des clés en toute sécurité et établir des sessions chiffrées.
La gestion de la confidentialité des utilisateurs et de leur consentement est également importante. WebRTC nécessite une autorisation explicite de l'utilisateur pour accéder aux appareils multimédias comme la caméra et le microphone. Demandez toujours l'accès à ces appareils uniquement lorsque c'est nécessaire et fournissez des informations claires sur l'utilisation des données. Soyez transparent sur les pratiques de collecte de données et respectez les réglementations applicables en matière de confidentialité.
Pour vous protéger contre les vulnérabilités potentielles, maintenez vos bibliothèques WebRTC à jour. Mettez régulièrement à jour vers les dernières versions qui incluent des correctifs de sécurité et des corrections de bugs. De plus, mettez en place une validation appropriée des entrées pour prévenir les attaques comme le cross-site scripting (XSS) ou les vulnérabilités d'injection.
Techniques d'optimisation des performances
Pour réduire la latence et améliorer la qualité des communications WebRTC, vous pouvez appliquer plusieurs techniques d'optimisation des performances. Une approche consiste à utiliser la méthode getStats() de RTCPeerConnection pour collecter des statistiques sur la connexion, telles que le temps aller-retour (RTT), la perte de paquets et la bande passante.
Conseil: Utilisation de la méthode getStats()
const stats = await peerConnection.getStats();
stats.forEach(report => {
console.log(report.type, report)
});Sur la base de ces informations, vous pouvez ajuster le comportement de votre application en adaptant la résolution vidéo ou les paramètres du codec.
WebRTC vous permet de vous adapter aux conditions du réseau en utilisant les interfaces RTCRtpSender et RTCRtpReceiver. Ces interfaces vous permettent de contrôler les paramètres d'envoi des flux multimédias.
Conseil: Ajustement du débit binaire vidéo
const sender = peerConnection.getSenders()[0];
const parameters = sender.getParameters();
parameters.encodings[0].maxBitrate = 500000; // 500 kbps
sender.setParameters(parameters);La mise en place de mécanismes de gestion des erreurs est importante pour une expérience utilisateur fluide. WebRTC fournit des rappels d'erreur que vous pouvez utiliser pour détecter les erreurs avec élégance.
Conseil: Gestion de l'événement icecandidateerror
peerConnection.addEventListener('icecandidateerror', event => {
console.error('Erreur de candidat ICE:', event.errorText);
});Mettez en place des stratégies de repli comme la reconnexion ou le changement de serveurs si nécessaire.