detectar entradas HDMI o RCA con php
Publicado por Xavi Lavigne (1 intervención) el 29/09/2019 18:25:09
buenas tardes amigos, un favor .... estoy trabajando con un proyecto donde necesito la deteccion de los dispositivos de video instalados en el equipo que visita la pagina web (webCam, adaptadores de video, etc)..... todo esta perfecto hasta ese punto, pero se me ocurrio probarlo en una TV SMART pero me di cuenta que no detecta los dispositivos HDMI ni RCA de la TV.
Les dejo mi codigo js de deteccion de dispositivos de video (que funciona perfecto con Computadoras, tablets, y telefonos... pero no con TVs).
Les dejo mi codigo js de deteccion de dispositivos de video (que funciona perfecto con Computadoras, tablets, y telefonos... pero no con TVs).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
const tieneSoporteUserMedia = () =>
!!(navigator.getUserMedia || (navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia) || navigator.webkitGetUserMedia || navigator.msGetUserMedia)
const _getUserMedia = (...arguments) =>
(navigator.getUserMedia || (navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia) || navigator.webkitGetUserMedia || navigator.msGetUserMedia).apply(navigator, arguments);
// Declaramos elementos del DOM
const $video = document.querySelector("#video"),
$canvas = document.querySelector("#canvas"),
$estado = document.querySelector("#estado"),
$boton = document.querySelector("#boton"),
$listaDeDispositivos = document.querySelector("#listaDeDispositivos");
const limpiarSelect = () => {
for (let x = $listaDeDispositivos.options.length - 1; x >= 0; x--)
$listaDeDispositivos.remove(x);
};const obtenerDispositivos = () => navigator
.mediaDevices.enumerateDevices();
// La función que es llamada después de que ya se dieron los permisos
// Lo que hace es llenar el select con los dispositivos obtenidos
const llenarSelectConDispositivosDisponibles = () => {
limpiarSelect();
obtenerDispositivos()
.then(dispositivos => {
const dispositivosDeVideo = [];
dispositivos.forEach(dispositivo => {
const tipo = dispositivo.kind;
if (tipo === "videoinput") {
dispositivosDeVideo.push(dispositivo);
}});
// Vemos si encontramos algún dispositivo, y en caso de que si, entonces llamamos a la función
if (dispositivosDeVideo.length > 0) {
// Llenar el select
dispositivosDeVideo.forEach(dispositivo => {
const option = document.createElement('option');
option.value = dispositivo.deviceId;
option.text = dispositivo.label;
$listaDeDispositivos.appendChild(option);
});
}});
}(function() {
// Comenzamos viendo si tiene soporte, si no, nos detenemos
if (!tieneSoporteUserMedia()) {
alert("Lo siento. Tu navegador no soporta esta característica");
$estado.innerHTML = "Parece que tu navegador no soporta esta característica. Intenta actualizarlo.";
return;
} //Aquí guardaremos el stream globalmente
let stream;
// Comenzamos pidiendo los dispositivos
obtenerDispositivos()
.then(dispositivos => {
// Vamos a filtrarlos y guardar aquí los de vídeo
const dispositivosDeVideo = [];
// Recorrer y filtrar
dispositivos.forEach(function(dispositivo) {
const tipo = dispositivo.kind;
if (tipo === "videoinput") {
dispositivosDeVideo.push(dispositivo);
}});
// Vemos si encontramos algún dispositivo, y en caso de que si, entonces llamamos a la función
// y le pasamos el id de dispositivo
if (dispositivosDeVideo.length > 0) {
// Mostrar stream con el ID del primer dispositivo, luego el usuario puede cambiar
mostrarStream(dispositivosDeVideo[0].deviceId);
}});
const mostrarStream = idDeDispositivo => {
_getUserMedia({
video: {
// Justo aquí indicamos cuál dispositivo usar
deviceId: idDeDispositivo,
}},
(streamObtenido) => {
// Aquí ya tenemos permisos, ahora sí llenamos el select,
// pues si no, no nos daría el nombre de los dispositivos
llenarSelectConDispositivosDisponibles();
// Escuchar cuando seleccionen otra opción y entonces llamar a esta función
$listaDeDispositivos.onchange = () => {
// Detener el stream
if (stream) {
stream.getTracks().forEach(function(track) {
track.stop();
});
} // Mostrar el nuevo stream con el dispositivo seleccionado
mostrarStream($listaDeDispositivos.value);
} // Simple asignación
stream = streamObtenido; // Mandamos el stream de la cámara al elemento de vídeo
$video.srcObject = stream;
$video.play();
//Escuchar el click del botón para tomar la foto
//Escuchar el click del botón para tomar la foto
$boton.addEventListener("click", function() {
//Pausar reproducción
$video.pause();
playsoundfoto();
//Obtener contexto del canvas y dibujar sobre él
let contexto = $canvas.getContext("2d");
$canvas.width = $video.videoWidth;
$canvas.height = $video.videoHeight;
contexto.drawImage($video, 0, 0, $canvas.width, $canvas.height);
let foto = $canvas.toDataURL(); //Esta es la foto, en base 64
$estado.innerHTML = "Enviando foto. Por favor, espera...";
fetch("metodos/guardar.php", {
method: "POST",
body: encodeURIComponent(foto),
headers: {
"Content-type": "application/x-www-form-urlencoded",
}})
.then(resultado => {
// A los datos los decodificamos como texto plano
return resultado.text()
})
.then(nombreDeLaFoto => {
// nombreDeLaFoto trae el nombre de la imagen que le dio PHP
console.log("La foto fue enviada correctamente");
$estado.innerHTML = `Foto guardada con éxito. Puedes verla <a target='_blank' href='./${nombreDeLaFoto}'> aquí</a>`;
})
//Reanudar reproducción
$video.play();
});
}, (error) => {
console.log("Permiso denegado o error: ", error);
$estado.innerHTML = "No se puede acceder a la cámara, o no diste permiso.";
});
}})();
Valora esta pregunta
0