L12:Practica 5_1
- Tiempo: 2h
- Fecha: Jueves, 13 de Mayo de 2021
-
Objetivos de la sesión:
- Presentar la práctica 5
- Experimentar con el vídeo remoto
- Introducción
- Enunciado de la práctica 5 (ESPECIFICACIONES)
- Ejemplo 1: Selección de una cámara
- ¡A practicar!
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
En esta práctica vamos a trabajar con varias fuentes de vídeo remotas. Se quiere hacer una aplicación web que simula un estudio en el que se tienen diferentes cámaras. El realizador recibe imágenes de dos cámaras y decide cuál es el que se emite en cada momento
Realizador de TV. Esta aplicación web debe mostrar simultáneamente las dos fuentes de vídeo remotas, procedentes de las cámaras (nosotros usameros vídeos para simular las cámaras). En la parte superior, en grande, se mostrará el vídeo que se está emitiendo en directo. Mediante tres botones la persona encargada de las emisiones (el realizador) seleccionará qué fuente de vídeo es la que se muestra en la parte superior (que es la que se está emitiendo en directo). La fuente puede ser la cámara 1, la cámara 2 o bien una imagen estática de prueba (test)
Inicialmente la aplicación arranca con las cámaras apagadas, y la imagen que se está emitiendo es la de pruebas. Los vídeos de las cámaras mostrarán también esta imagen de pruebas
En esta situación ninguno de los botones tendrán efecto alguno, salvo el de Fuentes ON. Al apretarlo se empezarán a reproducir los vídeos que simulan las fuentes de las cámaras. Estos videos deberán ser remotos. Es decir, NO LOS SUBAS a tu repositorio, porque ocupan mucho (y la corrección y pruebas se complican). Puedes utilizar estos vídeos remotos para tus pruebas, que fueron grabados por estudiantes de ISAM
- https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente1.mp4
- https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente2.mp4
- https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente3.mp4
Tras apretar el botón de Fuentes ON esta es la situación:
Ahora, con los botones Vídeo 1, Vídeo 2 y Test se seleccionará lo que se quiere emitir en directo: la cámara 1, la cámara 2 ó una imagen de pruebas
Si se aprieta el botón Fuentes OFF aparecerá la imagen de Test en todas las cámaras y el vídeo en directo, y se vuelve a la situación inicial
Puedes utilizar los vídeos que quieras para simular las cámaras, pero asegúrate de que sean fuentes remotas (y no ficheros .mp4 situados en tu repositorio)
Los vídeos que se reproducen en las cámaras deberán estar en silencio (muted). Sólo se escuchará el vídeo que se está emitiendo en directo
Puedes añadir las mejoras que consideres necesarias y que te apetezca explorar. Estas son algunas propuestas:
-
Modo automático: Mediante un botón se activará el modo automático. Si se está en este modo, se retransmiten 3 segundos de cada cámara, alternativamente. Los pulsadores de selección no deberán funcionar en este modo. Al apretar el pulsador de modo manual, se vuelve al modo normal
-
Reproducción en bucle: Si se activa este modo, cada vez que se selecciona una fuente, se reproduce sólo durante 2 segundos y se vuelve atrás (2 segundos), repitiéndose ese trozo de dos segundos en bucle, constantemente. Mientras está activo ese modo se debe poder cambiar la fuente de vídeo (y el bucle se hará con la nueva fuente)
En este ejemplo se muestra el uso de varias propiedades de los elementos de vídeo. Ambos vídeos comienzan mostrando la imagen de test. Al apretar el botón de Fuentes ON se muestra la imagen de la cámara 1. Con los botones Vídeo 1 y Test se selecciona el vídeo de la cámara 1 ó de la imagen de prueba respectivamente
En esta animación se muestra el funcionamiento:
- Fichero HTML (Ej-01.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Ej-01.js" defer></script>
<title>Ejemplo 1</title>
</head>
<body>
<video id="directo"></video>
<p></p>
<video id="video1"></video>
<p></p>
<input type="button" value="Video 1" id="btn_video1">
<input type="button" value="Test" id="btn_test">
<p></p>
<input type="button" value="Fuentes ON" id="btn_src_on">
</body>
</html>- Fichero js (Ej-01.js)
//----- Obtener elemento de video y configurarlo
let directo = document.getElementById("directo");
const video1 = document.getElementById("video1");
const btn_video1 = document.getElementById("btn_video1");
const btn_test = document.getElementById("btn_test");
const btn_src_on = document.getElementById("btn_src_on");
//-- Establecer las dimensiones de los vídeos
directo.width=420;
directo.height=200;
video1.width=200;
video1.height=100;
//-- Imagen de Test usada
const TEST_IMAGE_URL = "test.png";
//-- Imagen estática a mostrar cuando el video no
//-- ha arrancado
directo.poster = TEST_IMAGE_URL;
video1.poster = TEST_IMAGE_URL;
//-- Boton de FUENTES-ON
btn_src_on.onclick = () => {
//-- Establecer la fuente de la cámara 1
video1.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente1.mp4";
//-- Reprodeucimos un vídeo, desde el comienzo
video1.currentTime = 0;
video1.play();
//-- Y en silencio...
video1.muted;
//-- En la emisión en directo ponemos la imagen de prueba
directo.poster = TEST_IMAGE_URL;
};
//-- Botón de Test
btn_test.onclick = () => {
directo.poster = TEST_IMAGE_URL;
directo.src = null;
};
//-- Botón de Selección de la cámara 1
btn_video1.onclick = () => {
directo.src = video1.src;
directo.currentTime = video1.currentTime;
directo.play();
directo.poster=null;
};Para orientarte en la realización de la práctica haz los siguientes ejercicios:
Pon en marcha el Ejemplo 1 mostrado en esta sesión. Será la base para la realización de la práctica. Estudia el código y comprende cómo funciona
El programa tiene dos estados. Uno es el inicial, donde no se está retransmitiendo nada (y en el vídeo superior se muestra la imagen de test). El otro es cuando las fuentes están activadas. Utiliza una variable de estado para que se pueda cambiar de un estado a otro cuando convenga. Si se está en el estado inicial y se aprieta el botón vídeo 1 no debería suceder nada (en el Ejemplo 1 la imagen de test se elimina)
Añade una segunda fuente de vídeo y el botón para seleccionarla
Añade del botón de Fuentes OFF y asegúrate de que todo te está funcionando bien
Añade estilo y los últimos retoques. Implementa mejoras opcionalmente
- Haz el Ejemplo 1 de esta sesión, y asegúrate de comprenderlo bien
- Has los ejercicios 1 - 5
¡Enhorabuena! En cuanto termines esta prácticas habrá completado la asignatura de CSAAI. ¡Mucha suerte en el examen! 😀️
Espero que esta asignatura te haya gustado y te haya parecido útil. Sólo hemos podido ver la punta del iceberg. Hay todo un mundo ahí para que lo descubras. ¡Te animo a que sigas aprendiendo por tu cuenta!
- Juan González-Gómez (Obijuan)
- Creado a partir del contenido generado por el profesor Jose María Cañas
