MediaDevices : utiliser la webcam et le micro en JavaScript

Il y a quelques années encore, accéder à une webcam depuis un navigateur relevait presque de la science-fiction ou nécessitait des plugins douteux. Aujourd’hui, quelques lignes de JavaScript et MediaDevices suffisent pour allumer une caméra, capter un micro ou lancer une visio directement dans une page web.

Derrière cette magie apparente se cache une API moderne, puissante et pourtant accessible : MediaDevices. Elle fait partie des APIs natives du navigateur et permet de travailler avec des périphériques multimédias comme la webcam, le micro ou l’appareil photo.

• Comprendre comment accéder à une webcam et à un micro en JavaScript de façon sécurisée, afin de créer des fonctionnalités interactives modernes directement dans le navigateur.
• Être capable d’imaginer et de construire des usages concrets comme la visio ou le scan de QR code, sans dépendre d’applications natives ni de technologies complexes.
• Acquérir des bases solides du JavaScript moderne en manipulant des APIs réelles, tout en développant de bons réflexes côté performance, sécurité et expérience utilisateur.

Dans ce tutoriel complet, nous allons partir de zéro. Pas besoin d’être un expert en JavaScript. Chaque notion sera expliquée simplement, avec des exemples concrets et du code commenté, pour que vous compreniez vraiment ce que vous faites… et surtout pourquoi vous le faites.

Qu’est-ce que MediaDevices API ?

MediaDevices API est une interface JavaScript fournie par les navigateurs modernes. Elle permet à une page web d’accéder aux périphériques multimédias de l’utilisateur, principalement la webcam et le microphone.

Concrètement, cette API sert à demander au navigateur :

« Puis-je utiliser ta webcam ? »
« Puis-je capter le son du micro ? »

La réponse ne dépend jamais du développeur, mais toujours de l’utilisateur. Le navigateur affiche une demande d’autorisation claire, visible, et impossible à contourner. C’est un point fondamental pour la sécurité et la vie privée.

Techniquement, MediaDevices fait partie de l’objet navigator, ce qui signifie qu’elle est accessible partout en JavaScript via navigator.mediaDevices.

À quoi sert MediaDevices dans la vraie vie ?

On pourrait croire que MediaDevices ne sert qu’à faire de la visio, mais en réalité, ses usages sont bien plus larges.

Elle est utilisée pour afficher un retour vidéo de webcam sur une page web, enregistrer du son, créer des outils de visioconférence, scanner des QR codes, prendre des photos depuis un navigateur, ou encore construire des applications pédagogiques et interactives.

Si vous avez déjà utilisé une plateforme de visio en ligne, un outil de scan QR dans un navigateur mobile ou un site demandant l’accès à votre caméra, vous avez déjà utilisé MediaDevices, sans le savoir.

Quand utiliser MediaDevices dans vos projets ?

MediaDevices est pertinente dès que votre projet nécessite une interaction avec le monde réel. Dès que vous voulez voir, entendre ou capturer quelque chose via le navigateur, vous êtes dans son terrain de jeu.

Elle est idéale pour des projets éducatifs, des applications web modernes, des outils métiers internes, ou même de simples démonstrations techniques pour apprendre JavaScript.

En revanche, elle n’est pas adaptée si vous cherchez à accéder à des périphériques sans consentement. Le navigateur bloquera toute tentative silencieuse. Et c’est une bonne chose.

Les prérequis indispensables

Avant d’aller plus loin, il y a deux règles essentielles à connaître.

• La première est que MediaDevices ne fonctionne que sur un site sécurisé. Cela signifie que votre page doit être servie en HTTPS, ou être ouverte depuis localhost vaches (Mamp par exemple). Un simple fichier HTML ouvert depuis votre disque dur ne suffira pas.
• La seconde est que l’utilisateur doit donner son autorisation. Sans cela, aucune webcam, aucun micro, rien du tout.

Ces contraintes peuvent sembler pénibles au début, mais elles garantissent une expérience sécurisée et respectueuse.

