Sesion Laboratorio 15 Practica 6 1 - jesusgpa/2023-2024-CSAAI GitHub Wiki

Sesión Laboratorio 15: Extra

  • Tiempo: 2h
  • Fecha: Jueves, 27 de Abril de 2023
  • Objetivos de la sesión:
    • Experimentar con el vídeo remoto

Contenido

Introducción

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 usaremos 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

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.

Mejoras

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).

Ejemplo 1: Selección de una cámara

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">
    <link rel="stylesheet" href="Ej-01.css">
    <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" class="btn" value="Video 1" id="btn_video1">
    <input type="button" class="btn" value="Test" id="btn_test">
    <p></p>
    <input type="button" class="btn" 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";

  //-- Reproducimos 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;
};
  • Fichero css (Ej-01.css)
.btn {
    background: #282A3A;
    color: #FFF;
    border-radius: 5px;
    padding: 10px 20px;
    border: 0;
    cursor: pointer;
    font-size: 18pt;
}

video {
    cursor: pointer;
}

¡A practicar!

Para orientarte en la realización de la práctica haz los siguientes ejercicios:

Ejercicio 1

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

Resumen de tareas a realizar

  • Haremos en clase el ejercicio de esta sesión y veremos como funciona

Conclusiones

¡Enhorabuena!

¡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.

⚠️ **GitHub.com Fallback** ⚠️