خواندن ۴ دقیقه·۵ سال پیش

ساخت یک YouTube Downloader با نود جی اس

تا حالا زیاد پیش اومده که یه ویدیو از یوتیوب رو بخوایم دانلودش کنیم تا هر وقت بخوایم تماشا کنیم، خب ابزار های زیادی هستن که این کار رو برای ما میکنن، امروز میخوایم خودمون با استفاده از nodejs یه اپ youtube download برای خودمون بسازیم.

HTML

خب اول باید یه فرم بسازیم تا بتونیم آدرس صفحه ی ویدیو رو از یوتیوب وارد کنیم و با یه دکمه submit اونو دانلود کنیم، کد html زیر کارمون رو راه میندازه:

<!DOCTYPE html>
<html><head>
    <title>YouTube Downloader</title>
</head><body>
    <h1 class=&quotheading&quot>My Own YouTube Downloader !</h1>
    <input class=&quotURL-input&quot placeholder=&quotVideo URL e.g. https://www.youtube.com/watch?v=MtN1YnoL46Q&quot>
    <button class=&quotconvert-button&quot>Convert</button>
</body>
</html>

CSS

خب الان برای این که یخورده فرم مون خشگل تر بشه با کمک css بهش استایل میدیم، اول توی فایل html مون به صفحه style.css ای که قراره بسازیم لینک میدیم:

<link rel=&quotstylesheet&quot href=&quotstyle.css&quot>

بعد میایم یه فایل style.css کنار فایل html مون میسازیم و کد های زیر رو وارد میکنیم:

* {
    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;
}

Nodejs / Javascript

خب الان موقعشه که فایل جاوا اسکریپت مون رو اضافه کنیم و سرور نود جی اس رو راه بندازیم.اول میایم یه فایل به نام script.js میسازیم و اونو در انتهای فایل html مون لینک میدیم:

<script >

توی فایل script.js مون تکه کد زیر رو وارد میکنیم که خب خیلی سادس و نیاز به توضیح نداره:

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
}

توی تابع ()sendURL آدرسی که از کاربر میگیریم رو به سرور مون میفرستیم. خب الآن میتونیم کد های مربوط به سرور مون رو شروع کنیم. اول یه فولدر به نام server میسازیم و یه فایل index.js داخش اضافه میکنیم. بعد باید دستور زیر رو توی terminal اجرا کنیم:

npm init

بعد از اینک یه سری پکیج های پیشفرض نصب شدند حالا وقتشه که پکیج های express و ytdl-core و cors رو نصب کنیم:

npm install express cors ytdl-core

حالا فایل index.js رو باز کنیدو کد های زیر که مربوط به استارت اولیه سرور مون هست رو واردش کنید:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});

با این کار سرور مون رو روی پورت 4000 بالا آوردیم. با تایپ دستور زیر در ترمینال:

node index.js

باید پیام Server Works !!! At port 4000 رو بهتون بده، اگه غیر از اینه یه جای کار رو اشتباه کردین. حالا باید مسیر download/ رو برای درخواست get سرور تعریف کنیم:

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});
})

الان اگه کاربر یه درخواست به این آدرس بفرسته، سرور به کوئری ای که میاد سمتش پاسخ میده. حالا بیاین برگردیم به فرانت کار و با جاوا اسکریپت امکانی رو فراهم کنیم تا یه درخواست GET برای دریافت ریکوئست ها ی سرور انجام بشه، در ضمن از middleware ای به نام ()cors استفاده میکنیم تا سرور بتونه ریکوئست ها رو بگیره. من از تابع ()fetch برای ارسال ریکوئست از جاوا اسکریپت استفاده میکنم:

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));
}

خب، الان میتونیم ببینیم که اگه روی دکمه کلیک کنیم، یه پاسخ از سمت سرور با اون URL ای که فرستادیم دریافت میکنیم. الان باید با استفاده از ytdl-core که خلاضه ی youtube downloader core هستش کار کنیم که قابلیت دانلود ویدیو های یوتیوب رو برامون فراهم میکنه. بر میگردیم به فایل index.js و کدمون رو اضافه میکنیم:

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=&quotvideo.mp4&quot');
ytdl (URL, {
  format: 'mp4'
{).pipe(res);});

در واقع کاری که این انجام میده اینه که وقتی کاربر یه درخواست GET میده، این کوئری ای که توی URL هستش رو میگیره و یه header اضافه میکنه که میگه هر attachment ای که فرستاده شد باید اسمش video.mp4 باشه. بعدش ytdl با فرمت mp4 اون ویدیو رو میگیره و به کاربر میفرسته تا دانلود کنه.

وقتی برنامه رو اجرا کنید متوجه میشن که کار نمیکنه. بخاطر این که درخواست باید در قالب URL باشه تا یه fetch. پس کاری میکنیم که fetch ریدایرکت بشه به URL تا ویدیو دانلود بشه:

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) {
    .href = `http://localhost:4000/download?URL=${URL}`;
}

الان میتونید با موفقیت یوتیوب دانلودر خودتون رو اجرا کنید، همچنین میتونید با پکیج ytdl ویدیو رو در قالب mp3 یا flv دانلود کنید. همچنین ytdl.videoinfo اطلاعات ویدیو رو بهتون میده.

منبع:

https://blog.usejournal.com/how-i-made-my-own-youtube-downloader-using-javascript-and-node-js-160b172f6e10

کانال تلگرام من : https://t.me/modos_dev

جاوا اسکریپتنود جی اسبرنامه نویسی

modos coding

دانشجوی کارشناسی کامپیوتر - Blogger & developer

شاید از این پست‌ها خوشتان بیاید

modos coding

خواندن ۴ دقیقه·۵ سال پیش

ساخت یک YouTube Downloader با نود جی اس

HTML

<!DOCTYPE html>
<html><head>
    <title>YouTube Downloader</title>
</head><body>
    <h1 class=&quotheading&quot>My Own YouTube Downloader !</h1>
    <input class=&quotURL-input&quot placeholder=&quotVideo URL e.g. https://www.youtube.com/watch?v=MtN1YnoL46Q&quot>
    <button class=&quotconvert-button&quot>Convert</button>
</body>
</html>

CSS

<link rel=&quotstylesheet&quot href=&quotstyle.css&quot>

بعد میایم یه فایل style.css کنار فایل html مون میسازیم و کد های زیر رو وارد میکنیم:

* {
    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;
}

Nodejs / Javascript

<script >

توی فایل script.js مون تکه کد زیر رو وارد میکنیم که خب خیلی سادس و نیاز به توضیح نداره:

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
}

npm init

بعد از اینک یه سری پکیج های پیشفرض نصب شدند حالا وقتشه که پکیج های express و ytdl-core و cors رو نصب کنیم:

npm install express cors ytdl-core

حالا فایل index.js رو باز کنیدو کد های زیر که مربوط به استارت اولیه سرور مون هست رو واردش کنید:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});

با این کار سرور مون رو روی پورت 4000 بالا آوردیم. با تایپ دستور زیر در ترمینال:

node index.js

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});
})

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));
}

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=&quotvideo.mp4&quot');
ytdl (URL, {
  format: 'mp4'
{).pipe(res);});

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) {
    .href = `http://localhost:4000/download?URL=${URL}`;
}

منبع:

https://blog.usejournal.com/how-i-made-my-own-youtube-downloader-using-javascript-and-node-js-160b172f6e10

کانال تلگرام من : https://t.me/modos_dev

جاوا اسکریپتنود جی اسبرنامه نویسی

modos coding

دانشجوی کارشناسی کامپیوتر - Blogger & developer

شاید از این پست‌ها خوشتان بیاید