One place for hosting & domains

      Cómo reiniciar sus aplicaciones Node.js automáticamente con nodemon


      Introducción

      En Node.js, debe reiniciar el proceso para que los cambios surtan efecto. Eso añade un otro paso a su flujo de trabajo para que los cambios surtan efecto. Puede eliminar este paso adicional usando nodemon para reiniciar el proceso automáticamente.

      nodemon es una utilidad de interfaz de línea de comandos (CLI) desarrollada por @rem que envuelve su aplicación Node, vigila el sistema de archivos y reinicia automáticamente el proceso.

      En este artículo, aprenderá cómo instalar, preparar y configurar nodemon.

      Requisitos previos

      Si desea seguir este artículo, necesitará:

      Paso 1: Instalar nodemon

      Primero, deberá instalar nodemon en su equipo. Instale la utilidad global o localmente en su proyecto usando nom o Yarn:

      Instalación global

      Puede instalar nodemon globalmente con npm:

      O con Yarn:

      Instalación local

      También puede instalar nodemon localmente con npm. Cuando realice una instalación local, podemos instalar nodemon como dependencia dev con --save-dev (o --dev):

      • npm install nodemon --save-dev

      O con Yarn:

      Algo que debe tenerse en cuenta con una instalación local es que no podrá usar el comando nodemon directamente desde la línea de comandos:

      Output

      • command not found: nodemon

      Sin embargo, puede usarlo como parte de algunas secuencias de comandos de npm o con npx.

      Con esto finalizará el proceso de instalación de nodemon. A continuación, usaremos nodemon con nuestros proyectos.

      Paso 2: Configurar un proyecto Express de ejemplo con nodemon

      Puede usar nodemon para iniciar una secuencia de comandos de Node. Por ejemplo, si tenemos una configuración de servidor Express en un archivo server.js, podemos iniciarlo y vigilar los cambios de esta forma:

      Puede pasar argumentos de la misma forma que si estuviese ejecutando la secuencia de comandos con Node:

      Cada vez que realice un cambio a un archivo con una de las extensiones vigiladas por defecto (.js, .mjs, .json, .coffee o .litcoffee) en el directorio actual o en un subdirectorio, el proceso se reiniciará.

      Vamos a suponer que escribimos un archivo server.js de ejemplo que da como resultado el mensaje Dolphin app listening on port ${port}!.

      Podemos ejecutar el ejemplo con nodemon:

      Vemos el siguiente resultado del terminal:

      Output

      [nodemon] 1.17.3 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node server.js` Dolphin app listening on port 3000!

      Aunque nodemon aún está ejecutándose, vamos a realizar un cambio al archivo server.js para que dé como resultado el mensaje: Shark app listening on port ${port}!.

      Vemos el siguiente resultado adicional del terminal:

      Output

      [nodemon] restarting due to changes... [nodemon] starting `node server.js` Shark app listening on port 3000!

      El resultado del terminal desde nuestra aplicación Node.js se muestra como se espera. Puede reiniciar el proceso en cualquier momento escribiendo rs y presionando ENTER.

      Como alternativa, nodemon también buscará un archivo main especificado en el archivo package.json de su proyecto:

      package.json

      {
        // ...
        "main": "server.js",
        // ...
      }
      

      O una secuencia de comandos start:

      package.json

      {
        // ...
        "scripts": {
          "start": "node server.js"
        },
        // ...
      }
      

      Una vez que realice los cambios a package.json, puede invocar nodemon para iniciar la aplicación de ejemplo en modo de vigilancia sin tener que pasar server.js.

      Paso 3: Usar las opciones

      Puede modificar los ajustes de configuración disponibles para nodemon.

      Vamos a repasar algunas de las opciones principales:

      • --exec: Utilice el interruptor --exec para especificar un binario con el que ejecutar el archivo. Por ejemplo, cuando se combina con el binario ts-node, --exec puede ser útil para vigilar los cambios y ejecutar archivos TypeScript.
      • --ext: Especifique diferentes extensiones de archivo que vigilar. Para este interruptor, proporcione una lista separada por comas de extensiones de archivo (por ejemplo, --ext.js,ts).
      • --delay: Por defecto, nodemon espera un segundo para reiniciar el proceso cuando un archivo cambia, pero puede especificar un retraso diferente con el interruptor --delay. Por ejemplo, nodemon --delay 3.2 para un retraso de 3,2 segundos.
      • --watch: Utilice el interruptor --watch para especificar múltiples directorios o archivos que vigilar. Añada un interruptor --watch para cada directorio que desee vigilar. Por defecto, el directorio actual y sus subdirectorios se vigilan, de forma que con --watch puede estrechar eso a solo subdirectorios o archivos específicos.
      • --ignore: Utilice el interruptor --ignore para ignorar ciertos archivos, patrones de archivo o directorios.
      • --verbose: Un resultado con más texto con información sobre qué archivos cambiaron para activar un reinicio.

      Puede ver todos las opciones disponibles con el siguiente comando:

      Usando estas opciones, vamos a crear el comando para satisfacer el siguiente escenario:

      • vigilar el directorio del servidor
      • “especificando
      • ignorar archivos con un sufijo .test.ts
      • ejecutar el archivo (server/server.ts) con ts-node
      • esperar tres segundos para reiniciar tras un cambio de archivo
      • nodemon --watch server --ext ts --exec ts-node --ignore '*.test.ts' --delay 3 server/server.ts

      Este comando combina las opciones --watch, --ext, --exec, --ignore y --delay para satisfacer las condiciones de nuestro escenario.

      Paso 4: Usar las configuraciones

      En el ejemplo anterior, añadir interruptores de configuración cuando se ejecuta nodemon puede ser algo tedioso. Una mejor solución para los proyectos que necesitan configuraciones específicas es especificar estas configuraciones en un archivo nodemon.json.

      Por ejemplo, aquí están las mismas configuraciones que en el ejemplo de línea de comandos anterior, pero colocados en un archivo nodemon.json:

      nodemon.json

      {
        "watch": ["server"],
        "ext": "ts",
        "ignore": ["*.test.ts"],
        "delay": "3",
        "execMap": {
          "ts": "ts-node"
        }
      }
      

      Observe el uso de execMap en vez del interruptor --exec. execMap le permite especificar binarios que deberían usarse dadas algunas extensiones de archivo.

      Alternativamente, si prefiere no añadir un archivo de configuración nodemon.json a su proyecto, puede añadir estas configuraciones al archivo package.json bajo la clave nodemonConfig:

      package.json

      {
        "name": "test-nodemon",
        "version": "1.0.0",
        "description": "",
        "nodemonConfig": {
          "watch": [
            "server"
          ],
          "ext": "ts",
          "ignore": [
            "*.test.ts"
          ],
          "delay": "3",
          "execMap": {
            "ts": "ts-node"
          }
        },
        // ...
      

      Una vez que realice los cambios a nodemon.json o package.json, puede iniciar nodemon con la secuencia de comandos deseada:

      nodemon recogerá las configuraciones y las utilizará. De esta forma puede guardar, compartir y repetir sus configuraciones para evitar copiar y pegar o escribir errores en la línea de comandos.

      Conclusión

      En este artículo, ha explorado cómo usar nodemon con sus aplicaciones Node.js. Esta herramienta ayuda a automatizar el proceso de detener e iniciar un servidor Node para ver los cambios.

      Para obtener más información sobre las funciones disponibles y resolver problemas, consulte la documentación oficial.

      Si desea saber más sobre Node.js, consulte nuestra página del tema Node.js para consultar ejercicios y proyectos de programación.





      Source link

      Cómo crear elementos de arrastrar y soltar con Vanilla JavaScript y HTML


      Introducción

      Arrastrar y soltar es una interacción de usuario común que se puede encontrar en muchas interfaces de usuario gráficas.

      Existen bibliotecas de JavaScript preexistentes para añadir la función de arrastrar y soltar a su aplicación. Sin embargo, es posible que haya situaciones en las que una biblioteca no esté disponible o que introduzca una dependencia o gasto general que su proyecto no necesita. En estas situaciones, conocer qué API están disponibles para usted en los navegadores web modernos puede ofrecer soluciones alternativas.

      La API Drag and Drop HTML se basa en el modelo de evento del DOM para obtener información sobre lo que se está arrastrando o soltando y actualizar ese elemento en arrastrar o saltar. Con los controladores de eventos de JavaScript, puede convertir cualquier elemento en un elemento que se puede arrastrar o en un elemento que se puede soltar.

      En este tutorial, crearemos un ejemplo de arrastrar y soltar usando la API Drag and Drop HTML con vanilla JavaScript para usar los controladores de eventos.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      • Un navegador web moderno compatible con la API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Paso 1: Crear el proyecto y marcado inicial

      Nuestro proyecto consistirá en un contenedor con dos tipos de elementos secundarios:

      • Elementos secundarios que puede arrastrar
      • Elementos secundarios en los que se pueden soltar elementos

      Primero, abra la ventana de su terminal y cree un nuevo directorio de proyecto:

      • mkdir drag-and-drop-example

      Luego, diríjase a ese directorio:

      Después, cree un archivo index.html en ese directorio:

      Luego, añada código reutilizable para una página web HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Y entre las etiquetas <body> añada su elemento draggable y su dropzone (objetivo para soltar):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Guarde y cierre el archivo. Después, cree un archivo style.css:

      Luego, añada estilos para los elementos en el archivo index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Esto añadirá un formato para la aplicación. Ahora puede ver index.html en el navegador y observar que esto produce un draggable <div> y un dropzone <div>.

      Captura de pantalla de los divs draggable y dropzone

      Luego, realizaremos explícitamente el primer <div> arrastrable añadiendo el atributo draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Guarde y cierre el archivo.

      Finalmente, vea index.html en el navegador de nuevo. Si hacemos clic en el draggable <div> y lo arrastramos por la pantalla, debería haber una indicación visual de que se está moviendo.

      El valor predeterminado para el atributo draggable es auto. Eso significa que el comportamiento predeterminado de su navegador determinará si el elemento se puede arrastrar. Generalmente, esto significa que las selecciones, las imágenes y los enlaces se pueden arrastrar sin especificar draggable="true".

      Ahora ya tiene un archivo HTML con un elemento que se puede arrastrar. Pasaremos a añadir controladores onevent.

      Paso 2: Gestionar eventos de arrastrar y soltar con JavaScript

      Actualmente, si soltamos el ratón mientras arrastramos el elemento que se puede arrastrar, no pasará nada. Para activar una acción en arrastrar o soltar en elementos DOM, necesitaremos usar la API Drag and Drop:

      • ondragstart: Este controlador de eventos se adjuntará a nuestro elemento draggable y se accionará cuando se produzca un evento dragstart
      • ondragover: Este controlador de eventos estará adjunto a nuestro elemento dropzone y se accionará cuando se produzca un evento dragover
      • ondrop: Este controlador de eventos también estará adjunto a nuestro elemento dropzone y se accionará cuando se produzca un evento drop.

      Nota: En total hay ocho controladores de eventos: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart y ondrop. Para nuestro ejemplo, no los necesitaremos todos.

      Primero, vamos a hacer referencia a un nuevo archivo script.js en el archivo index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Luego, cree un nuevo archivo script.js:

      El objeto DataTransfer realizará un seguimiento de la información relacionada con el arrastre actual. Para actualizar nuestro elemento en arrastrar y soltar, debemos acceder directamente al objeto DataTransfer. Para hacer esto, podemos seleccionar la propiedad dataTransfer desde el DragEvent del elemento DOM.

      Nota: El objeto DataTransfer puede realizar un seguimiento técnico de la información de varios elementos que se arrastran al mismo tiempo. Por nuestro ejemplo, nos enfocaremos en arrastrar un elemento.

      El método setData del objeto dataTransfer se puede usar para configurar la información del estado de arrastre para el elemento que arrastra actualmente. Emplea dos parámetros:

      • una cadena que declara el formato del segundo parámetro
      • los datos reales que se hayan transferido

      Nuestro objetivo es mover nuestro elemento draggable a un nuevo elemento principal. Deberíamos poder seleccionar nuestro elemento draggable con un id único. Podemos configurar el id del elemento arrastrado con el método setData para que pueda utilizarse más adelante.

      Revisemos nuestro archivo script.js y creemos una nueva función para usar setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Nota: Los navegadores Internet Explorer del 9 al 11 aparentemente tienen problemas para usar 'text/plain'. El formato debe 'text' para ese navegador.

      Para actualizar el estilo CSS del elemento arrastrado, podemos acceder a sus estilos usando el evento DOM de nuevo y configurando el estilo que nuestra preferencia para el currentTarget.

      Agreguemos a nuestra función y cambiemos el backgroundColor a yellow:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Nota: Los estilos que cambie deberán actualizarse manualmente de nuevo al soltar si desea estilos de arrastrar solamente. Si cambia algo cuando empieza a arrastrar, el elemento arrastrado mantendrá ese nuevo estilo a menos que lo modifique de nuevo.

      Ahora ya tenemos nuestra función de JavaScript para cuando se inicia el arrastre.

      Podemos añadir ondragstart al elemento draggable en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Vea index.html en su navegador. Si intenta arrastrar su elemento ahora, se aplicará el estilo declarado en nuestra función:

      Gif animado que representa un elemento que se arrastra, pero que no se suelta

      Sin embargo, no pasará nada cuando suelte el botón del ratón.

      El siguiente controlador de eventos que se accionó en esta secuencia es ondragover.

      Normalmente, el comportamiento predeterminado de soltar para ciertos elementos DOM como <div> en navegadores no acepta la función de soltar. Este comportamiento interceptará el comportamiento que estamos tratando de implementar. Para garantizar que obtengamos el comportamiento de soltar deseado, aplicaremos preventDefault.

      Revisemos el archivo script.js y creemos una nueva función para usar preventDefault: Añada este código al final del archivo:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Ahora, podemos añadir ondragover a nuestro elemento dropzone en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      En este momento, aún no hemos escrito el código para controlar la función real de soltar. El controlador de eventos final que se accionó en esta secuencia es ondrop.

      Volvamos a revisar nuestro archivo script.js y creemos una nueva función.

      Podemos hacer referencia a los datos que guardamos anteriormente con el método setData del objeto dataTransfer. Usaremos el método getData del objeto dataTransfer. Los datos que configuramos fueron el id, así que eso es lo que se devolverá:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Seleccione nuestro elemento draggable con el id que recuperamos:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Seleccione nuestro elemento dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Añada nuestro elemento draggable al dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Restablezca nuestro objeto dataTransfer:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Ahora, podemos añadir ondragover a nuestro elemento dropzone en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Una vez hecho esto, tendremos una función de arrastrar y soltar finalizada. Vea index.html en su navegador y arrastre el elemento draggable al dropzone.

      Gif animado que representa un elemento que se arrastra y se suelta en un objetivo para soltar

      Nuestro ejemplo gestiona el caso de un solo elemento que se puede arrastrar y un único objetivo para soltar. Puede tener varios elementos que se pueden arrastrar, varios objetivos para soltar y personalizarlos con todos los demás controladores de eventos de la API Drag and Drop

      Paso 3: Crear un ejemplo avanzado con múltiples elementos que se pueden arrastrar

      Aquí hay un ejemplo más de cómo se podría usar esta API: una lista de cosas por hacer con tareas que se pueden arrastrar de una columna "Tareas pendientes" a otra columna de "Completadas".

      Gif animado que representa múltiples tareas siendo arrastradas y soltadas en la columna Completadas

      Para crear su propia lista de tareas pendientes, añada más elementos que se pueden arrastrar con id únicos a index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Vea index.html en su navegador y arrastre los elementos en la columna Tareas pendientes a la columna Completadas. Ha creado una aplicación de tareas pendientes y ha probado su funcionalidad.

      Conclusión

      En este artículo, creó una app de tareas pendientes para explorar la funcionalidad de arrastrar y soltar que está disponible para los navegadores web modernos.

      La API Drag and Drop proporciona múltiples opciones para personalizar sus acciones más allá de arrastrar y soltar. Por ejemplo, puede actualizar el estilo CSS de sus elementos arrastrados. Además, en vez de mover el elemento, puede elegir copiar el elemento que se puede arrastrar de forma que se duplique al soltarse

      Tenga en cuenta que, si bien muchos navegadores web son compatibles con esta tecnología, es posible que no pueda serle útil si su audiencia tiene dispositivos que no son compatibles con esta funcionalidad.

      Para obtener más información sobre todo lo que puede soltar con la API Drag and Drop , consulte los documentos de MDN.



      Source link

      Cómo acceder a las cámaras delantera y trasera con getUserMedia() de JavaScript


      Introducción

      Con HTML5 llegó la introducción de las API con acceso al hardware del dispositivo, incluyendo la API MediaDevices. Esta API proporciona acceso a dispositivos de entrada multimedia como audio y video.

      Con la ayuda de esta API, los desarrolladores pueden acceder a dispositivos de audio y video para transmitir y mostrar entradas de video en vivo en el navegador. En este tutorial, accederá a la entrada de video desde el dispositivo del usuario y la mostrará en el navegador usando el método getUserMedia:

      La API getUserMedia utiliza los dispositivos de entrada multimedia para producir un MediaStream. Este MediaStream contiene los tipos de multimedia solicitados, se trate de audio o video. Usando el flujo devuelto desde la API, las entradas de video pueden mostrarse en el navegador, lo cual es útil para la comunicación en tiempo real en el navegador.

      Cuando se utiliza junto con la API MediaStream Recording, puede grabar y guardar los datos multimedia capturados en el navegador. Esta API solo funciona en orígenes seguros como el resto de las APIs recién introducidas, pero también funciona en URLs localhost y archivo.

      Requisitos previos

      Este tutorial primero explicará los conceptos y demostrará ejemplos con Codepen. En el paso final, creará una entrada de video funcional para el navegador.

      Paso 1: Comprobar la compatibilidad del dispositivo

      Primero, verá cómo comprobar si el navegador del usuario es compatible con la API mediaDevices. Esta API existe en la interfaz navigator y contiene el estado actual y la identidad del agente del usuario. La comprobación se realiza con el siguiente código que puede pegarse en Codepen:

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Primero, esto comprueba si la API mediaDevices existe en navigator y, luego, comprueba si la API getUserMedia está disponible en mediaDevices. Si esto devuelve true, puede comenzar.

      Paso 2: Solicitar el permiso del usuario

      Tras confirmar que el navegador es compatible con getUserMedia, debe solicitar permiso para usar los dispositivos de entrada multimedia en el agente del usuario. Normalmente, una vez que un usuario concede permiso, se devuelve una Promise que se resuelve a un flujo multimedia. Esta Promise no se devuelve cuando el usuario deniega el permiso, lo que bloquea el acceso a estos dispositivos.

      Pegue la siguiente línea en Codepen para solicitar permiso:

      navigator.mediaDevices.getUserMedia({video: true})
      

      El objeto proporcionado como argumento para el método getUserMedia se denomina constraints. Esto determina a qué dispositivos de entrada multimedia está solicitando permiso de acceso. Por ejemplo, si el objeto contiene audio: true, se pedirá al usuario que conceda acceso al dispositivo de entrada de audio.

      Esta sección cubrirá el concepto general de constraints. El objeto constraints es un objeto MediaScreamConstraints que especifica los tipos de multimedia a solicitar y los requisitos de cada uno de esos tipos. Puede especificar requisitos para el flujo solicitado usando el objeto constraints, como la resolución del flujo a usar (front, back).

      Debe especificar un audio o video cuando se realiza la solicitud. Un NotFoundError será devuelto si los tipos multimedia solicitados no pueden encontrarse en el navegador del usuario.

      Si desea solicitar un flujo de video con una resolución 1280 x 720, puede actualizar el objeto constraints para que tenga este aspecto:

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Con esta actualización, el navegador intentará hacer coincidir los ajustes de calidad especificados para el flujo. Si el dispositivo de video no puede proporcionar la resolución, el navegador devolverá otras resoluciones disponibles.

      Para garantizar que el navegador devuelve una resolución que no sea inferior a la proporcionada, tendrá que usar la propiedad min. Aquí tiene cómo podrá actualizar el objeto constraints para incluir la propiedad min:

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Esto garantizará que la resolución del flujo se devolvió con al menos 1280 x 720. Si no se puede cumplir este requisito mínimo, la promesa se rechazará con un OverconstrainedError.

      El algunos casos es posible que esté preocupado sobre guardar los datos y necesite que el flujo no supere una resolución establecida. Esto puede ser útil cuando el usuario esté en un plan limitado. Para habilitar esta funcionalidad, actualice el objeto constraints para que contenga el campo max:

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Con estos ajustes, el navegador garantizará que el flujo de retorno no está por debajo de 1280 x 720 y no supera 1920 x 1080.

      Otros términos que pueden usarse son exact e ideal. El ajuste ideal normalmente se utiliza junto con las propiedades min y max para buscar el mejor ajuste posible más cercano a los valores ideales proporcionados.

      Puede actualizar las restricciones para usar la palabra clave ideal:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Para indicar al navegador que utilice la cámara frontal o trasera (en móvil) en los dispositivos, puede especificar una propiedad facingMode en el objeto video:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Este ajuste usará la cámara delantera siempre en todos los dispositivos. Para usar la cámara trasera en dispositivos móviles, puede alterar la propiedad facingMode a environment.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Paso 4: Usar el método enumerateDevices

      Cuando se invoca el método enumerateDevices, devuelve todos los dispositivos multimedia de entrada disponibles en la PC del usuario.

      Con el método, puede proporcionar las opciones del usuario sobre las cuales usar el dispositivo multimedia de entrada para transmitir contenido de audio o video. Este método devuelve una Promise resuelta a una matriz MediaDeviceInfo que contiene información sobre cada dispositivo.

      En el siguiente snippet se muestra un ejemplo de cómo usar este método:

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Una respuesta de muestra para cada uno de los dispositivos tendría este aspecto:

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Nota: Una etiqueta no se devolverá a menos que exista un flujo disponible, o si el usuario ha concedido permisos de acceso al dispositivo.

      Paso 5: Mostrar el flujo de video en el navegador

      Ha repasado el proceso de solicitar y obtener acceso a los dispositivos multimedia, configurado las restricciones para incluir las resoluciones requeridas y seleccionado la cámara que necesitará para grabar video.

      Tras realizar estos pasos, al menos querrá ver si el flujo está funcionando según los ajustes configurados. Para garantizar esto, usará el elemento <video> para mostrar el flujo de video en el navegador.

      Como se ha mencionado antes, el método getUserMedia devuelve una Promesa que puede resolverse a un flujo. El flujo devuelto puede convertirse a una URL de objeto usando el método createObjectURL. Esta URL se establecerá como una fuente de video.

      Creará una demostración breve donde dejaremos al usuario elegir de su lista de dispositivos de video disponibles usando el método enumerateDevices.

      Este es un método navigator.mediaDevices. Enumera los dispositivos multimedia disponibles, como micrófonos y cámaras. Devuelve una Promesa que puede resolverse a una matriz de objetos que detalla los dispositivos multimedia disponibles.

      Cree un archivo index.html y actualice el contenido con el siguiente código.

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      En el anterior snippet, ha configurado los elementos que necesitará y un par de controles para el video. Además se ha incluido un botón para hacer capturas de pantalla de la entrada de video actual.

      Ahora, vamos a crear el estilo de estos componentes.

      Cree un archivo style.css y copie los siguientes estilos en él. Bootstrap se incluyó para reducir la cantidad de CSS que necesitará escribir para poner en marcha los componentes.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      El siguiente paso es añadir funcionalidad a la demostración. Con el método enumerateDevices, obtendrá los dispositivos de video disponibles y establecerlo como las opciones en el elemento seleccionado. Cree un archivo llamado script.js y actualícelo con el siguiente snippet:

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      En el snippet anterior, suceden un par de cuestiones. Vamos a verlas:

      1. feather.replace(): este método invoca las instancias feather, que es un icono configurado para el desarrollo web.
      2. La variable constraints tiene la configuración inicial del flujo. Esto se ampliará para incluir el dispositivo multimedia que elija el usuario.
      3. getCameraSelection: esta función invoca el método enumarateDevices. A continuación, filtrará a través de la matriz desde la Promesa resuelva y seleccionará los dispositivos de entrada de video. Desde los resultados filtrados, cree <option> para el elemento <select>.
      4. La invocación del método getUserMedia sucede en la escucha onclick del botón play. Aquí, comprobará si este método es compatible con el navegador del usuario que inicia el flujo.
      5. A continuación, invocará la función startStream que asume el argumento constraints. Invoca el método getUserMedia con las restrictions proporcionadas. handleStream se invoca usando el flujo de la Promesa resuelta. Este método establece el flujo devuelto al srcObject del elemento de video.

      A continuación, añadirá escuchas a los controles de botón en la página para pausar, detener y hacer capturas de pantalla. Además, añadirá una escucha al elemento <select> para actualizar las restricciones del flujo con el dispositivo de video seleccionado.

      Actualice el archivo script.js con el siguiente código:

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Ahora, cuando abra el archivo index.html en el navegador, al hacer clic en el botón Play se iniciará el flujo.

      Aquí está la demostración completa:

      Conclusión

      Este tutorial introdujo la API getUserMedia. Es una adición interesante a HTML5 que facilita el proceso de capturar multimedia en la web.

      La API asume un parámetro constraints que puede usarse para configurar el acceso a los dispositivos de entrada de audio y video. También puede usarse para especificar la resolución de video necesaria para su aplicación.

      Puede ampliar la demo para dar al usuario una opción de guardar las capturas de pantalla tomadas, y grabar y almacenar datos de video y audio con la ayuda de la API MediaStream Recording.



      Source link