Est-il possible d'intégrer deux flux webcam sur une page Html à partir d'une ou plusieurs caméras.

Je tente d'intégrer deux flux webcam sur une page HTML.

Je suis utilisé pour obtenir un script média utilisateur que j'ai obtenu de ce site https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

Il fonctionne bien pour une vapeur, mais quand j'essaie de créer deux flux vidéo différents sur la même page, cela ne fonctionne pas.

J'ai essayé de faire une balise div avec une grille et de mettre un élément vidéo dans chaque cellule. Il en résulte un seul flux.

Voici mon dernier essai

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="stuff, to, help, search, engines, not" name="keywords"> <meta content="What this page is about." name="description"> <meta content="Display Webcam Stream" name="title"> <title>Display Webcam Stream</title> <style> #container { margin: 0px auto; width: 500px; height: 375px; border: 10px #333 solid; } #videoElement { width: 500px; height: 375px; background-color: #666; } #container2 { margin: 0px auto; width: 500px; height: 375px; border: 10px #333 solid; } #videoElement2 { width: 500px; height: 375px; background-color: #666; } </style> </head> <body style=""> <div id="container"> <video autoplay id="videoElement"> </video> </div> <div id="container2"> <video2 autoplay="true" id="videoElement2"> </video2> </div> <script> var video = document.querySelector("#videoElement"); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ video: true }, handleVideo, videoError); } function handleVideo(stream) { video.src = window.URL.createObjectURL(stream); } function videoError(e) { // do something } </script> </body> </html>

J'apprécie toute aide. Je vous remercie.

Vous dites à un élément video qui se déroule en définissant sa propriété src .

Fondamentalement, vous devez dupliquer tout le code qui supporte le videoElement ici, pas seulement sa création.

Un problème auquel vous rencontrerez est que de nombreux navigateurs craignent d'appeler getUserMedia deux fois en même temps (avant que l'appel asynchrone précédent ne soit terminé), car cela accable les utilisateurs avec plusieurs invites à la fois. Pour contourner cela, mettez le deuxième appel à getUserMedia intérieur de handleVideo , pour ne pas déranger l'utilisateur avec une invite à la fois.

Le troisième problème auquel vous rencontrerez, c'est que seul Firefox a intégré la sélection de l'appareil dans l'invite d'autorisation, de sorte que sur Chrome, vous obtiendrez la même caméra deux fois.

Pour que cela fonctionne sur d'autres navigateurs, vous aurez besoin d' enumerateDevices . Je l'ai déjà répondu .

Enfin, la plupart des téléphones intelligents sont dotés d'un matériel limité et ne peuvent pas utiliser les deux caméras à la fois.