Comprendre l’objet navigator.mediaDevices

En JavaScript, tout commence par cet objet :

navigator.mediaDevices

Cet objet contient plusieurs méthodes, mais la plus importante, et celle que nous utiliserons tout au long de ce tutoriel, s’appelle getUserMedia.

C’est elle qui permet de demander l’accès à la webcam ou au micro.

Sa particularité est qu’elle fonctionne avec des promesses, ce qui signifie qu’elle peut réussir ou échouer. En JavaScript moderne, on la manipule presque toujours avec then et catch, ou avec async et await.

Pour en savoir plus : Async/Await VS Promise

Premier exemple simple : vérifier la compatibilité

Avant même de demander l’accès à une webcam, il est toujours préférable de vérifier si le navigateur supporte MediaDevices. Voici un premier exemple très simple :

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    console.log("MediaDevices est supportée par ce navigateur");
} else {
    console.log("MediaDevices n'est pas supportée");
}

Ce test permet d’éviter des erreurs inutiles et de proposer un message clair à l’utilisateur si son navigateur est trop ancien. C’est une bonne habitude à prendre, surtout lorsque vous développez pour un public large.

Pour vérifier le message retourner par console.log, ouvrez les outils de développement de votre navigateur et regarder dans l’onglet Console.

Comprendre getUserMedia facilement

La méthode getUserMedia accepte un objet de configuration. Cet objet décrit ce que vous voulez récupérer.

• Si vous voulez uniquement la webcam, vous indiquerez video: true.
• Si vous voulez le micro, vous indiquerez audio: true.
• Et si vous voulez les deux, vous activerez les deux options.

Voici un exemple minimal :

navigator.mediaDevices.getUserMedia({ video: true })

À ce stade, rien ne s’affiche encore. Vous demandez simplement au navigateur l’autorisation d’accéder à la caméra. Ce n’est qu’une fois l’autorisation accordée que vous pourrez exploiter le flux vidéo.

Ce que getUserMedia retourne réellement

Quand getUserMedia fonctionne, elle ne retourne pas une image ou une vidéo, mais un MediaStream. Un MediaStream est un flux de données multimédias. Il peut contenir une ou plusieurs pistes, par exemple une piste vidéo et une piste audio.

Ce flux est ensuite utilisé dans une balise HTML <video> ou <audio> pour être affiché ou écouté. Ne vous inquiétez pas si ce concept paraît flou pour l’instant. Nous allons le manipuler très concrètement dans la suite de ce tutoriel.

À ce stade, vous avez posé des bases solides. Vous savez ce qu’est MediaDevices, à quoi elle sert, quand l’utiliser et comment elle fonctionne dans les grandes lignes. Vous avez également découvert la méthode clé getUserMedia et compris les règles de sécurité qui l’entourent.

Utiliser la webcam avec MediaDevices en JavaScript

Entrons maintenant dans le vif du sujet. La théorie, c’est bien, mais ce qui fait vraiment comprendre MediaDevices, c’est de voir sa webcam s’allumer dans une page web que vous avez écrite vous-même.

L’objectif de cette partie est simple : afficher le flux de la webcam en direct dans une page HTML, proprement, sans magie noire, et surtout en comprenant chaque ligne de code.

La structure HTML minimale

Avant même d’écrire du JavaScript, il faut préparer un terrain d’accueil pour la vidéo. Pour afficher un flux de webcam, on utilise une balise <video>. Voici un fichier HTML très simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Webcam avec MediaDevices</title>
</head>
<body>

    <h1>Ma webcam en direct</h1>

    <video id="webcam" autoplay playsinline></video>

    <script src="script.js"></script>
</body>
</html>

Prenons deux secondes pour comprendre cette balise <video>.

L’attribut autoplay permet de lancer automatiquement la vidéo dès qu’un flux est disponible. Sans lui, la webcam serait bien activée, mais rien ne s’afficherait tant que l’utilisateur n’a pas cliqué.

