Cómo hice mi propio descargador de YouTube usando JavaScript y Node.js con fines educativos

por

Descargo de responsabilidad


Descargar videos de YouTube va en contra de la política de YouTube. Los únicos vídeos que se pueden descargar son los tuyos propios, que ya puedes hacer con YouTube Studio.
Hacer un descargador de YouTube puede parecer muy difícil, pero en realidad no lo es. Para crear un descargador de YouTube es necesario conocer algo de HTML, JavaScript y Node.js, y deberías ser lo suficientemente capaz de crear tu propio descargador de YouTube.

descargar videos de YouTube es ilegal, ya sea para escuchar música, o bien, para mantener el video en sus equipos y reproducirlo sin conexión a Internet


HTML

Si vas a tener un descargador de YouTube necesitas HTML para crear tus elementos que vamos a usar para interactuar con nuestro sitio web. Primero, he creado un simple documento HTML que tiene un título, una entrada y un botón. Así que primero crea un archivo HTML llamado index.html. Este es el código HTML para nuestra simple página web:

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Downloader</title>
</head>
<body>
    <h1 class="heading">My Own YouTube Downloader !</h1>
    <input class="URL-input" placeholder="Video URL e.g. https://www.youtube.com/watch?v=MtN1YnoL46Q">
    <button class="convert-button">Convert</button>
</body>
</html>

Resultado:




YouTube Downloader

My Own YouTube Downloader !




CSS

Después de eso añadiremos un poco de estilo a nuestra página usando CSS. Puedes usar marcos CSS como Bootstrap o Bulma. Así que primero enlacé mi archivo CSS (style.css) añadiendo la etiqueta de enlace dentro del head:

<link rel="stylesheet" href="style.css">

Entonces en el style.css podemos personalizar nuestra página web. Así que aquí está mi sencillo código CSS para un estilo realmente simple:

* {
    text-align: center;
}
.heading {
    font-family: Arial;
    margin-top:40vh;
}
.URL-input, .convert-button {
    font-size:1.3em;
    padding:5px 10px;
}
.URL-input {
    border-radius:4px 0px 0px 4px;
    width:30em;
    text-align: left;
    border:2px solid #EEEEEE;
    background: #EEEEEE;
    outline:none;
}
.URL-input:focus {
    border:2px solid #0485ff;
}
.convert-button {
    border-radius:0px 4px 4px 0px;
    border:2px solid #0485ff;
    background: #0485ff;
    color:white;
}

JavaScript y Node.js

Entonces ahora necesitamos configurar nuestro JavaScript y nuestro servidor Node.js. Primero vamos a crear un archivo JavaScript. Llamémoslo script.js Luego vamos a enlazarlo a nuestro archivo HTML añadiendo etiquetas de script en la parte inferior (Muy importante)

<script src='script.js'></script>

En nuestro archivo script.js vamos a escribir ese pequeño trozo de código de salida a la consola el valor de la entrada. Lo hacemos para comprobar que todo funciona.

var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
    console.log(`URL: ${URLinput.value}`);
    sendURL(URLinput.value);
});
function sendURL(URL) {
    // We will put code here later
}

La función sendURL() enviará la URL a nuestro servidor. Ahora vamos a empezar a escribir código para nuestro servidor usando Node.js. Primero, vamos a crear una carpeta llamada Server y luego crear un archivo llamado index.js dentro de la carpeta del Server. Esto tendrá el código para que el servidor se ejecute. Después de crear el archivo, necesitamos ejecutar este comando en la línea de comandos o terminal en la carpeta del Servidor:

npm init

Se les hará una serie de preguntas sobre el proyecto. Todas las respuestas por defecto estarían bien. Después de eso vamos a instalar algunos paquetes que vamos a usar.
Escriba el siguiente comando para instalar los paquetes requeridos que son express, ytdl-core y cors

npm install express cors ytdl-core

