diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/webrtc_api | |
parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip |
convert content to md
Diffstat (limited to 'files/fr/web/api/webrtc_api')
-rw-r--r-- | files/fr/web/api/webrtc_api/connectivity/index.md | 44 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/index.md | 352 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/session_lifetime/index.md | 26 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md | 392 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/taking_still_photos/index.md | 144 |
5 files changed, 496 insertions, 462 deletions
diff --git a/files/fr/web/api/webrtc_api/connectivity/index.md b/files/fr/web/api/webrtc_api/connectivity/index.md index 119cf898ff..c47168e0eb 100644 --- a/files/fr/web/api/webrtc_api/connectivity/index.md +++ b/files/fr/web/api/webrtc_api/connectivity/index.md @@ -6,46 +6,46 @@ tags: translation_of: Web/API/WebRTC_API/Connectivity original_slug: Web/Guide/API/WebRTC/WebRTC_architecture --- -<p>(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.</p> +(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent. -<h2 id="Qu’est-ce_que_ICE">Qu’est-ce que ICE?</h2> +## Qu’est-ce que ICE? -<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :</p> +[Interactive Connectivity Establishment (ICE)](http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment) est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir : -<h2 id="Qu’est-ce_que_STUN">Qu’est-ce que STUN?</h2> +## Qu’est-ce que STUN? -<p><a href="http://fr.wikipedia.org/wiki/Simple_Traversal_of_UDP_through_NATs">Session Traversal Utilities for NAT (STUN)</a> (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.</p> +[Session Traversal Utilities for NAT (STUN)](http://fr.wikipedia.org/wiki/Simple_Traversal_of_UDP_through_NATs) (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair. -<p>Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.</p> +Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT. -<h2 id="Qu’est-ce_que_NAT">Qu’est-ce que NAT?</h2> +## Qu’est-ce que NAT? -<p><a href="http://fr.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.</p> +[Network Address Translation (NAT)](http://fr.wikipedia.org/wiki/Network_address_translation) est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet. -<p>Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.</p> +Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN. -<h2 id="Qu’est-ce_que_TURN">Qu’est-ce que TURN?</h2> +## Qu’est-ce que TURN? -<p>Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.</p> +Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté. -<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.</p> +[Traversal Using Relays around NAT (TURN)](http://en.wikipedia.org/wiki/TURN) Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives. -<h2 id="Qu’est-ce_que_SDP">Qu’est-ce que SDP?</h2> +## Qu’est-ce que SDP? -<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.</p> +[Session Description Protocol (SDP)](http://en.wikipedia.org/wiki/Session_Description_Protocol) est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées. -<h2 id="Qu’est-ce_qu'une_OffreRéponse_et_un_Canal_de_Signal">Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?</h2> +## Qu’est-ce qu'une Offre/Réponse et un Canal de Signal? -<p>Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.</p> +Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble. -<p>L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.</p> +L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus. -<p>Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.</p> +Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal. -<h2 id="Qu’est-ce_qu’un_candidat_ICE">Qu’est-ce qu’un candidat ICE?</h2> +## Qu’est-ce qu’un candidat ICE? -<p>Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).</p> +Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN). -<h2 id="L'échange_entier_dans_un_diagramme_compliqué">L'échange entier dans un diagramme compliqué</h2> +## L'échange entier dans un diagramme compliqué -<p><a href="https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms/"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="webrtc-complete-diagram.png"></a></p>
\ No newline at end of file +[![Un schéma architectural complet montrant l'ensemble du processus WebRTC.](webrtc-complete-diagram.png)](https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms/) diff --git a/files/fr/web/api/webrtc_api/index.md b/files/fr/web/api/webrtc_api/index.md index 99c684f479..331e3d27ea 100644 --- a/files/fr/web/api/webrtc_api/index.md +++ b/files/fr/web/api/webrtc_api/index.md @@ -14,197 +14,161 @@ tags: - diffusion translation_of: Web/API/WebRTC_API --- -<div>{{APIRef("WebRTC")}}</div> - -<p><strong>WebRTC</strong> (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.</p> -<p>L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.</p> - -<p>WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenir. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.</p> - -<h2 id="Concepts_et_utilisation_du_WebRTC">Concepts et utilisation du WebRTC</h2> - -<p>WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.</p> - -<p>Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.</p> - -<p>Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).</p> - -<p>Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.</p> - -<p><em><strong>plus de détails et de liens vers des guides et didacticiels pertinents nécessaires</strong></em></p> - -<h2 id="Interfaces_WebRTC">Interfaces WebRTC</h2> - -<p>Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.</p> - -<h3 id="Configuration_et_gestion_de_la_connexion">Configuration et gestion de la connexion</h3> - -<p>Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.</p> - -<dl> - <dt>{{domxref("RTCPeerConnection")}}</dt> - <dd>Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.</dd> - <dt>{{domxref("RTCDataChannel")}}</dt> - <dd>Représente un canal de données bidirectionnel entre deux homologues d'une connexion.</dd> - <dt>{{domxref("RTCDataChannelEvent")}}</dt> - <dd>Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.</dd> - <dt>{{domxref("RTCSessionDescription")}}</dt> - <dd>Représente les paramètres d'une session. Chaque <code>RTCSessionDescription</code> se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.</dd> - <dt>{{domxref("RTCSessionDescriptionCallback")}}</dt> - <dd>Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.</dd> - <dt>{{domxref("RTCStatsReport")}}</dt> - <dd>Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.</dd> - <dt>{{domxref("RTCIceCandidate")}}</dt> - <dd>Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCIceTransport")}}</dt> - <dd>Représente des informations sur un transport d'établissement de connectivité Internet (ICE).</dd> - <dt>{{domxref("RTCIceServer")}}</dt> - <dd>Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).</dd> - <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt> - <dd>Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.</dd> - <dt>{{domxref("RTCRtpSender")}}</dt> - <dd>Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCRtpReceiver")}}</dt> - <dd>Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCRtpContributingSource")}}</dt> - <dd>Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.</dd> - <dt>{{domxref("RTCTrackEvent")}}</dt> - <dd>Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCConfiguration")}}</dt> - <dd>Utilisé pour fournir des options de configuration pour un <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>.</dd> -</dl> - -<dl> - <dt>{{domxref("RTCSctpTransport")}}</dt> - <dd>Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) sur lequel les paquets SCTP pour tous les canaux de données d'un <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd> -</dl> - -<h3 id="Identité_et_sécurité">Identité et sécurité</h3> - -<p>L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.</p> - -<dl> - <dt>{{domxref("RTCIdentityProvider")}}</dt> - <dd>Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.</dd> - <dt>{{domxref("RTCIdentityAssertion")}}</dt> - <dd>Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie <code>null</code>. Une fois défini, il ne peut pas être modifié.</dd> - <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt> - <dd>Enregistre un fournisseur d'identité (idP).</dd> - <dt>{{domxref("RTCIdentityEvent")}}</dt> - <dd>Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.</dd> - <dt>{{domxref("RTCIdentityErrorEvent")}}</dt> - <dd>Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.</dd> - <dt>{{domxref("RTCCertificate")}}</dt> - <dd>Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.</dd> -</dl> - -<h3 id="Téléphonie">Téléphonie</h3> - -<p>Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).</p> - -<dl> - <dt>{{domxref("RTCDTMFSender")}}</dt> - <dd>Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt> - <dd>Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).</dd> -</dl> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Protocols">Introduction aux protocoles WebRTC</a></dt> - <dd>Cet article présente les protocoles sur lesquels l'API WebRTC est construite.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Connectivity">Connectivité WebRTC</a></dt> - <dd>Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Session_lifetime">Durée de vie d'une session WebRTC</a></dt> - <dd>WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signalisation et appel vidéo bidirectionnel</a></dt> - <dd>Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Using_data_channels">Utilisation des canaux de données WebRTC</a></dt> - <dd>Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Using_DTMF">Utilisation de DTMF avec WebRTC</a></dt> - <dd>La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.</dd> -</dl> - -<h2 id="Tutoriels">Tutoriels</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/WebRTC_API/adapter.js">Amélioration de la compatibilité à l'aide de WebRTC adapter.js</a></dt> - <dd>L'organisation WebRTC <a href="https://github.com/webrtc/adapter/">fournit sur GitHub l'adaptateur WebRTC</a> pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des photos fixes avec WebRTC</a></dt> - <dd>Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.</dd> - <dt><a href="/fr/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Un exemple RTCDataChannel simple</a></dt> - <dd>L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'<a href="/fr/docs/Web/API/WebSockets_API">API WebSocket</a>, de sorte que le même modèle de programmation peut être utilisé pour chacun.</dd> -</dl> - -<h2 id="Ressources">Ressources</h2> - -<h3 id="Protocoles">Protocoles</h3> - -<h4 id="Protocoles_propres_au_WebRTC">Protocoles propres au WebRTC</h4> - -<ul> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/">Négociation de protocole de couche application pour les communications Web en temps réel</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/">Codec audio WebRTC et exigences de traitement</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/">Canaux de données RTCWeb</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/">Protocole de canal de données RTCWeb</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/">Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/">Architecture de sécurité WebRTC</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/">Transports pour RTCWEB</a></li> -</ul> - -<h4 id="Protocoles_de_support_associés">Protocoles de support associés</h4> - -<ul> - <li><a href="https://tools.ietf.org/html/rfc5245">Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse</a></li> - <li><a href="https://tools.ietf.org/html/rfc5389">Utilitaires de traversée de session pour NAT (STUN)</a></li> - <li><a href="https://tools.ietf.org/html/rfc7064">Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</a></li> - <li><a href="https://tools.ietf.org/html/rfc7065">Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</a></li> - <li><a href="https://tools.ietf.org/html/rfc3264">Un modèle d'offre / réponse avec protocole de description de session (SDP)</a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/">Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</a></li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebRTC 1.0')}}</td> - <td>{{Spec2('WebRTC 1.0')}}</td> - <td>La définition initiale de l'API de WebRTC.</td> - </tr> - <tr> - <td>{{SpecName('Media Capture')}}</td> - <td>{{Spec2('Media Capture')}}</td> - <td>La définition initiale de l'objet véhiculant le flux de contenu multimédia.</td> - </tr> - <tr> - <td>{{SpecName('Media Capture DOM Elements')}}</td> - <td>{{Spec2('Media Capture DOM Elements')}}</td> - <td>La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM</td> - </tr> - </tbody> -</table> - -<p>En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous <a href="#Protocols">ressources</a>.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("MediaDevices")}}</li> - <li>{{domxref("MediaStreamEvent")}}</li> - <li>{{domxref("MediaStreamConstraints")}}</li> - <li>{{domxref("MediaStreamTrack")}}</li> - <li>{{domxref("MessageEvent")}}</li> - <li>{{domxref("MediaStream")}}</li> - <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multi-flux et renégociation pour Jitsi Videobridge</a></li> - <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering via le brouillard WebRTC avec SocketPeer</a></li> - <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">À l'intérieur du bus de fête: création d'une application Web avec plusieurs flux vidéo en direct + graphiques interactifs</a></li> -</ul> +{{APIRef("WebRTC")}} + +**WebRTC** (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire. + +L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers. + +WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenir. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore. + +## Concepts et utilisation du WebRTC + +WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire. + +Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion. + +Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu). + +Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données. + +**_plus de détails et de liens vers des guides et didacticiels pertinents nécessaires_** + +## Interfaces WebRTC + +Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique. + +### Configuration et gestion de la connexion + +Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC. + +- {{domxref("RTCPeerConnection")}} + - : Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs. +- {{domxref("RTCDataChannel")}} + - : Représente un canal de données bidirectionnel entre deux homologues d'une connexion. +- {{domxref("RTCDataChannelEvent")}} + - : Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}. +- {{domxref("RTCSessionDescription")}} + - : Représente les paramètres d'une session. Chaque `RTCSessionDescription` se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session. +- {{domxref("RTCSessionDescriptionCallback")}} + - : Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses. +- {{domxref("RTCStatsReport")}} + - : Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}. +- {{domxref("RTCIceCandidate")}} + - : Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}. +- {{domxref("RTCIceTransport")}} + - : Représente des informations sur un transport d'établissement de connectivité Internet (ICE). +- {{domxref("RTCIceServer")}} + - : Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN). +- {{domxref("RTCPeerConnectionIceEvent")}} + - : Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}. +- {{domxref("RTCRtpSender")}} + - : Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}. +- {{domxref("RTCRtpReceiver")}} + - : Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}. +- {{domxref("RTCRtpContributingSource")}} + - : Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu. +- {{domxref("RTCTrackEvent")}} + - : Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}. +- {{domxref("RTCConfiguration")}} + - : Utilisé pour fournir des options de configuration pour un [`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection). + +<!----> + +- {{domxref("RTCSctpTransport")}} + - : Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (**{{Glossary("SCTP")}}**) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (**{{Glossary("DTLS")}}**) sur lequel les paquets SCTP pour tous les canaux de données d'un [`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection) sont envoyés et reçus. + +### Identité et sécurité + +L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité. + +- {{domxref("RTCIdentityProvider")}} + - : Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée. +- {{domxref("RTCIdentityAssertion")}} + - : Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie `null`. Une fois défini, il ne peut pas être modifié. +- {{domxref("RTCIdentityProviderRegistrar")}} + - : Enregistre un fournisseur d'identité (idP). +- {{domxref("RTCIdentityEvent")}} + - : Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}. +- {{domxref("RTCIdentityErrorEvent")}} + - : Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}. +- {{domxref("RTCCertificate")}} + - : Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier. + +### Téléphonie + +Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC). + +- {{domxref("RTCDTMFSender")}} + - : Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}. +- {{domxref("RTCDTMFToneChangeEvent")}} + - : Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire). + +## Guides + +- [Introduction aux protocoles WebRTC](/fr/docs/Web/API/WebRTC_API/Protocols) + - : Cet article présente les protocoles sur lesquels l'API WebRTC est construite. +- [Connectivité WebRTC](/fr/docs/Web/API/WebRTC_API/Connectivity) + - : Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication. +- [Durée de vie d'une session WebRTC](/fr/docs/Web/API/WebRTC_API/Session_lifetime) + - : WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire. +- [Signalisation et appel vidéo bidirectionnel](/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling) + - : Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC. +- [Utilisation des canaux de données WebRTC](/fr/docs/Web/API/WebRTC_API/Using_data_channels) + - : Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues. +- [Utilisation de DTMF avec WebRTC](/fr/docs/Web/API/WebRTC_API/Using_DTMF) + - : La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder. + +## Tutoriels + +- [Amélioration de la compatibilité à l'aide de WebRTC adapter.js](/fr/docs/Web/API/WebRTC_API/adapter.js) + - : L'organisation WebRTC [fournit sur GitHub l'adaptateur WebRTC](https://github.com/webrtc/adapter/) pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC. +- [Prendre des photos fixes avec WebRTC](/fr/docs/Web/API/WebRTC_API/Taking_still_photos) + - : Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec. +- [Un exemple RTCDataChannel simple](/fr/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample) + - : L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'[API WebSocket](/fr/docs/Web/API/WebSockets_API), de sorte que le même modèle de programmation peut être utilisé pour chacun. + +## Ressources + +### Protocoles + +#### Protocoles propres au WebRTC + +- [Négociation de protocole de couche application pour les communications Web en temps réel](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/) +- [Codec audio WebRTC et exigences de traitement](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/) +- [Canaux de données RTCWeb](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/) +- [Protocole de canal de données RTCWeb](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/) +- [Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/) +- [Architecture de sécurité WebRTC](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/) +- [Transports pour RTCWEB](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/) + +#### Protocoles de support associés + +- [Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse](https://tools.ietf.org/html/rfc5245) +- [Utilitaires de traversée de session pour NAT (STUN)](https://tools.ietf.org/html/rfc5389) +- [Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)](https://tools.ietf.org/html/rfc7064) +- [Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)](https://tools.ietf.org/html/rfc7065) +- [Un modèle d'offre / réponse avec protocole de description de session (SDP)](https://tools.ietf.org/html/rfc3264) +- [Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers](https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/) + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------- | +| {{SpecName('WebRTC 1.0')}} | {{Spec2('WebRTC 1.0')}} | La définition initiale de l'API de WebRTC. | +| {{SpecName('Media Capture')}} | {{Spec2('Media Capture')}} | La définition initiale de l'objet véhiculant le flux de contenu multimédia. | +| {{SpecName('Media Capture DOM Elements')}} | {{Spec2('Media Capture DOM Elements')}} | La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM | + +En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous [ressources](#Protocols). + +## Voir aussi + +- {{domxref("MediaDevices")}} +- {{domxref("MediaStreamEvent")}} +- {{domxref("MediaStreamConstraints")}} +- {{domxref("MediaStreamTrack")}} +- {{domxref("MessageEvent")}} +- {{domxref("MediaStream")}} +- [Firefox multi-flux et renégociation pour Jitsi Videobridge](https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/) +- [Peering via le brouillard WebRTC avec SocketPeer](https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/) +- [À l'intérieur du bus de fête: création d'une application Web avec plusieurs flux vidéo en direct + graphiques interactifs](https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/) diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.md b/files/fr/web/api/webrtc_api/session_lifetime/index.md index 7bc9c98dab..e12bc0af64 100644 --- a/files/fr/web/api/webrtc_api/session_lifetime/index.md +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.md @@ -4,28 +4,24 @@ slug: Web/API/WebRTC_API/Session_lifetime translation_of: Web/API/WebRTC_API/Session_lifetime original_slug: WebRTC/Introduction --- -<div class="note"> - <p><strong>Note :</strong> WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p> -</div> +> **Note :** WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur. -<h2 id="Etablir_la_connexion">Etablir la connexion</h2> +## Etablir la connexion -<p>La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.</p> +La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données. -<h3 id="Signalisation">Signalisation</h3> +### Signalisation -<p>La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'<a href="https://developers.google.com/appengine/docs/python/channel/overview">API Google Channel</a>) pour AppEngine.</p> +La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'[API Google Channel](https://developers.google.com/appengine/docs/python/channel/overview)) pour AppEngine. -<h2 id="Transmission">Transmission</h2> +## Transmission -<h3 id="getUserMedia">getUserMedia</h3> +### getUserMedia -<p>Objet LocalMediaStream</p> +Objet LocalMediaStream -<h2 id="Reception">Reception</h2> +## Reception -<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.</p> +Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'. -<div class="note"> - <p><strong>Note :</strong> Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p> -</div> +> **Note :** Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: [dom/media/tests/local_video_test.html](http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html). Essayez aussi la [demo de service d'appel](http://webrtc-demo.herokuapp.com/mozdemo), sa page source, et son [serveur source](https://github.com/anantn/webrtc-demo/). diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md index a4b67ab853..1e5bd79f1c 100644 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -7,219 +7,234 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling translation_of_original: Web/API/WebRTC_API/WebRTC_basics original_slug: Web/Guide/API/WebRTC/WebRTC_basics --- -<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">architecture WebRTC</a>, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne</p> +Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne -<h2 id="Contenu_semi-ancien_à_partir_de_RTCPeerConnection">Contenu semi-ancien, à partir de RTCPeerConnection</h2> +## Contenu semi-ancien, à partir de RTCPeerConnection -<p>Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.</p> +Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. -<h2 id="Usage_basique">Usage basique</h2> +## Usage basique -<p>l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.</p> +l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. -<p>Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:</p> +Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer: -<pre class="notranslate"><code>var pc = new RTCPeerConnection(); -pc.onaddstream = function(obj) { - var vid = document.createElement("video"); - document.appendChild(vid); - vid.srcObject = obj.stream; -} + var pc = new RTCPeerConnection(); + pc.onaddstream = function(obj) { + var vid = document.createElement("video"); + document.appendChild(vid); + vid.srcObject = obj.stream; + } -// Helper functions -function endCall() { - var videos = document.getElementsByTagName("video"); - for (var i = 0; i < videos.length; i++) { - videos[i].pause(); - } + // Helper functions + function endCall() { + var videos = document.getElementsByTagName("video"); + for (var i = 0; i < videos.length; i++) { + videos[i].pause(); + } - pc.close(); -} + pc.close(); + } -function error(err) { - endCall(); -}</code></pre> + function error(err) { + endCall(); + } -<p><strong>Initialiser un appel</strong></p> +**Initialiser un appel** -<p>l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.</p> +l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. -<pre class="notranslate"><code>// recuperer la liste des "amis" a partir du serveur -// l'utilisateur selectionne un amis avec qui lancer la connection -navigator.getUserMedia({video: true}, function(stream) { - // l'ajout d'un stream locale ne declanche pas onaddstream, - // donc il faut l'appeler manuellement. - pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); - pc.addStream(stream); + // recuperer la liste des "amis" a partir du serveur + // l'utilisateur selectionne un amis avec qui lancer la connection + navigator.getUserMedia({video: true}, function(stream) { + // l'ajout d'un stream locale ne declanche pas onaddstream, + // donc il faut l'appeler manuellement. + pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); + pc.addStream(stream); - pc.createOffer(function(offer) { - pc.setLocalDescription(offer, function() { - // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment. - }, error); - }, error); -});</code></pre> + pc.createOffer(function(offer) { + pc.setLocalDescription(offer, function() { + // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment. + }, error); + }, error); + }); -<p><strong>Répondre à un appel</strong></p> +**Répondre à un appel** -<p>sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p> +sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. -<p>Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.</p> +Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. -<pre class="notranslate"><code>var offer = getOfferFromFriend(); -navigator.getUserMedia({video: true}, function(stream) { - pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); - pc.addStream(stream); + var offer = getOfferFromFriend(); + navigator.getUserMedia({video: true}, function(stream) { + pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); + pc.addStream(stream); - pc.setRemoteDescription(new RTCSessionDescription(offer), function() { - pc.createAnswer(function(answer) { - pc.setLocalDescription(answer, function() { - // envoi de la réponse au serveur qui la transmettra a l'appelant + pc.setRemoteDescription(new RTCSessionDescription(offer), function() { + pc.createAnswer(function(answer) { + pc.setLocalDescription(answer, function() { + // envoi de la réponse au serveur qui la transmettra a l'appelant + }, error); + }, error); }, error); - }, error); - }, error); -});</code></pre> + }); -<p><strong>Gestion de la réponse</strong></p> +**Gestion de la réponse** -<p>retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. </p> +retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. -<pre class="notranslate"><code>// pc a été déclaré </code>précédemment<code>, lors de l'envoi de l'offre. -var offer = getResponseFromFriend(); -pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);</code></pre> + // pc a été déclaré précédemment, lors de l'envoi de l'offre. + var offer = getResponseFromFriend(); + pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error); -<h2 id="Ancien_contenu_en_approche!">Ancien contenu en approche!</h2> +## Ancien contenu en approche! -<p>Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.</p> +Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides. -<div class="note"> -<p><strong>Note :</strong> Ne pas utiliser les examples de cette page. Voir l'article <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">signalisation et appel vidéo</a> ,pour des example mis a jour sur l'utilisation des medias WebRTC.</p> -</div> +> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. -<h2 id="Note">Note</h2> +## Note -<p>Cette page contient des informations périmées selon <a href="http://stackoverflow.com/a/25065359/3760500">http://stackoverflow.com/a/25065359/3760500</a></p> +Cette page contient des informations périmées selon <http://stackoverflow.com/a/25065359/3760500> -<blockquote> -<p>Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.</p> -</blockquote> +> Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense. -<h2 id="Shims_Bibliothèque_d’interception_d’API">Shims (Bibliothèque d’interception d’API)</h2> +## Shims (Bibliothèque d’interception d’API) -<p>Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.</p> +Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes. -<pre class="brush: js">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; +```js +var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; -navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> +navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; +``` -<h2 id="PeerConnection">PeerConnection</h2> +## PeerConnection -<p>C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.</p> +C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion. -<pre class="brush: js">var pc = new PeerConnection(configuration, options);</pre> +```js +var pc = new PeerConnection(configuration, options); +``` -<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> +### **`RTCConfiguration`** -<p>L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.</p> +L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu. -<pre class="brush: js">var configuration = { +```js +var configuration = { iceServers: [ {url: "stun:23.21.150.121"}, {url: "stun:stun.l.google.com:19302"}, {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} ] -}</pre> +} +``` -<p>Google met à disposition un <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">serveur STUN public</a> que nous pouvons utiliser. J'ai également créé un compte chez http://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.</p> +Google met à disposition un [serveur STUN public](https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list) que nous pouvons utiliser. J'ai également créé un compte chez http\://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification. -<h3 id="options_Cf._Note_avant"><strong><code>options</code></strong> (Cf. "Note" avant)</h3> +### **`options`** (Cf. "Note" avant) -<p>Selon le type de connexion, vous devez passer des options.</p> +Selon le type de connexion, vous devez passer des options. -<pre class="brush: js">var options = { +```js +var options = { optional: [ {DtlsSrtpKeyAgreement: true}, {RtpDataChannels: true} ] -}</pre> +} +``` -<p><code>DtlsSrtpKeyAgreement</code> est exigé pour Chrome et Firefox pour interagir.</p> +`DtlsSrtpKeyAgreement` est exigé pour Chrome et Firefox pour interagir. -<p><code>RtpDataChannels</code> est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.</p> +`RtpDataChannels` est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox. -<h2 id="ICECandidate">ICECandidate</h2> +## ICECandidate -<p>Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.</p> +Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate. -<pre class="brush: js">pc.onicecandidate = function (e) { +```js +pc.onicecandidate = function (e) { // candidate exists in e.candidate if (e.candidate == null) { return } send("icecandidate", JSON.stringify(e.candidate)); pc.onicecandidate = null; -};</pre> +}; +``` -<p>Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.</p> +Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP. -<h2 id="Canal_de_Signal">Canal de Signal</h2> +## Canal de Signal -<p>Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…</p> +Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées… -<p>C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser <a href="http://firebase.com">FireBase</a> parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.</p> +C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser [FireBase](http://firebase.com) parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur. -<p>Pour l'instant imaginez seulement que deux méthodes existent: <code>send()</code> va prendre une clé et lui affecter des données et <code>recv()</code> appelle un descripteur lorsqu'une clé a une valeur.</p> +Pour l'instant imaginez seulement que deux méthodes existent: `send()` va prendre une clé et lui affecter des données et `recv()` appelle un descripteur lorsqu'une clé a une valeur. -<p>La structure de la base de données ressemble à ceci :</p> +La structure de la base de données ressemble à ceci : -<pre class="brush: js">{ +```js +{ "": { "candidate:": … "offer": … "answer": … } -}</pre> +} +``` -<p>Les connexions sont divisées par un <code>roomId</code> et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.</p> +Les connexions sont divisées par un `roomId` et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP. -<h2 id="Offre">Offre</h2> +## Offre -<p>Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).</p> +Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc). -<p>Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.</p> +Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse. -<pre class="brush: js">pc.createOffer(function (offer) { +```js +pc.createOffer(function (offer) { pc.setLocalDescription(offer); send("offer", JSON.stringify(offer)); -}, errorHandler, constraints);</pre> +}, errorHandler, constraints); +``` -<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3> +### **`errorHandler`** -<p>S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.</p> +S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument. -<pre class="brush: js">var errorHandler = function (err) { +```js +var errorHandler = function (err) { console.error(err); -};</pre> +}; +``` -<h3 id="constraints"><strong><code>constraints</code></strong></h3> +### **`constraints`** -<p>Options pour l'offre SDP.</p> +Options pour l'offre SDP. -<pre class="brush: js">var constraints = { +```js +var constraints = { mandatory: { OfferToReceiveAudio: true, OfferToReceiveVideo: true } -};</pre> +}; +``` -<p><code>OfferToReceiveAudio/Video</code> Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.</p> +`OfferToReceiveAudio/Video` Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels. -<p>Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.</p> +Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP. -<h2 id="Réponse">Réponse</h2> +## Réponse -<p>Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.</p> +Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre. -<pre class="brush: js">recv("offer", function (offer) { +```js +recv("offer", function (offer) { offer = new SessionDescription(JSON.parse(offer)) pc.setRemoteDescription(offer); @@ -228,132 +243,147 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || send("answer", JSON.stringify(answer)); }, errorHandler, constraints); -});</pre> +}); +``` -<h2 id="DataChannel">DataChannel</h2> +## DataChannel -<p>J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.</p> +J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs. -<p><em>Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.</em></p> +_Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt._ -<pre class="brush: js">var channel = pc.createDataChannel(channelName, channelOptions);</pre> +```js +var channel = pc.createDataChannel(channelName, channelOptions); +``` -<p>L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) <code>ondatachannel</code> dans le PeerConnection. Vous devez appeler <code>createDataChannel()</code> une fois avant de créer l'offre.</p> +L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) `ondatachannel` dans le PeerConnection. Vous devez appeler `createDataChannel()` une fois avant de créer l'offre. -<h3 id="channelName"><strong><code>channelName</code></strong></h3> +### **`channelName`** -<p>Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. <em>AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur <code>createAnswer()</code>.</em></p> +Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. _AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur `createAnswer()`._ -<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3> +### **`channelOptions`** -<pre class="brush: js">var channelOptions = {};</pre> +```js +var channelOptions = {}; +``` -<p>Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> pour plus d'informations sur les options.</p> +Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le [RFC](http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7) pour plus d'informations sur les options. -<h3 id="Méthodes_et_événements_de_canal">Méthodes et événements de canal</h3> +### Méthodes et événements de canal -<h4 id="onopen"><strong><code>onopen</code></strong></h4> +#### **`onopen`** -<p>Exécuté lorsque la connexion est établie.</p> +Exécuté lorsque la connexion est établie. -<h4 id="onerror"><strong><code>onerror</code></strong></h4> +#### **`onerror`** -<p>Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.</p> +Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur. -<pre class="brush: js">channel.onerror = function (err) { +```js +channel.onerror = function (err) { console.error("Channel Error:", err); -};</pre> +}; +``` -<h4 id="onmessage"><strong><code>onmessage</code></strong></h4> +#### **`onmessage`** -<pre class="brush: js">channel.onmessage = function (e) { +```js +channel.onmessage = function (e) { console.log("Got message:", e.data); -}</pre> +} +``` -<p>Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.</p> +Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations. -<h4 id="onclose"><strong><code>onclose</code></strong></h4> +#### **`onclose`** -<p>Exécuté si l'autre pair ferme la connexion.</p> +Exécuté si l'autre pair ferme la connexion. -<h3 id="Lier_les_événements"><strong>Lier les événements</strong></h3> +### **Lier les événements** -<p>Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec <code>createChannel</code>. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback <code>ondatachannel</code> dans le PeerConnection afin d'accéder au même canal.</p> +Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec `createChannel`. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback `ondatachannel` dans le PeerConnection afin d'accéder au même canal. -<pre class="brush: js">pc.ondatachannel = function (e) { +```js +pc.ondatachannel = function (e) { e.channel.onmessage = function () { … }; -};</pre> +}; +``` -<p>Le canal est disponible dans l’objet événement passé dans le descripteur en tant que <code>e.channel</code>.</p> +Le canal est disponible dans l’objet événement passé dans le descripteur en tant que `e.channel`. -<h4 id="send"><strong><code>send()</code></strong></h4> +#### **`send()`** -<pre class="brush: js">channel.send("Hi Peer!");</pre> +```js +channel.send("Hi Peer!"); +``` -<p>Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.</p> +Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets. -<h4 id="close"><strong><code>close()</code></strong></h4> +#### **`close()`** -<p>Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.</p> +Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page. -<h2 id="Media">Media</h2> +## Media -<p>Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag <code><video></code> dans le document avec l'attribut <code>autoplay</code>.</p> +Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag `<video>` dans le document avec l'attribut `autoplay`. -<h3 id="Obtenir_les_médias_de_lutilisateur">Obtenir les médias de l'utilisateur</h3> +### Obtenir les médias de l'utilisateur -<pre class="brush: js"><video id="preview" autoplay></video> +```js +<video id="preview" autoplay></video> var video = document.getElementById("preview"); navigator.getUserMedia(mediaOptions, function (stream) { video.src = URL.createObjectURL(stream); -}, errorHandler);</pre> +}, errorHandler); +``` -<p><strong><code>mediaOptions</code></strong></p> +**`mediaOptions`** -<p>Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.</p> +Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur. -<pre class="brush: js">var mediaOptions = { +```js +var mediaOptions = { video: true, audio: true -};</pre> +}; +``` -<p>Si vous voulez juste une conversation audio, supprimez la clé <code>video</code>.</p> +Si vous voulez juste une conversation audio, supprimez la clé `video`. -<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4> +#### **`errorHandler`** -<p>Exécuté s'il y a une erreur retournée par le support demandé.</p> +Exécuté s'il y a une erreur retournée par le support demandé. -<h3 id="Événements_Médias_et_Méthodes">Événements Médias et Méthodes</h3> +### Événements Médias et Méthodes -<h4 id="addStream"><strong><code>addStream</code></strong></h4> +#### **`addStream`** -<p>Ajoute le flux de <code>getUserMedia</code> au PeerConnection.</p> +Ajoute le flux de `getUserMedia` au PeerConnection. -<pre class="brush: js">pc.addStream(stream);</pre> +```js +pc.addStream(stream); +``` -<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4> +#### **`onaddstream`** -<pre class="brush: js"><video id="otherPeer" autoplay></video> +```js +<video id="otherPeer" autoplay></video> var otherPeer = document.getElementById("otherPeer"); pc.onaddstream = function (e) { otherPeer.src = URL.createObjectURL(e.stream); -};</pre> +}; +``` -<p>Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec <code>addStream</code>. Vous avez besoin d'un autre tag <code><video></code> pour afficher les médias de l'autre pair.</p> +Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec `addStream`. Vous avez besoin d'un autre tag `<video>` pour afficher les médias de l'autre pair. -<p>Le premier argument est un objet d'événement avec les flux de média de l'autre pair.</p> +Le premier argument est un objet d'événement avec les flux de média de l'autre pair. -<h2 id="Afficher_la_Source">Afficher la Source</h2> +## Afficher la Source -<p>Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à <a href="http://github.com/louisstow/WebRTC">mon repo WebRTC</a>.</p> +Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à [mon repo WebRTC](http://github.com/louisstow/WebRTC). -<ul> - <li> - <p><strong>Exemple de DataChannels :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/datachannels.html">code</a>, <a href="http://louisstow.github.io/WebRTC/datachannels.html">demo</a></p> - </li> - <li> - <p><strong>Exemple de média :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/media.html">code</a>, <a href="http://louisstow.github.io/WebRTC/media.html">demo</a></p> - </li> -</ul> +- **Exemple de DataChannels :** [code](https://github.com/louisstow/WebRTC/blob/master/datachannels.html), [demo](http://louisstow.github.io/WebRTC/datachannels.html) +- **Exemple de média :** [code](https://github.com/louisstow/WebRTC/blob/master/media.html), [demo](http://louisstow.github.io/WebRTC/media.html) diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.md b/files/fr/web/api/webrtc_api/taking_still_photos/index.md index 26e4bde58c..95aca76612 100644 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.md +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.md @@ -9,18 +9,27 @@ tags: translation_of: Web/API/WebRTC_API/Taking_still_photos original_slug: WebRTC/Prendre_des_photos_avec_la_webcam --- -<h2 id="Introduction_et_demo">Introduction et demo</h2> -<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/">en demo</a>.</p> -<h2 id="Les_balises_HTML">Les balises HTML</h2> -<p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p> -<pre class="brush:html;"><video id="video"></video> -<button id="startbutton">Prendre une photo</button> -<canvas id="canvas"></canvas> -<img src="http://placekitten.com/g/320/261" id="photo" alt="photo"> -</pre> -<h2 id="Le_script_complet">Le script complet</h2> -<p>Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.</p> -<pre class="brush:js;">(function() { +## Introduction et demo + +Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir [le code final en action dans JSFiddle](http://jsfiddle.net/codepo8/agaRe/4/). Il y a aussi une version plus avancée pour charger des photos sur **imgur** en JavaScript, disponible en [code source sur GitHub](https://github.com/codepo8/interaction-cam/) ou [en demo](http://codepo8.github.com/interaction-cam/). + +## Les balises HTML + +La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam. + +```html +<video id="video"></video> +<button id="startbutton">Prendre une photo</button> +<canvas id="canvas"></canvas> +<img src="http://placekitten.com/g/320/261" id="photo" alt="photo"> +``` + +## Le script complet + +Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après. + +```js +(function() { var streaming = false, video = document.querySelector('#video'), @@ -79,11 +88,17 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam ev.preventDefault(); }, false); -})();</pre> -<h2 id="Les_explications_pas_à_pas.">Les explications pas à pas.</h2> -<p>Voici ce qui se passe.</p> -<h3 id="Fonction_anonyme">Fonction anonyme</h3> -<pre class="brush:js;">(function() { +})(); +``` + +## Les explications pas à pas. + +Voici ce qui se passe. + +### Fonction anonyme + +```js +(function() { var streaming = false, video = document.querySelector('#video'), @@ -92,19 +107,28 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam photo = document.querySelector('#photo'), startbutton = document.querySelector('#startbutton'), width = 320, - height = 0;</pre> -<p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p> -<div class="warning"> - <p><strong>Attention :</strong> À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p> -</div> -<h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3> -<p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p> -<pre class="brush:js;"> navigator.getMedia = ( navigator.getUserMedia || + height = 0; +``` + +Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard. + +> **Attention :** À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises. + +### Obtenir la vidéo + +Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée: + +```js + navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || - navigator.msGetUserMedia);</pre> -<p>Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:</p> -<pre class="brush:js;"> navigator.getMedia( + navigator.msGetUserMedia); +``` + +Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback: + +```js + navigator.getMedia( { video: true, audio: false @@ -121,11 +145,17 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam function(err) { console.log("An error occured! " + err); } - );</pre> -<p>Firefox Nightly nécessite de définir la propriété <code>mozSrcObject</code> de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut <code>src</code>. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.</p> -<h3 id="Redimensionner_la_vidéo">Redimensionner la vidéo</h3> -<p>Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.</p> -<pre class="brush:js;"> video.addEventListener('canplay', function(ev){ + ); +``` + +Firefox Nightly nécessite de définir la propriété `mozSrcObject` de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut `src`. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche. + +### Redimensionner la vidéo + +Ensuite nous devons redimensionner la vidéo aux bonnes dimensions. + +```js + video.addEventListener('canplay', function(ev){ if (!streaming) { height = video.videoHeight / (video.videoWidth/width); video.setAttribute('width', width); @@ -134,17 +164,28 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam canvas.setAttribute('height', height); streaming = true; } - }, false);</pre> -<p>Nous nous abonnons à l'évènement <code>canplay</code> de la vidéo et lisons ses dimensions en utilisant <code>videoHeight</code> et <code>videoWidth</code>. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons <code>streaming</code> à true pour faire cette vérification une seule fois vu que l'évènement <code>canplay</code> se déclenchera à répétition.</p> -<p>C'est tout ce qu'il faut pour jouer la vidéo.</p> -<h3 id="Prendre_une_photo">Prendre une photo</h3> -<p>Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction <code>takepicture</code> function.</p> -<pre class="brush:js;"> startbutton.addEventListener('click', function(ev){ + }, false); +``` + +Nous nous abonnons à l'évènement `canplay` de la vidéo et lisons ses dimensions en utilisant `videoHeight` et `videoWidth`. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons `streaming` à true pour faire cette vérification une seule fois vu que l'évènement `canplay` se déclenchera à répétition. + +C'est tout ce qu'il faut pour jouer la vidéo. + +### Prendre une photo + +Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction `takepicture` function. + +```js + startbutton.addEventListener('click', function(ev){ takepicture(); ev.preventDefault(); - }, false);</pre> -<p>Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.</p> -<pre class="brush:js;"> function takepicture() { + }, false); +``` + +Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. + +```js + function takepicture() { canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(video, 0, 0, width, height); @@ -152,11 +193,14 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam photo.setAttribute('src', data); } -})();</pre> -<p>C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.</p> -<h2 id="Support">Support</h2> -<p>Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:</p> -<ul> - <li>Entrez "about:config" dans la barre d'adresse et confirmez les changements</li> - <li>Trouver l'entrée "media.navigator.enabled" et positionnez la à true</li> -</ul> +})(); +``` + +C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox. + +## Support + +Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration: + +- Entrez "about:config" dans la barre d'adresse et confirmez les changements +- Trouver l'entrée "media.navigator.enabled" et positionnez la à true |