Comment afficher l’aperçu d’une vidéo à partir d’un appareil photo (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Vous pouvez associer un appareil photo à une balise <video> pour afficher un aperçu de la vidéo.
Remarque Cette rubrique décrit comment associer par programmation la caméra au contrôle vidéo HTML5. Elle ne décrit pas l’objet CameraCaptureUI (« sélecteur de caméra »). En outre, cette rubrique concerne spécifiquement les applications Windows Runtime en JavaScript. Les applications Windows Runtime en C++, C# ou Visual Basic utilisent une API différente.
Prérequis
Cette rubrique part du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en JavaScript.
Instructions
Étape 1: Définir la capacité du périphérique dans le manifeste de l’application
Pour activer l’accès à la webcam, les applications doivent d’abord inclure l’élément DeviceCapability correspondant dans le manifeste de l’application.
- Dans Microsoft Visual Studio, ouvrez le concepteur pour le manifeste de l’application en double-cliquant sur l’élément package.appxmanifest dans l’Explorateur de solutions.
- Cliquez sur les Capacités.
- Activez la case à cocher Webcam.
Étape 2: Ajouter le code
La balise vidéo peut être utilisée pour l’aperçu vidéo de la webcam.
<script type="text/javascript">
function init(){
var mediarec = new Windows.Media.MediaRecorder();
var opInitializeRecorder = mediarec.initializeAsync(null);
opInitializeRecorder.start();
}
function preview(){
var myVideo = document.getElementById("videoTag1");
myVideo.src = URL.createObjectURL(mediarec);
myVideo.play();
}
</script>