From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 .../fr/web/api/webrtc_api/connectivity/index.html  |  8 +---
 files/fr/web/api/webrtc_api/index.html             | 33 ++++++++--------
 .../web/api/webrtc_api/session_lifetime/index.html | 17 ++++++--
 .../signaling_and_video_calling/index.html         | 46 +++++++++++-----------
 .../api/webrtc_api/taking_still_photos/index.html  |  4 +-
 5 files changed, 56 insertions(+), 52 deletions(-)

(limited to 'files/fr/web/api/webrtc_api')

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
 ---
-
(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.

+
(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.

 
 
Qu’est-ce que ICE?

 
@@ -18,8 +18,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture
 
 
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.

 
-
An interaction between two users of a WebRTC application involving a STUN server.

-
 
Qu’est-ce que NAT?

 
 
Network Address Translation (NAT) 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.

@@ -32,8 +30,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture
 
 
Traversal Using Relays around NAT (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.

 
-
Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN.

-
 
Qu’est-ce que SDP?

 
 
Session Description Protocol (SDP) 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.

@@ -52,4 +48,4 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture
 
 
L'échange entier dans un diagramme compliqué

 
-
Un schéma architectural complet montrant l'ensemble du processus WebRTC.

+
Un schéma architectural complet montrant l'ensemble du processus WebRTC.

\ 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
 ---
 
{{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 (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 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.

 
@@ -70,12 +71,12 @@ translation_of: Web/API/WebRTC_API
  
{{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.

+ 
Utilisé pour fournir des options de configuration pour un 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 sont envoyés et reçus.

+ 
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 sont envoyés et reçus.

 

 
 
Identité et sécurité

@@ -143,24 +144,24 @@ translation_of: Web/API/WebRTC_API
 
Protocoles propres au WebRTC

 
 
 
 
Protocoles de support associés

 
 
 
 
Spécifications

@@ -194,7 +195,7 @@ translation_of: Web/API/WebRTC_API
 
 
En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous ressources.

 
-
+
Voir aussi

 
 
    
  
  • {{domxref("MediaDevices")}}
    • 
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
 ---
 
    
-  
    WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.
    
+  
    Note : WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.
    
 
    
+
 
    Etablir la connexion
    
+
 
    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.
    
+
 
    Signalisation
    
+
 
    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) pour AppEngine.
    
+
 
    Transmission
    
+
 
    getUserMedia
    
+
 
    Objet LocalMediaStream
    
+
 
    Reception
    
-
    Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.
    
+
+
    Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.
    
+
 
    
-  
    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. Essayez aussi la demo de service d'appel, sa page source, et son serveur source.
    
+  
    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. Essayez aussi la demo de service d'appel, sa page source, et son serveur source.
    
 
    
-
     
    
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
 ---
-
    
-
    Maintenant que vous comprenez l'architecture WebRTC, 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
    
-
    
+
    Maintenant que vous comprenez l'architecture WebRTC, 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
    
 
 
    Contenu semi-ancien, à partir de RTCPeerConnection
    
 
@@ -94,7 +92,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error)
 
    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.
    
 
 
    
-
    Ne pas utiliser les examples de cette page. Voir l'article signalisation et appel vidéo ,pour des example mis a jour sur l'utilisation des medias WebRTC.
    
+
    Note : Ne pas utiliser les examples de cette page. Voir l'article signalisation et appel vidéo ,pour des example mis a jour sur l'utilisation des medias WebRTC.
    
 
    
 
 
    Note
    
@@ -109,7 +107,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error)
 
 
    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.
    
 
-
    var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+
    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;
    
@@ -118,13 +116,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    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.
    
 
-
    var pc = new PeerConnection(configuration, options);
    
+
    var pc = new PeerConnection(configuration, options);
    
 
 
    RTCConfiguration
    
 
 
    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.
    
 
-
    var configuration = {
+
    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 ||
 
 
    Selon le type de connexion, vous devez passer des options.
    
 
-
    var options = {
+
    var options = {
     optional: [
         {DtlsSrtpKeyAgreement: true},
         {RtpDataChannels: true}
@@ -153,7 +151,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    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.
    
 
-
    pc.onicecandidate = function (e) {
+
    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 ||
 
 
    La structure de la base de données ressemble à ceci :
    
 
-
    {
+
    {
     "": {
         "candidate:": …
         "offer": …
@@ -188,7 +186,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.
    
 
-
    pc.createOffer(function (offer) {
+
    pc.createOffer(function (offer) {
     pc.setLocalDescription(offer);
 
     send("offer", JSON.stringify(offer));
@@ -198,7 +196,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    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.
    
 
-
    var errorHandler = function (err) {
+
    var errorHandler = function (err) {
     console.error(err);
 };
    
 
@@ -206,7 +204,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    Options pour l'offre SDP.
    
 
-
    var constraints = {
+
    var constraints = {
     mandatory: {
         OfferToReceiveAudio: true,
         OfferToReceiveVideo: true
@@ -221,7 +219,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    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.
    
 
-
    recv("offer", function (offer) {
+
    recv("offer", function (offer) {
     offer = new SessionDescription(JSON.parse(offer))
     pc.setRemoteDescription(offer);
 
@@ -238,7 +236,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    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.
    
 
-
    var channel = pc.createDataChannel(channelName, channelOptions);
    
+
    var channel = pc.createDataChannel(channelName, channelOptions);
    
 
 
    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.
    
 
@@ -248,7 +246,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    channelOptions
    
 
-
    var channelOptions = {};
    
+
    var channelOptions = {};
    
 
 
    Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le RFC pour plus d'informations sur les options.
    
 
@@ -262,13 +260,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.
    
 
-
    channel.onerror = function (err) {
+
    channel.onerror = function (err) {
     console.error("Channel Error:", err);
 };
    
 
 
    onmessage
    
 
-
    channel.onmessage = function (e) {
+
    channel.onmessage = function (e) {
     console.log("Got message:", e.data);
 }
    
 
@@ -282,7 +280,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    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.
    
 
-
    pc.ondatachannel = function (e) {
+
    pc.ondatachannel = function (e) {
     e.channel.onmessage = function () { … };
 };
    
 
@@ -290,7 +288,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    send()
    
 
-
    channel.send("Hi Peer!");
    
+
    channel.send("Hi Peer!");
    
 
 
    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.
    
 
@@ -304,7 +302,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
 
    Obtenir les médias de l'utilisateur
    
 
-
    <video id="preview" autoplay></video>
+
    <video id="preview" autoplay></video>
 
 var video = document.getElementById("preview");
 navigator.getUserMedia(mediaOptions, function (stream) {
@@ -315,7 +313,7 @@ navigator.getUserMedia(mediaOptions, function (stream) {
 
 
    Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.
    
 
-
    var mediaOptions = {
+
    var mediaOptions = {
     video: true,
     audio: true
 };
    
@@ -332,11 +330,11 @@ navigator.getUserMedia(mediaOptions, function (stream) {
 
 
    Ajoute le flux de getUserMedia au PeerConnection.
    
 
-
    pc.addStream(stream);
    
+
    pc.addStream(stream);
    
 
 
    onaddstream
    
 
-
    <video id="otherPeer" autoplay></video>
+
    <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
 ---
 
    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. Il y a aussi une version plus avancée pour charger des photos sur imgur en JavaScript, disponible en code source sur GitHub ou en 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. Il y a aussi une version plus avancée pour charger des photos sur imgur en JavaScript, disponible en code source sur GitHub ou en demo.
    
 
    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.
    
 
    <video id="video"></video>
@@ -95,7 +95,7 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
       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.
    
 
    
- 
    À 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.
    
+ 
    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:
    
-- 
cgit v1.2.3-54-g00ecf