L’attribut playsinline est surtout utile sur mobile. Il évite que la vidéo passe automatiquement en plein écran, ce qui peut être gênant dans une application web.

Premier script JavaScript pour activer la webcam

Passons maintenant au fichier script.js. C’est ici que MediaDevices entre en scène. Voici une première version fonctionnelle :

const video = document.getElementById("webcam");

navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        video.srcObject = stream;
    })
    .catch(error => {
        console.error("Erreur d'accès à la webcam :", error);
    });

Ce code peut sembler court, mais il fait énormément de choses. Prenons-le ligne par ligne.

On récupère la balise vidéo :

const video = document.getElementById("webcam");

Ici, on récupère simplement la balise <video> pour pouvoir lui associer le flux vidéo plus tard. Rien de compliqué, c’est du JavaScript classique.

On demande l’accès à la webcam :

navigator.mediaDevices.getUserMedia({ video: true })

Cette ligne déclenche tout le processus. Le navigateur comprend que la page souhaite accéder à la webcam. Il affiche alors une demande d’autorisation à l’utilisateur. À ce moment précis, votre code est mis en pause. Tant que l’utilisateur n’a pas répondu, rien ne se passe.

Le then, quand tout se passe bien :

.then(stream => {
    video.srcObject = stream;
})

Si l’utilisateur accepte, getUserMedia fournit un MediaStream. Ce flux est stocké dans la variable stream.

La propriété srcObject permet d’assigner directement ce flux à la balise <video>. Dès que c’est fait, la webcam s’affiche automatiquement à l’écran.

C’est souvent ici que les débutants ont un déclic. Il n’y a pas de fichier vidéo, pas d’URL, pas de téléchargement. Le navigateur lit directement le flux en temps réel.

La gestion des erreurs :

.catch(error => {
    console.error("Erreur d'accès à la webcam :", error);
});

Si l’utilisateur refuse l’accès, ou si la webcam n’existe pas, ou si le site n’est pas en HTTPS, cette partie du code est exécutée. C’est important pour le confort utilisateur. Vous pouvez afficher un message clair, expliquer pourquoi la webcam ne fonctionne pas, ou proposer une alternative.

Tester votre code correctement

Pour que cet exemple fonctionne, il faut respecter une règle essentielle : ouvrir la page depuis localhost ou depuis un site HTTPS. Si vous double-cliquez sur votre fichier HTML, cela ne marchera pas. Le navigateur bloquera l’accès à la webcam. Une solution simple consiste à utiliser un petit serveur local, comme celui de VS Code, ou un serveur PHP local comme celui de Mamp, Wamp…

Ajouter un bouton pour démarrer la webcam

Allumer automatiquement la webcam dès le chargement de la page peut surprendre. Une bonne pratique consiste à laisser l’utilisateur déclencher lui-même l’action. Ajoutons un bouton. Dans le HTML :

<button id="start">Activer la webcam</button>
<video id="webcam" autoplay playsinline></video>

Dans le JavaScript :

const video = document.getElementById("webcam");
const button = document.getElementById("start");

button.addEventListener("click", () => {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            video.srcObject = stream;
        })
        .catch(error => {
            console.error("Impossible d'accéder à la webcam", error);
        });
});

Cette approche est beaucoup plus respectueuse de l’utilisateur et correspond mieux aux attentes modernes.

Arrêter proprement la webcam

Un point souvent oublié concerne l’arrêt du flux vidéo. Si vous ne stoppez pas la webcam, elle reste active même si vous cachez la vidéo. Voici comment arrêter le flux :

function stopWebcam(stream) {
    stream.getTracks().forEach(track => track.stop());
}

Chaque piste du MediaStream est arrêtée explicitement. Cela coupe réellement l’accès à la webcam. C’est un détail technique, mais il fait toute la différence en termes de performance et de confidentialité.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

MediaDevices est idéale pour apprendre JavaScript

MediaDevices est une API très pédagogique. Elle oblige à comprendre Async/Await VS Promise, les événements, la manipulation du DOM et la gestion des erreurs. En quelques lignes de code, vous touchez à des concepts fondamentaux du JavaScript moderne, tout en obtenant un résultat visible et gratifiant.

