Comment ouvrir une webcam en utilisant 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi
jQuery Vérifiez si la date est valide
Mar 01, 2025 am 08:51 AM
Des fonctions JavaScript simples sont utilisées pour vérifier si une date est valide. fonction isValidDate (s) { var bits = s.split ('/'); var d = new Date (bits [2] '/' bits [1] '/' bits [0]); return !! (d && (d.getMonth () 1) == bits [1] && d.getDate () == Number (bits [0])); } //test var
jQuery obtient un rembourrage / marge d'élément
Mar 01, 2025 am 08:53 AM
Cet article explique comment utiliser jQuery pour obtenir et définir les valeurs de marge et de marge intérieures des éléments DOM, en particulier les emplacements spécifiques de la marge extérieure et des marges intérieures de l'élément. Bien qu'il soit possible de définir les marges intérieures et extérieures d'un élément à l'aide de CSS, l'obtention de valeurs précises peut être délicate. // installation $ ("div.header"). CSS ("marge", "10px"); $ ("div.header"). css ("padding", "10px"); Vous pourriez penser que ce code est
10 onglets jQuery Accordion
Mar 01, 2025 am 01:34 AM
Cet article explore dix onglets jQuery exceptionnels et accordéons. La principale différence entre les onglets et les accordéons réside dans la façon dont leurs panneaux de contenu sont affichés et cachés. Plongeons ces dix exemples. Articles connexes: 10 plugins de l'onglet jQuery
10 vaut la peine de vérifier les plugins jQuery
Mar 01, 2025 am 01:29 AM
Découvrez dix plugins jQuery exceptionnels pour élever le dynamisme et l'attrait visuel de votre site Web! Cette collection organisée offre diverses fonctionnalités, de l'animation d'image aux galeries interactives. Explorons ces outils puissants: Related Posts: 1
Http débogage avec le nœud et le http-console
Mar 01, 2025 am 01:37 AM
HTTP-Console est un module de nœud qui vous donne une interface de ligne de commande pour exécuter les commandes HTTP. C'est idéal pour le débogage et voir exactement ce qui se passe avec vos demandes HTTP, qu'elles soient faites contre un serveur Web, Web Serv
Tutoriel de configuration de l'API de recherche Google personnalisé
Mar 04, 2025 am 01:06 AM
Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y
jQuery Ajouter une barre de défilement à div
Mar 01, 2025 am 01:30 AM
L'extrait de code jQuery suivant peut être utilisé pour ajouter des barres de défilement lorsque le contenu DIV dépasse la zone de l'élément de conteneur. (Pas de démonstration, veuillez le copier directement sur Firebug) // d = document // w = fenêtre // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ('# c