Para configurar nuestro servidor necesitamos escribir algún código dentro del archivo index.js. Necesitamos requerir los paquetes y configurar el servidor:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.listen(4000, () => {
    console.log('Servidor Trabajando !!! en el puerto 4000');
});

Aquí hay un pequeño montaje. Requerimos los paquetes e hicimos que el servidor escuchara en el puerto 4000.
Si escribimos en la línea de comandos/terminal:

node index.js

deberíamos ver Servidor Trabajando !!! en el puerto 4000. Si no entendiste que has hecho algo malo.
Después de eso, necesitamos hacer que el servidor escuche la petición de la ruta /descarga. Por lo tanto, hemos añadido esto:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.use(cors());
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});
app.get('/download', (req,res) => {
    var URL = req.query.URL;
    res.json({url:URL});
})

Así que, cuando el usuario envía una solicitud GET al servidor en la ruta /descarga entonces el servidor responderá con la consulta insertada con la solicitud. Volvamos al front-end e intentemos que JavaScript envíe una petición GET al servidor. Además, he utilizado el middleware cors() para que mi servidor pueda recibir solicitudes. Utilicé fetch() para enviar la solicitud desde JavaScript:

var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
    console.log(`URL: ${URLinput.value}`);
    sendURL(URLinput.value);
});
function sendURL(URL) {
    fetch(`http://localhost:4000/download?URL=${URL}`, {
        method:'GET'
    }).then(res => res.json())
    .then(json => console.log(json));
}

imagen

Así que, podemos ver que si hacemos clic en el botón, obtenemos una respuesta del servidor con la URL que enviamos. Ahora tenemos que usar ytdl-core, que son las siglas de YouTube DownLoader core que descargará el video por nosotros. Volvamos a index.js. Vamos a hacer que descargue el video y luego lo envíe:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.use(cors());
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});
app.get('/download', (req,res) => {
var URL = req.query.URL;
res.header('Content-Disposition', 'attachment; filename="video.mp4"');
ytdl(URL, {
    format: 'mp4'
    }).pipe(res);
});

Básicamente, lo que hace es que cuando el usuario envía una solicitud GET toma la consulta dada en la URL y luego agrega un encabezado que dice que cualquier archivo adjunto enviado debe llamarse video.mp4. luego usa ytdl para descargar el video con formato mp4 y luego lo envía (pipe it) al usuario para que lo descargue.
Cuando lo ejecute y lo pruebe, descubrirá rápidamente que no funciona. Eso es porque la petición tiene que estar en la URL en lugar de en la búsqueda. Por lo tanto, podemos básicamente reemplazar la búsqueda con una redirección a la URL para descargar el video.

var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
    console.log(`URL: ${URLinput.value}`);
    sendURL(URLinput.value);
});
function sendURL(URL) {
    window.location.href = `http://localhost:4000/download?URL=${URL}`;
}

y ahora tendrás tu propio descargador de YouTube. También puedes jugar con el núcleo ytdl e intentar añadir los formatos .mp3 o .flv. También puedes hacer lo que yo hice antes, que es enlazar la API de datos de YouTube con tu aplicación web. Posiblemente buscar un vídeo y luego descargarlo.

ytdl-core

ytdl-core es un módulo que puede ser instalado en su proyecto de nodo. Te permite descargar videos de youtube. Este asombroso módulo fue hecho por una persona llamada Fent. Tiene muchas características que son geniales como ytdl.videoInfo que te da información diferente sobre un vídeo. He usado esta característica para crear un descargador de youtube donde puedes buscar el vídeo o poner el enlace para descargarlo. ytdl-core puede ser usado para todos los propósitos diferentes. Déjeme darle un ejemplo. Si quieres que tu sitio web tenga el vídeo que has subido a youtube y tampoco quieres que se bloquee en los lugares donde youtube está bloqueado como en las escuelas. Entonces puedes usar ytdl-core para descargar tu propio video y usarlo. ytdl también te permite validar las URLs de Youtube y validar los ID de los videos de Youtube

Deja un comentario