Voir sa propre webcam fonctionner grâce à son code est souvent un moment marquant dans l’apprentissage.

Utiliser MediaDevices pour la visio : webcam et micro

Quand on parle de visio, on imagine souvent quelque chose de complexe, réservé aux grandes plateformes. En réalité, la base technique d’une visio repose sur des principes très simples : capturer une image, capter du son, et les diffuser en temps réel.

La bonne nouvelle, c’est que MediaDevices permet déjà de faire une grande partie du travail. Même sans serveur compliqué ou technologie avancée, vous pouvez créer une expérience de visio locale, parfaite pour comprendre les fondations.

Comprendre ce qu’est vraiment une visio

Avant d’écrire du code, prenons un instant pour clarifier une idée importante. Une visio complète repose sur trois briques principales. La capture vidéo via la webcam, la capture audio via le micro, et la transmission du flux à une autre personne.

MediaDevices s’occupe uniquement de la capture. La transmission, elle, se fait avec d’autres technologies comme WebRTC, que nous évoquerons sans entrer dans le détail. Dans cette partie, l’objectif est donc de capturer et afficher une visio locale, c’est-à-dire votre image et votre voix, comme le ferait un outil de test ou de prévisualisation.

Activer webcam et micro en même temps

La première étape est presque identique à ce que vous avez déjà fait avec la webcam seule. La différence se situe dans l’objet de configuration passé à getUserMedia.

Voici le code de base :

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
})

Avec ces deux options activées, le navigateur comprend que vous souhaitez accéder à la webcam et au micro. Il affichera donc une double demande d’autorisation à l’utilisateur. C’est important à comprendre : si l’utilisateur refuse l’un des deux, la promesse échoue.

Exemple complet de visio locale

Commençons par le HTML.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Visio avec MediaDevices</title>
</head>
<body>

    <h1>Prévisualisation visio</h1>

    <button id="start">Démarrer la visio</button>
    <video id="video" autoplay playsinline></video>

    <script src="script.js"></script>
</body>
</html>

Rien de surprenant ici. On retrouve une balise <video> et un bouton pour laisser l’utilisateur décider quand démarrer. Passons maintenant au JavaScript.

Le JavaScript expliqué pas à pas

const video = document.getElementById("video");
const button = document.getElementById("start");

button.addEventListener("click", async () => {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        });

        video.srcObject = stream;

    } catch (error) {
        console.error("Erreur lors de l'accès aux médias :", error);
    }
});

Prenons le temps de décortiquer ce code tranquillement.

Pourquoi utiliser async et await ici

Vous remarquez peut-être une différence par rapport aux exemples précédents. Cette fois, nous utilisons async et await au lieu de then. C’est une écriture plus moderne, souvent plus lisible pour les débutants. Elle permet de lire le code comme une suite logique d’actions.

Quand JavaScript rencontre await, il attend que la promesse soit résolue, sans bloquer le navigateur. Si tout se passe bien, stream contient le MediaStream. Sinon, une erreur est levée.

Afficher la vidéo et gérer le son

video.srcObject = stream;

Cette ligne suffit à afficher la vidéo et à activer le son. Le navigateur sait que le flux contient une piste audio et une piste vidéo.

Attention toutefois à un détail important. La plupart des navigateurs bloquent la lecture audio automatique sans interaction utilisateur. Ici, comme la visio est déclenchée par un clic, tout fonctionne correctement.

Comprendre les pistes audio et vidéo

Un MediaStream n’est pas un bloc monolithique. Il contient des pistes, appelées tracks. Vous pouvez les inspecter comme ceci :

const tracks = stream.getTracks();
console.log(tracks);

Vous verrez généralement une piste vidéo et une piste audio. Cette séparation est très utile si vous souhaitez couper le micro ou la caméra indépendamment.

Couper le micro ou la webcam pendant la visio

