diff options
Diffstat (limited to 'files/fr/web/api/mediadevices/index.md')
| -rw-r--r-- | files/fr/web/api/mediadevices/index.md | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/fr/web/api/mediadevices/index.md b/files/fr/web/api/mediadevices/index.md new file mode 100644 index 0000000000..e1743db309 --- /dev/null +++ b/files/fr/web/api/mediadevices/index.md @@ -0,0 +1,122 @@ +--- +title: MediaDevices +slug: Web/API/MediaDevices +tags: + - API + - Appareils + - Audio + - Conference + - Interface + - Media + - Partage + - Reference + - Video + - WebRTC +translation_of: Web/API/MediaDevices +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p>L'interface <strong><code>MediaDevices</code></strong> permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<p><em>Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p> + +<h2 id="Handlers">Événéments</h2> + +<dl> + <dt>{{domxref("MediaDevices/devicechange_event", "devicechange")}}</dt> + <dd>Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.<br> + Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt> + <dd>Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.</dd> + <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt> + <dd>Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.</dd> + <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt> + <dd>Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un <code>MediaStream</code>.</dd> + <dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt> + <dd>Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:js">'use strict'; + +// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur. +var video = document.querySelector('video'); +var constraints = window.constraints = { + audio: false, + video: true +}; +var errorElement = document.querySelector('#errorMsg'); + +navigator.mediaDevices.getUserMedia(constraints) +.then(function(stream) { + var videoTracks = stream.getVideoTracks(); + console.log('Got stream with constraints:', constraints); + console.log('Using video device: ' + videoTracks[0].label); + stream.onremovetrack = function() { + console.log('Stream ended'); + }; + window.stream = stream; // rendre la variable disponible dans la console du navigateur + video.srcObject = stream; +}) +.catch(function(error) { + if (error.name === 'ConstraintNotSatisfiedError') { + errorMsg('The resolution ' + constraints.video.width.exact + 'x' + + constraints.video.height.exact + ' px is not supported by your device.'); + } else if (error.name === 'PermissionDeniedError') { + errorMsg('Permissions have not been granted to use your camera and ' + + 'microphone, you need to allow the page access to your devices in ' + + 'order for the demo to work.'); + } + errorMsg('getUserMedia error: ' + error.name, error); +}); + +function errorMsg(msg, error) { + errorElement.innerHTML += '<p>' + msg + '</p>'; + if (typeof error !== 'undefined') { + console.error(error); + } +}</pre> + +<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('Media Capture', '#mediadevices', 'MediaDevices')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.MediaDevices")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture et Streams API</a>: l'API dont cette interface fait partie.</li> + <li><a href="/en-US/docs/Web/API/Screen_Capture_API">API de capture d'écran</a>: L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li>{{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet <code>MediaDevices</code> qui peut être utilisé pour accéder aux périphériques.</li> + <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> Capture et lecture vidéo HTML5 à l'aide de <code>MediaDevices</code> et de l'API d'enregistrement MediaStream (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source sur GitHub</a>)</li> + <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: Application Web de laboratoire de langage vidéo HTML5 video utilisant <code>MediaDevices</code> et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (<a href="https://github.com/chrisjohndigital/OpenLang">source sur GitHub</a>)</li> +</ul> |