Maison > Article > interface Web > Comment ouvrir une webcam en utilisant JavaScript ?

Comment ouvrir une webcam en utilisant JavaScript ?

PHPzavant: 2023-08-24 15:09:082155parcourir

如何使用 JavaScript 打开网络摄像头？

Dans ce tutoriel, nous examinerons le processus d'ouverture d'une webcam à l'aide de JavaScript. Cela peut donc être fait en utilisant WebRTC. WebRTC est l'abréviation de Web Real-Time Communications. En utilisant cet objet, nous pouvons accéder et capturer les appareils webcam et microphone disponibles sur l'appareil de l'utilisateur.

Comment accéder à la webcam ?

Nous pouvons accéder à la webcam et au microphone de l'appareil utilisateur à l'aide de l'objet ECMAScript navigator.mediaDevices.getUserMedia(constraints).

Par conséquent, la fonction getUserMedia() demandera par défaut l'autorisation de l'utilisateur pour utiliser votre webcam. La fonction renvoie une promesse, une fois que vous cliquez sur OK et accordez l'autorisation, la promesse sera déclenchée et elle activera la webcam dans votre système, sinon, si vous ne l'autorisez pas, elle sera également une méthode catch pour ; éteignez la webcam.

Nous pouvons également transmettre des paramètres à la fonction getUserMedia(), tout comme si nous voulons une image d'une certaine largeur ou hauteur.

Le processus d'ouverture de la webcam

Nous pouvons suivre les étapes ci-dessous pour ouvrir la webcam en utilisant JavaScript.

Étape 1 - Ajoutez des éléments HTML tels que la vidéo pour afficher le flux de la webcam et bouton.
Étape 2 - Vérifiez si la webcam est disponible et résolvez la promesse renvoyée fonction getUserMedia.
ÉTAPE 3 - Transmettez les paramètres à la fonction getUserMedia() tels que l'audio et la vidéo vrai car nous les utiliserons
Étape 4 - Pour les smartphones, nous devons utiliser l'option faceingMode comme les deux La caméra est disponible et par défaut on l'allume avec la caméra frontale.

Exemple

Vous trouverez ci-dessous une procédure simple pour allumer votre webcam. Nous avons suivi les étapes ci-dessus pour terminer notre tâche.

<html>
<head>
   <title>Open webcam using JavaScript. </title>
</head>
<body>
   <h1>Open WebCam Using JavaScript</h1>
   <br/>
   <button id="startBtn" onclick="openCam()">Open Webcam</button>
   <br/><br/>
   <video id="videoCam"></video>
   <script>
      function openCam(){
         let All_mediaDevices=navigator.mediaDevices
         if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
            console.log("getUserMedia() not supported.");
            return;
         }
         All_mediaDevices.getUserMedia({
            audio: true,
            video: true
         })
         .then(function(vidStream) {
            var video = document.getElementById('videoCam');
            if ("srcObject" in video) {
               video.srcObject = vidStream;
            } else {
               video.src = window.URL.createObjectURL(vidStream);
            }
            video.onloadedmetadata = function(e) {
               video.play();
            };
         })
         .catch(function(e) {
            console.log(e.name + ": " + e.message);
         });
      }
   </script>
</body>
</html>

Utilisez CSS pour concevoir l'interface

Tout d’abord, concevons notre interface Web en utilisant HTML et CSS.

Nous ajoutons un composant comme la zone vidéo de la webcam et utilisons CSS pour définir sa hauteur et sa largeur sur 400 px et la couleur d'arrière-plan sur noir. Il affichera le flux vidéo de la webcam.

Ajoutez un bouton nommé Ouvrir la caméra et appliquez ses propriétés CSS ; ce bouton servira à lancer la webcam.

Nous allons maintenant ajouter le code de fonction et l'intégrer dans le programme principal.

Nous appellerons cette fonction lorsque vous cliquerez sur le bouton OpenCamera et dans cette fonction, toutes les instructions se dérouleront comme indiqué ci-dessus.

Exemple

Dans l'exemple ci-dessous, nous avons ajouté du CSS pour concevoir une interface plus interactive.

<html>
<head>
   <title>Open webcam using JavaScript.</title>
   <style>
      *{
         background-color: #658EA9;
      }
      #videoCam {
         width: 630px;
         height: 300px;
         margin-left: 0px;
         border: 3px solid #ccc;
         background: black;
      }
      #startBtn {
         margin-left: 280px;
         width: 120px;
         height: 45px;
         cursor: pointer;
         font-weight: bold;
      }
      #startBtn:hover{
         background-color: #647C90;
         color: red;
      }
   </style>
</head>
<body>
   <h1>Open WebCam Using JavaScript</h1>
   <br/>
   <video id="videoCam"></video>
   <br/><br/>
   <button id="startBtn" onclick="openCam()">Open Camera</button>
   <script>
      function openCam(){
         let All_mediaDevices=navigator.mediaDevices
         if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
            console.log("getUserMedia() not supported.");
            return;
         }
         All_mediaDevices.getUserMedia({
            audio: true,
            video: true
         })
         .then(function(vidStream) {
            var video = document.getElementById('videoCam');
            if ("srcObject" in video) {
               video.srcObject = vidStream;
            } else {
               video.src = window.URL.createObjectURL(vidStream);
            }
            video.onloadedmetadata = function(e) {
               video.play();
            };
         })
         .catch(function(e) {
            console.log(e.name + ": " + e.message);
         });
      }
   </script> 
</body>
</html>

Comme vous pouvez le constater sur l'écran de sortie, lorsque nous cliquons sur le bouton "Ouvrir la caméra", il demande l'accès à la webcam et lorsque nous autorisons cet accès, il démarre le flux vidéo de la webcam dans l'écran de la zone vidéo ; si nous ne le faisons pas Si vous n'accordez pas l'accès, il n'affichera aucune sortie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir la hauteur d'une ellipse à l'aide de FabricJS ?Article suivant：Comment définir la hauteur d'une ellipse à l'aide de FabricJS ?

Articles Liés

Voir plus