From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../index.html | 97 +++++++++++++ files/fr/webrtc/index.html | 76 ++++++++++ files/fr/webrtc/introduction/index.html | 21 +++ files/fr/webrtc/mediastream_api/index.html | 85 +++++++++++ .../prendre_des_photos_avec_la_webcam/index.html | 161 +++++++++++++++++++++ 5 files changed, 440 insertions(+) create mode 100644 files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html create mode 100644 files/fr/webrtc/index.html create mode 100644 files/fr/webrtc/introduction/index.html create mode 100644 files/fr/webrtc/mediastream_api/index.html create mode 100644 files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html (limited to 'files/fr/webrtc') diff --git a/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html b/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html new file mode 100644 index 0000000000..72bd60d899 --- /dev/null +++ b/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html @@ -0,0 +1,97 @@ +--- +title: Communication de pair-à-pair avec WebRTC +slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC +translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC +--- +

{{SeeCompatTable}}

+

Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi navigator.mozGetUserMedia() à accéder au microphone et à la webcam (getUserMedia() est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).

+

La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C WebRTC et getUserMedia, ainsi que différents brouillons de IETF, principalement du groupe de travail rtcweb, mais aussi mmusic, rmcat et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à webrtc.org.

+

NOTE:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <video> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.

+

Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur HTML5 Rocks. On pourra trouver sur le site webrtc-landing une série de page de test basique.

+

Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à apprtc.appspot.com.

+

Un article de Hacks décrit avec précision ce qu'il se passe dans une connexion RTCPeerConnecion (lien) :

+

Basics of RTCPeerConnection call setup

+

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
WebRTC APIEn cours de définition 
getUserMedia APIEn cours definitionhttp://dev.w3.org/2011/webrtc/editor/getusermedia.html
+

Compatibilité des navigateurs

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de baseOui{{property_prefix("webkit")}}Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannelsA partir de Chrome 29Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FontionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support préliminaireVia Chrome (behind flag)Activé sur versions Nightly et Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannels{{CompatUnknown}}Activé sur versions Nightly et Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

 

diff --git a/files/fr/webrtc/index.html b/files/fr/webrtc/index.html new file mode 100644 index 0000000000..6977f32654 --- /dev/null +++ b/files/fr/webrtc/index.html @@ -0,0 +1,76 @@ +--- +title: WebRTC +slug: WebRTC +tags: + - WebRTC +translation_of: Web/API/WebRTC_API +--- +

Le RTC de WebRTC est synonyme de communications en temps réel, la technologie qui permet streaming audio / vidéo et le partage de données entre les clients de navigateur (pairs). Comme ensemble de normes, WebRTC permet à n'importe quel navigateur d'avoir la possibilité de partager les données d'application et d'effectuer des téléconférences entre pairs, sans la nécessité d'installer des plug-ins ou logiciels tiers.

+ +
 
+ +
Les composants WebRTC sont accessibles avec JavaScript API. Sont actuellement en développement les flux de réseau API, ce qui représente un fichier audio ou un flux de données vidéo, et l'API de connexion, qui permet à deux ou plusieurs utilisateurs de communiquer par l'intermédiaire des navigateurs. Également en cours de développement : une API qui permet la communication par DataChannel d'autres types de données pour les jeux en temps réel, chat texte, transfert de fichiers, et ainsi de suite.
+ +
 
+ +
Envie de découvrir WebRTC ? Suivre cette introduction vidéo ! (en Anglais)
+ +
 
+ +
 
+ + + + + + + + +
+

Documentation de WebRTC

+ +
+
Introduction à WebRTC
+
Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.
+
Utilisation de l'API de flux réseau
+
Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.
+
Communications de pair-à-pair avec WebRTC
+
Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.
+
Prendre des photos avec la webcam
+
 
+
MediaStream API
+
L'API qui permet la production et la manipulation d'objets de flux multimédia.
+
getUserMedia ()
+
La fonction de navigation qui permet d'accéder aux périphériques du système des médias.
+
+ +

Afficher tout ...

+ 		+

Obtenir de l'aide de la communauté

+ +

Lors du développement de sites et d'applications Web qui tirent parti des technologies WebRTC, il peut être utile d'engager la conversation avec les autres.

+ +
    +
  • Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}
    • +
+ +
    +
  • Posez votre question sur le canal IRC de Mozilla médias: # media
    • +
+ +

N'oubliez pas la netiquette...

+ + + + + +

Ressource

+ +
    +
  • {{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}
    • +
+
+ +

 

diff --git a/files/fr/webrtc/introduction/index.html b/files/fr/webrtc/introduction/index.html new file mode 100644 index 0000000000..0b14f417fb --- /dev/null +++ b/files/fr/webrtc/introduction/index.html @@ -0,0 +1,21 @@ +--- +title: Introduction à WebRTC +slug: WebRTC/Introduction +translation_of: Web/API/WebRTC_API/Session_lifetime +--- +
+

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

+
+

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/webrtc/mediastream_api/index.html b/files/fr/webrtc/mediastream_api/index.html new file mode 100644 index 0000000000..6722bc8885 --- /dev/null +++ b/files/fr/webrtc/mediastream_api/index.html @@ -0,0 +1,85 @@ +--- +title: API MediaStream +slug: WebRTC/MediaStream_API +tags: + - API + - Audio + - Media + - Overview +translation_of: Web/API/Media_Streams_API +--- +
{{DefaultAPISidebar("Media Capture and Streams")}}
+ +

L'API Processing MediaStream, souvent appelée Media Stream API ou Stream API, est la partie de WebRTC décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.

+ +

Concepts de base

+ +

L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans cette vidéo.

+ +

Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes pistes audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs canal. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en gauche et droite sur une piste audio en stéréo.

+ +

Les objets {{domxref("MediaStream")}} ont une seule entrée et une seule sortie. Un objet {{domxref("MediaStream")}} généré par getUserMedia() est dit local, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC PeerConnection, ou un flux créé en utilisant l'API Web Audio {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un consommateur. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC PeerConnection ou l'API Web Audio {{domxref("MediaStreamAudioDestinationNode")}}.

+ +

Interfaces

+ +

Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API Media Capture and Streams API.

+ +
+ +
+ +

Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées AudioStreamTrack et VideoStreamTrack, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser MediaStreamTrack directement à la place.

+ +

Évènements

+ +
+ +
+ +

Guides et tutorials

+ +

Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.

+ +

{{LandingPageListSubpages}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.MediaStream")}}

+ +

Voir aussi

+ + diff --git a/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html b/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html new file mode 100644 index 0000000000..854d0dd3f7 --- /dev/null +++ b/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html @@ -0,0 +1,161 @@ +--- +title: Prendre des photos avec la webcam +slug: WebRTC/Prendre_des_photos_avec_la_webcam +tags: + - API + - Avancé + - WebRTC + - getusermedia +translation_of: Web/API/WebRTC_API/Taking_still_photos +--- +

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.

+

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

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();
+

Les explications pas à pas.

+

Voici ce qui se passe.

+

Fonction anonyme

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      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.

+
+

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:

+
  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         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:

+
  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+

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.

+
  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, 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.

+
  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, 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.

+
  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();
+

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:

+ -- cgit v1.2.3-54-g00ecf