Dans une visio, il est fréquent de vouloir désactiver temporairement le micro ou la caméra. Voici comment couper le micro :

stream.getAudioTracks()[0].enabled = false;

Et pour couper la webcam :

stream.getVideoTracks()[0].enabled = false;

Ces actions ne détruisent pas le flux. Elles le mettent simplement en pause. C’est exactement ce que font les boutons « micro off » et « caméra off » dans les outils de visio classiques.

Arrêter complètement la visio

Lorsque l’utilisateur quitte la page ou clique sur un bouton « arrêter », il est important de libérer les ressources. Voici une fonction simple et efficace :

function stopVisio(stream) {
    stream.getTracks().forEach(track => track.stop());
}

Une fois les pistes arrêtées, la webcam s’éteint réellement, le micro aussi, et le navigateur retrouve un état propre.

Les limites de MediaDevices pour la visio

À ce stade, vous pouvez afficher une visio locale, capter l’image et le son, et les contrôler. En revanche, MediaDevices ne permet pas à elle seule de communiquer avec une autre personne à distance.

Pour cela, il faut combiner MediaDevices avec d’autres technologies JavaScript, notamment WebRTC. MediaDevices fournit le flux, WebRTC se charge de le transmettre. C’est une séparation très saine, qui rend les projets plus modulaires et plus compréhensibles.

Beaucoup de développeurs veulent directement créer une application de visio complète. Pourtant, comprendre d’abord MediaDevices est indispensable.

C’est ici que vous apprenez à manipuler les flux, gérer les autorisations, anticiper les erreurs et respecter l’utilisateur. Sans ces bases, les projets plus avancés deviennent vite confus.

Vous savez maintenant utiliser MediaDevices pour la webcam, le micro et une visio locale. Il reste un dernier usage très concret et très populaire à explorer : l’utilisation de l’appareil photo pour scanner un QR code.

Scanner un QR code avec MediaDevices en JavaScript

Scanner un QR code depuis un navigateur web est souvent perçu comme quelque chose de complexe, réservé aux applications mobiles natives. Pourtant, avec MediaDevices, un peu de JavaScript et une bibliothèque adaptée, c’est parfaitement faisable dans une simple page web.

Ce cas d’usage est particulièrement intéressant pédagogiquement, car il combine plusieurs notions. L’accès à la webcam, l’affichage du flux vidéo, la capture d’images, et l’analyse de ces images en temps réel.

Comprendre le principe du scan QR

Avant de coder, il faut bien comprendre ce que l’on fait réellement. Un QR code n’est pas « lu » directement par la webcam. La caméra fournit simplement un flux vidéo. Ce flux est ensuite analysé image par image par un algorithme capable de reconnaître les motifs du QR code et d’en extraire le contenu.

MediaDevices sert donc uniquement à fournir l’image. Le décodage du QR code est confié à une bibliothèque JavaScript spécialisée. C’est une distinction importante, car elle permet de bien séparer les responsabilités dans votre code.

Choisir une bibliothèque pour décoder les QR codes

Il existe plusieurs bibliothèques JavaScript capables de lire des QR codes. Pour un projet débutant, l’idéal est d’en choisir une simple, bien documentée et largement utilisée. Une des plus populaires repose sur la librairie jsQR. Elle est légère, efficace et parfaitement adaptée à un usage pédagogique.

L’idée n’est pas de comprendre l’algorithme mathématique du QR code, mais d’apprendre à exploiter un outil existant intelligemment.

Structure HTML pour le scan QR

Commençons par le HTML. Nous avons besoin d’une vidéo pour afficher la caméra et d’un canvas pour analyser les images.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Scan QR Code avec MediaDevices</title>
</head>
<body>

    <h1>Scanner un QR code</h1>

    <video id="video" autoplay playsinline></video>
    <canvas id="canvas" hidden></canvas>

    <p id="resultat">En attente d'un QR code...</p>

    <script src="jsqr.js"></script>
    <script src="script.js"></script>
</body>
</html>

Le canvas est volontairement caché. Il ne sert pas à l’affichage, mais uniquement à l’analyse des images capturées par la webcam.

