diff options
Diffstat (limited to 'files/fr/web/api/webrtc_api')
5 files changed, 56 insertions, 52 deletions
diff --git a/files/fr/web/api/webrtc_api/connectivity/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html index 661cafcb1f..119cf898ff 100644 --- a/files/fr/web/api/webrtc_api/connectivity/index.html +++ b/files/fr/web/api/webrtc_api/connectivity/index.html @@ -6,7 +6,7 @@ tags: translation_of: Web/API/WebRTC_API/Connectivity original_slug: Web/Guide/API/WebRTC/WebRTC_architecture --- -<p class="summary">(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> +<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> <h2 id="Qu’est-ce_que_ICE">Qu’est-ce que ICE?</h2> @@ -18,8 +18,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture <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> -<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p> - <h2 id="Qu’est-ce_que_NAT">Qu’est-ce que NAT?</h2> <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> @@ -32,8 +30,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture <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> -<p><img alt="Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p> - <h2 id="Qu’est-ce_que_SDP">Qu’est-ce que SDP?</h2> <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> @@ -52,4 +48,4 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture <h2 id="L'échange_entier_dans_un_diagramme_compliqué">L'échange entier dans un diagramme compliqué</h2> -<p><a href="https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="https://mdn.mozillademos.org/files/6119/webrtc-complete-diagram.png" style="display: block; height: 559px; margin: 0px auto; width: 641px;"></a></p> +<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 diff --git a/files/fr/web/api/webrtc_api/index.html b/files/fr/web/api/webrtc_api/index.html index a03e5682bc..3409541610 100644 --- a/files/fr/web/api/webrtc_api/index.html +++ b/files/fr/web/api/webrtc_api/index.html @@ -16,7 +16,8 @@ translation_of: Web/API/WebRTC_API --- <div>{{APIRef("WebRTC")}}</div> -<p><span class="seoSummary"><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.</span> 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><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 parvenri. 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> @@ -70,12 +71,12 @@ translation_of: Web/API/WebRTC_API <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" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a>.</dd> + <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" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd> + <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> @@ -143,24 +144,24 @@ translation_of: Web/API/WebRTC_API <h4 id="Protocoles_propres_au_WebRTC">Protocoles propres au WebRTC</h4> <ul> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Négociation de protocole de couche application pour les communications Web en temps réel</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>Codec audio WebRTC et exigences de traitement</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>Canaux de données RTCWeb</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>Protocole de canal de données RTCWeb</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>Architecture de sécurité WebRTC</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports pour RTCWEB</cite></a></li> + <li><a href="http://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="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/">Codec audio WebRTC et exigences de traitement</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/">Canaux de données RTCWeb</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/">Protocole de canal de données RTCWeb</a></li> + <li><a href="http://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="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/">Architecture de sécurité WebRTC</a></li> + <li><a href="http://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"><cite>Utilitaires de traversée de session pour NAT (STUN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7064"><cite>Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc3264"><cite>Un modèle d'offre / réponse avec protocole de description de session (SDP)</cite></a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</cite></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> @@ -194,7 +195,7 @@ translation_of: Web/API/WebRTC_API <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 class="Related_Topics" id="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{domxref("MediaDevices")}}</li> diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html index 72f7cfcdb6..7bc9c98dab 100644 --- a/files/fr/web/api/webrtc_api/session_lifetime/index.html +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.html @@ -5,18 +5,27 @@ translation_of: Web/API/WebRTC_API/Session_lifetime original_slug: WebRTC/Introduction --- <div class="note"> - <p>WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p> + <p><strong>Note :</strong> WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p> </div> + <h2 id="Etablir_la_connexion">Etablir la connexion</h2> + <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> + <h3 id="Signalisation">Signalisation</h3> + <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> + <h2 id="Transmission">Transmission</h2> + <h3 id="getUserMedia">getUserMedia</h3> + <p>Objet LocalMediaStream</p> + <h2 id="Reception">Reception</h2> -<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à <a title="about:config">about:config</a> et positionnez 'media.navigator.enabled' à 'true'.</p> + +<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.</p> + <div class="note"> - <p>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> + <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> -<p> </p> diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html index 65bba15124..a4b67ab853 100644 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -7,9 +7,7 @@ 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 --- -<div class="summary"> -<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="Introduction à l'architecture WebRTC">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> -</div> +<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> <h2 id="Contenu_semi-ancien_à_partir_de_RTCPeerConnection">Contenu semi-ancien, à partir de RTCPeerConnection</h2> @@ -94,7 +92,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) <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> <div class="note"> -<p>Ne pas utiliser les examples de cette page. Voir l'article <a href="https://developer.mozilla.org/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> +<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> <h2 id="Note">Note</h2> @@ -109,7 +107,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) <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> -<pre class="brush: js notranslate">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; +<pre class="brush: 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> @@ -118,13 +116,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate">var pc = new PeerConnection(configuration, options);</pre> +<pre class="brush: js">var pc = new PeerConnection(configuration, options);</pre> <h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> <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> -<pre class="brush: js notranslate">var configuration = { +<pre class="brush: js">var configuration = { iceServers: [ {url: "stun:23.21.150.121"}, {url: "stun:stun.l.google.com:19302"}, @@ -138,7 +136,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Selon le type de connexion, vous devez passer des options.</p> -<pre class="brush: js notranslate" lang="javascript">var options = { +<pre class="brush: js">var options = { optional: [ {DtlsSrtpKeyAgreement: true}, {RtpDataChannels: true} @@ -153,7 +151,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) { +<pre class="brush: js">pc.onicecandidate = function (e) { // candidate exists in e.candidate if (e.candidate == null) { return } send("icecandidate", JSON.stringify(e.candidate)); @@ -172,7 +170,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>La structure de la base de données ressemble à ceci :</p> -<pre class="brush: js notranslate" lang="json">{ +<pre class="brush: js">{ "": { "candidate:": … "offer": … @@ -188,7 +186,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) { +<pre class="brush: js">pc.createOffer(function (offer) { pc.setLocalDescription(offer); send("offer", JSON.stringify(offer)); @@ -198,7 +196,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) { +<pre class="brush: js">var errorHandler = function (err) { console.error(err); };</pre> @@ -206,7 +204,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Options pour l'offre SDP.</p> -<pre class="brush: js notranslate" lang="javascript">var constraints = { +<pre class="brush: js">var constraints = { mandatory: { OfferToReceiveAudio: true, OfferToReceiveVideo: true @@ -221,7 +219,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) { +<pre class="brush: js">recv("offer", function (offer) { offer = new SessionDescription(JSON.parse(offer)) pc.setRemoteDescription(offer); @@ -238,7 +236,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> +<pre class="brush: js">var channel = pc.createDataChannel(channelName, channelOptions);</pre> <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> @@ -248,7 +246,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3> -<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre> +<pre class="brush: js">var channelOptions = {};</pre> <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> @@ -262,13 +260,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.</p> -<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) { +<pre class="brush: js">channel.onerror = function (err) { console.error("Channel Error:", err); };</pre> <h4 id="onmessage"><strong><code>onmessage</code></strong></h4> -<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) { +<pre class="brush: js">channel.onmessage = function (e) { console.log("Got message:", e.data); }</pre> @@ -282,7 +280,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <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> -<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) { +<pre class="brush: js">pc.ondatachannel = function (e) { e.channel.onmessage = function () { … }; };</pre> @@ -290,7 +288,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <h4 id="send"><strong><code>send()</code></strong></h4> -<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre> +<pre class="brush: js">channel.send("Hi Peer!");</pre> <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> @@ -304,7 +302,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <h3 id="Obtenir_les_médias_de_lutilisateur">Obtenir les médias de l'utilisateur</h3> -<pre class="brush: js notranslate"><video id="preview" autoplay></video> +<pre class="brush: js"><video id="preview" autoplay></video> var video = document.getElementById("preview"); navigator.getUserMedia(mediaOptions, function (stream) { @@ -315,7 +313,7 @@ navigator.getUserMedia(mediaOptions, function (stream) { <p>Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.</p> -<pre class="brush: js notranslate" lang="javascript">var mediaOptions = { +<pre class="brush: js">var mediaOptions = { video: true, audio: true };</pre> @@ -332,11 +330,11 @@ navigator.getUserMedia(mediaOptions, function (stream) { <p>Ajoute le flux de <code>getUserMedia</code> au PeerConnection.</p> -<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre> +<pre class="brush: js">pc.addStream(stream);</pre> <h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4> -<pre class="brush: js notranslate"><video id="otherPeer" autoplay></video> +<pre class="brush: js"><video id="otherPeer" autoplay></video> var otherPeer = document.getElementById("otherPeer"); pc.onaddstream = function (e) { diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.html b/files/fr/web/api/webrtc_api/taking_still_photos/index.html index 2cb9e54c38..26e4bde58c 100644 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.html +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.html @@ -10,7 +10,7 @@ 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/" title="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> +<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> @@ -95,7 +95,7 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam 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>À 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> + <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> |