GetUserMedia

par **two3d** » 13 déc. 2023, 20:06

J'en aurais pas besoin, merci.

J'avais vu ce tuto à l'époque, peut être qu'il pourra t'aider : https://grafikart.fr/tutoriels/webrtc-864

par **alain68** » 13 déc. 2023, 19:36

Bonsoir two3d , bonsoir à tous.
J'ai visionné les créations d'un chat websoket, oulala , lol
Je suis très loin de savoir codé comme cela, a la limite un tuto écrit d'étape par étape, oui, mais la...
Après, je ne sais pas si tu voudrais absolument un chat soket que tu crée toi même, ou démarrer, ce qui est mon cas, sur un chat existant et le transformer?
Un chat de discussion, j'ai pour toi au besoin, la version html5 des anciens kikoochat.
Très bon chat entièrement personnalisable avec panel admin très complet, au besoin je peu te le fournir.
Pour revenir au tuto getusermedia, et bien oui, mon projet serais de reprendre ce chat existant, mais au lieu de faire appelle a flashplayer pour
les webcam, j'y introduirais ce système.
Après, est possible?? je n'en sais trop rien.
merci de vos réponses.

par **two3d** » 13 déc. 2023, 09:20

Oui, tu peux poster à la suite.

Pour le code PHP qui fonctionne pas, plusieurs possibilités :

- Le code n'est pas dans une page avec extension .php
- La page n'est pas exécutée sur un serveur (Windows ne converti pas le PHP, il affiche seulement le HTML)

Vérifie la console de ton navigateur et voit ce qu'elle affiche, si ya une erreur de code, elle te le dira (touche F12).

PS : ton TP est exactement ce que je cherche à faire : diffuser ma webcam + audio + tchat (j'ai ouvert un topic pour comprendre comment créer un serveur websocket car je pense que c'est ce qu'il faut pour diffuser en temps réel)

par **alain68** » 13 déc. 2023, 00:48

bonsoir à tous, tous d'abord merci de vos réponses, génial vous êtes.
Vos codes sont tous parfais, c'est bien cela que je cherchais.
Je vais demander avant de poste a la suite sur ce topic, ou si je dois en créer un autre, car je voudrais allez plus loin dans ce projet.
par exemple, comment une personne extérieur a moi, peut lui afficher et donc voir ma cam??
Mais je vais d'abord attendre votre réponse.
(pour le code php, un grand merci mais quand je l'essaye, rien ne ce passe, sur un edditeur en ligne, pareil), mais un grand merci pour ca

par **two3d** » 12 déc. 2023, 12:20

J'avais fait ce code à l'époque, tu me dira si il fonctionne :

<?php

//taille de la vidéo
//160×120 240×160 320×240 320×480 640×480 800×600 1024×600 1024×768 1280×720 1280×1024 1366×768 1400×1050 1600×1024 1600×1200 1920×1080 2048×1536 2560×1440 2560×2048 3840×2400 3840×2160 4096×3072 5120×4096 6400×4800 7680×4320 8192×6144 16384×12288
$_width = 320;
$_height = 240;


?><!DOCTYPE html> 
<html>
<head>
  <title>HTML5 Camera</title> 
  <meta charset="utf-8">
</head>
<body>
	<script>
	
	let front = false;
	
	document.getElementById('flip-button').onclick = function(){
		front = !front;
	};
	
	function init(){
		
		navigator.mediaDevices.getUserMedia({
			
			audio: false,
			video:{
				
				width:{ideal: <?=$_width?>},
				height:{ideal: <?=$_height?>},
				
				frameRate: { ideal: 10, max: 15 },
				
				//Caméra avant et arrière sur les téléphones portables :
				facingMode: (front? "user" : "environment")
			}
			
		}).then(function(mediaStream){
			
			let video = document.getElementById('sourcevid');
			
			video.srcObject = mediaStream;
			
			video.onloadedmetadata = function(e){
				video.play();
			};
			
		}).catch(function(err){
			
			alert(err.name + ": " + err.message);
			
		});
	}
	function photo(){
		
		let sourcevid = document.getElementById('sourcevid');
		let canvas = document.getElementById('cvs').getContext('2d');
		canvas.drawImage(sourcevid, 0, 0, <?=$_width?>, <?=$_height?>);
		
		//retourne l'image au format base 64
		let base64 = document.getElementById('cvs').toDataURL("image/png"); 
		document.getElementById('tar').value = base64;
	}
	
	window.onload = init;
	
	</script>
	
	<button id="flip-button">FLIP CAMERA (Smartphone)</button>
	
	<video id="sourcevid" width="<?=$_width?>"  height="<?=$_height?>" autoplay="true"></video>
	
	<canvas id="cvs" width="<?=$_width?>"  height="<?=$_height?>"></canvas>
	
	<button onclick='photo()'>Prendre photo</button>
	
	<textarea id='tar' style='width:50%;height:200px;'></textarea>
	
</body>
</html>

Adapté de https://developer.mozilla.org/fr/docs/W ... tUserMedia il me semble.

par **@rthur** » 12 déc. 2023, 10:49

Bonjour,

Voici quelques pistes :
https://webrtc.github.io/samples/src/co ... media/gum/
https://web.dev/articles/getusermedia-intro?hl=fr
https://codepen.io/flaviocopes/pen/wZXzbB

Un point important, c'est que l'accès à la webcam ne peut se faire que sur une page en https.

par **alain68** » 11 déc. 2023, 22:53

Bonjour, après un tour des topics, je ne vois rien qui concerne le getusermedia, donc je vous poste mon message.
Je voulais faire un bouton, ou une page de déclenchement de la webcam automatiquement.
J'ai donc mis mon code, que j'ai essayer en localhost, sur un domaine, et sur un server dédié.
L'appelle de la webcam ce fait bien oui, cela me demande bien d'autorisé ou pas, j'autorise bien sure, l'icone webcam clignote dans la barre d'adresse, mais la webcam n'apparait pas.
est ce possible de m'aider svp?
Ou pourriez vous me diriger vers un code ou topics avec un code html5 ou autres qui ferait cette action, merci

GetUserMedia

Répondre

Étendre la vue Revue du sujet : GetUserMedia

Re: GetUserMedia

Re: GetUserMedia

Re: GetUserMedia

Re: GetUserMedia

Re: GetUserMedia

Re: GetUserMedia

GetUserMedia