Activer la caméra pour le scan

Dans le fichier JavaScript, on commence par activer la caméra arrière sur mobile, si elle existe. C’est un détail important pour l’expérience utilisateur.

const video = document.getElementById("video");

navigator.mediaDevices.getUserMedia({
    video: { facingMode: "environment" }
})
.then(stream => {
    video.srcObject = stream;
})
.catch(error => {
    console.error("Erreur d'accès à la caméra", error);
});

Le paramètre facingMode: "environment" indique au navigateur que l’on préfère utiliser la caméra arrière. Sur ordinateur, cela n’a pas d’impact, mais sur smartphone, c’est essentiel.

Capturer les images de la webcam

Une fois la vidéo affichée, il faut régulièrement capturer une image pour l’analyser. C’est ici que le canvas entre en jeu.

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

function scanQRCode() {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

        const code = jsQR(imageData.data, canvas.width, canvas.height);

        if (code) {
            document.getElementById("resultat").textContent = "QR Code détecté : " + code.data;
        }
    }

    requestAnimationFrame(scanQRCode);
}

scanQRCode();

Ce code peut sembler dense, mais il est en réalité très logique.

Comprendre la capture image par image

À chaque itération, on vérifie que la vidéo est prête. Ensuite, on ajuste la taille du canvas pour correspondre exactement à la vidéo. La méthode drawImage copie l’image actuelle de la webcam dans le canvas. On récupère ensuite les données de pixels grâce à getImageData. Ces données sont envoyées à la bibliothèque jsQR, qui tente de détecter un QR code.

Si un code est trouvé, son contenu est accessible via code.data.

Pourquoi utiliser requestAnimationFrame

La fonction requestAnimationFrame permet de répéter l’analyse de manière fluide et optimisée. Elle s’aligne sur le rafraîchissement de l’écran et évite de surcharger inutilement le processeur. C’est une approche idéale pour analyser un flux vidéo en temps réel.

Le scan QR via MediaDevices est utilisé dans de nombreux contextes. Connexion rapide à un compte, accès à une page sécurisée, validation de présence, paiement, ou encore accès à des contenus pédagogiques.

Dans un cadre éducatif, c’est un excellent exercice pour montrer comment JavaScript peut interagir avec le monde réel, sans application mobile, sans installation, directement depuis un navigateur.

Les limites et précautions à connaître

Comme pour la webcam et la visio, le scan QR repose sur le consentement de l’utilisateur. Il nécessite également un bon éclairage et une caméra de qualité correcte.

Il est aussi important de prévoir une alternative si la caméra n’est pas disponible, par exemple un champ permettant de coller manuellement un lien. Un bon développeur pense toujours aux cas où la technologie n’est pas accessible.

MediaDevices est une API clé du JavaScript moderne

À travers la webcam, la visio et le scan QR, vous avez pu constater que MediaDevices est bien plus qu’une simple API technique. Elle ouvre la porte à des expériences web interactives, immersives et humaines. Elle permet au navigateur de sortir de son cadre traditionnel et de dialoguer avec le monde physique.

Pour un développeur JavaScript, la maîtriser est un véritable atout.

MediaDevices change profondément la manière dont on conçoit des applications web. Elle rapproche le navigateur de l’utilisateur, de son environnement, de ses outils du quotidien. Webcam, micro, appareil photo ne sont plus réservés aux applications natives, mais deviennent accessibles en JavaScript, simplement et proprement.

Au-delà de la technique, cette API invite à une réflexion plus large. Elle rappelle que chaque accès à un périphérique est un acte de confiance. Bien l’utiliser, c’est respecter l’utilisateur, l’informer et lui laisser le contrôle.

Si vous débutez en JavaScript, MediaDevices est une excellente porte d’entrée vers le web moderne. Elle combine des notions essentielles, offre des résultats visibles rapidement et donne souvent envie d’aller plus loin. Et c’est exactement ce que l’on recherche quand on apprend à coder.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr