Comment scraper YouTube comme un pro : Un guide complet

Raluca Penciuc le 20 février 2023

Vous avez besoin de données provenant d'un site web, mais les API disponibles ne suffisent pas ? Le web scraping est la réponse que vous cherchez. Grâce au web scraping, vous pouvez extraire des données d'un site web de manière plus complète et plus souple.

Dans cet article, nous allons nous plonger dans le monde du web scraping en examinant de plus près la manière de scraper YouTube, l'une des plateformes de partage de vidéos les plus populaires. Bien que YouTube fournisse une API pour accéder aux données, le web scraping peut offrir un plus grand nombre d'options pour extraire des données des chaînes YouTube.

Nous commencerons par mettre en place un environnement de développement et nous aborderons les conditions préalables au web scraping, puis nous passerons au processus proprement dit de scrape de YouTube. En cours de route, nous fournirons des conseils pour améliorer vos compétences en matière de web scraping et nous discuterons des raisons pour lesquelles l'utilisation d'un scraper professionnel peut s'avérer un meilleur choix que la construction de votre propre scraper.

À la fin de cet article, vous aurez acquis les connaissances et les compétences nécessaires pour extraire efficacement des données de YouTube comme un professionnel !

Conditions préalables

Tout d'abord, vous devez vous assurer que Node.js est installé sur votre machine. Si ce n'est pas encore le cas, rendez-vous sur le site officiel de Node.js et suivez les instructions correspondant à votre système d'exploitation. Il est important de noter que vous devriez télécharger la version Long Term Support (LTS) pour vous assurer que vous disposez d'une version stable et prise en charge.

Ensuite, vous devez installer le gestionnaire de paquets Node.js (NPM). Cette installation devrait se faire automatiquement lors de l'installation de Node.js, mais il est toujours bon de vérifier.

En ce qui concerne votre environnement de codage, n'hésitez pas à utiliser l'IDE que vous préférez. J'utiliserai Visual Studio Code dans ce tutoriel parce qu'il est flexible et facile à utiliser, mais n'importe quel IDE fera l'affaire. Créez simplement un nouveau dossier pour votre projet et ouvrez un terminal. Exécutez la commande suivante pour créer un nouveau projet Node.js :

npm init -y

Cela créera un fichier package.json par défaut pour votre projet. Vous pouvez modifier ce fichier à tout moment pour l'adapter à vos besoins.

Il est maintenant temps d'installer TypeScript et les définitions de type pour Node.js. TypeScript est un choix populaire parmi la communauté JavaScript en raison de son typage statique optionnel, qui aide à prévenir les erreurs de type dans votre code. Pour l'installer, exécutez la commande suivante :

npm install typescript @types/node --save-dev

Pour vérifier que l'installation a réussi, vous pouvez exécuter la commande suivante :

npx tsc --version

Enfin, vous devrez créer un fichier de configuration tsconfig.json à la racine du répertoire de votre projet. Ce fichier définit les options du compilateur pour votre projet. Si vous souhaitez en savoir plus sur ce fichier et ses propriétés, consultez la documentation TypeScript officielle.

Vous pouvez également copier et coller le code suivant dans votre fichier tsconfig.json:

{

   "compilerOptions": {

       "module": "commonjs",

       "esModuleInterop": true,

       "target": "es2017",

       "moduleResolution": "node",

       "sourceMap": true,

       "outDir": "dist"

   },

   "lib": ["es2015"]

}

Pour le processus de scraping, j'utiliserai Puppeteer, une bibliothèque de navigateur sans tête pour Node.js qui vous permet de contrôler un navigateur web et d'interagir avec des sites web de manière programmatique. Pour installer Puppeteer, exécutez la commande suivante :

npm install puppeteer

Extraction des données

Pour ce guide, je vais récupérer une chaîne YouTube contenant des tutoriels liés à DevOps : https://www.youtube.com/@TechWorldwithNana/videos. Les données que j'étudie en particulier sont les suivantes :

• l'avatar de la chaîne
• le nom du canal
• la poignée du canal
• le nombre d'abonnés de la chaîne
• les titres de toutes les vidéos
• le nombre de vues de toutes les vidéos
• la vignette de toutes les vidéos
• l'URL de toutes les vidéos

J'inclurai des captures d'écran pour chaque section et je m'appuierai sur les sélecteurs CSS pour localiser les données dans le DOM. Il s'agit de la méthode la plus simple et la plus directe, sauf si le site web cible est connu pour avoir une structure DOM instable.

Si vous êtes novice en matière de sélecteurs CSS, consultez cet aide-mémoire complet qui vous permettra de démarrer en un rien de temps.

Commençons par créer un dossier src et le fichier index.ts dans lequel nous écrirons le code. Maintenant, ouvrons simplement un navigateur et naviguons vers l'URL cible :

import puppeteer from 'puppeteer';

async function scrapeChannelData(channelUrl: string): Promise<any> {

    // Launch Puppeteer

    const browser = await puppeteer.launch({

        headless: false,

    	  args: ['--start-maximized'],

    	  defaultViewport: null

    });

    // Create a new page and navigate to the channel URL

    const page = await browser.newPage();

    await page.goto(channelUrl);

    // Close the browser

    await browser.close();

}

scrapeChannelData("https://www.youtube.com/@TechWorldwithNana/videos");

Pour les besoins du débogage visuel, j'ouvrirai le navigateur en mode non headless. Si vous avez l'intention d'étendre votre cas d'utilisation à grande échelle, je vous recommande d'utiliser le mode sans tête.

Pour exécuter le script, il faut d'abord le compiler, puis exécuter le fichier Javascript généré. Pour faciliter les choses, nous pouvons définir un script dans le fichier package.json qui gère ces deux étapes pour nous. Il suffit d'éditer la section scripts de votre fichier package.json comme suit :

"scripts": {

    "test": "npx tsc && node dist/index.js"

},

Maintenant, tout ce que vous avez à faire pour exécuter votre code est de lancer la commande suivante :

npm run test

Dès la première exécution, nous avons remarqué un premier problème : le dialogue de consentement au cookie en plein écran qui nous empêche d'accéder aux données.

Heureusement, il est visible dans la fenêtre de visualisation, nous pouvons donc utiliser les outils de développement pour trouver son identifiant et cliquer dessus.

Nous ajoutons également un temps d'attente supplémentaire afin de laisser la navigation se terminer. Le code ressemblera à ceci :

await page.waitForSelector('button[aria-label="Accept all"]')

await page.click('button[aria-label="Accept all"]')

await page.waitForTimeout(10 * 1000)

Informations sur les chaînes

Dans la capture d'écran ci-dessous, nous pouvons voir en surbrillance les sections qui contiennent les données du canal que nous voulons extraire.

Pour faciliter la localisation des éléments HTML, il est conseillé de choisir des sélecteurs CSS uniques. Par exemple, pour extraire l'avatar du canal, je choisirai l'élément HTML personnalisé yt-img-shadow avec l'id avatar. J'extrairai ensuite l'attribut src de son élément enfant img .

const channelAvatar = await page.evaluate(() => {

    const el = document.querySelector('yt-img-shadow#avatar > img');

    return el ? el.getAttribute('src') : null;

});

console.log(channelAvatar)

Pour le nom du canal, nous disposons du contenu textuel de l'élément yt-formatted-string avec l'id text.

const channelName = await page.evaluate(() => {

    const el = document.querySelector('yt-formatted-string#text');

    return el ? el.textContent : null;

});

console.log(channelName)

Pour obtenir l'identifiant du canal, nous allons localiser l'élément yt-formatted-string avec l'identifiant channel-handle et extraire son contenu textuel.

const channelHandle = await page.evaluate(() => {

    const el = document.querySelector('yt-formatted-string#channel-handle');

    return el ? el.textContent : null;

});

console.log(channelHandle)

Enfin, pour connaître le nombre d'abonnés à la chaîne, il suffit d'accéder à l'élément yt-formatted-string avec l'id subscriber-count et d'obtenir son contenu textuel.

const subscriberCount = await page.evaluate(() => {

    const el = document.querySelector('yt-formatted-string#subscriber-count');

    return el ? el.textContent : null;

});

console.log(subscriberCount)

En exécutant à nouveau le script, vous devriez obtenir le résultat suivant :

https://yt3.googleusercontent.com/kXyR8Aa32KXnZWVdkAFUYK5utM752kSJPHGtYiJ4ev6BmdFHi-dl1EFbI3TogmHBjszwc7m2=s176-c-k-c0x00ffffff-no-rj

TechWorld with Nana

@TechWorldwithNana

709K subscribers

Données vidéo

En ce qui concerne les données vidéo, j'ai également mis en évidence les sections pertinentes du document HTML. Ici, nous devons extraire une liste d'éléments, donc nous regardons d'abord les conteneurs parents, puis nous itérons à travers chacun d'entre eux.

Nous suivons la même approche que dans la section précédente : nous choisissons des sélecteurs CSS uniques pour localiser les données dont nous avons besoin, en nous concentrant sur leurs identifiants. Le code devrait ressembler à ceci :

const videos = await page.evaluate(() => {

    const videosEls = Array.from(document.querySelectorAll('div#dismissible'))

    return videosEls.map(video => {

        const titleEl = video.querySelector('yt-formatted-string#video-title');

        const viewsEl = video.querySelector('div#metadata-line > span');

        const thumbnailEl = video.querySelector('yt-image.ytd-thumbnail > img');

        const locationEl = video.querySelector('a#thumbnail');

        return {

            title: titleEl ? titleEl.textContent : null,

            views: viewsEl ? viewsEl.textContent : null,

            thumbnail: thumbnailEl ? thumbnailEl.getAttribute('src') : null,

            location: locationEl ? locationEl.getAttribute('href') : null

        }

    })

})

console.log(videos)

Lorsque vous exécutez le code, le résultat doit être une liste d'objets Javascript. Chacun d'entre eux doit contenir le titre, le nombre de vues, la vignette et l'emplacement de chaque élément vidéo sur la page.

Cependant, vous remarquerez qu'après un certain temps, votre liste commence à ressembler à ceci :

{

    title: 'GitLab CI/CD Full Course released - CI/CD with Docker | K8s | Microservices!',  

    views: '114K views',

    thumbnail: null,

    location: '/watch?v=F7WMRXLUQRM'

},

{

    title: 'Kubernetes Security Best Practices you need to know | THE Guide for securing your K8s cluster!',

    views: '103K views',

    thumbnail: null,

    location: '/watch?v=oBf5lrmquYI'

},

{

    title: 'How I learn new technologies as a DevOps Engineer (without being overwhelmed)',

    views: '366K views',

    thumbnail: null,

    location: '/watch?v=Cthla7KqU04'

},

{

    title: 'Automate your Multi-Stage Continuous Delivery and Operations | with Keptn',	 

    views: '59K views',

    thumbnail: null,

    location: '/watch?v=3EEZmSwMXp8'

},

Bien que les éléments vidéo aient toujours une vignette et que le sélecteur CSS n'ait pas changé, la valeur extraite est nulle. Cela se produit généralement lorsqu'un site web met en œuvre le chargement paresseux, ce qui signifie que le reste de la liste est chargé au fur et à mesure que vous défilez vers le bas de la page.

Pour résoudre ce problème, nous devons simplement demander à notre script de faire défiler la page du canal vers le bas.

async function autoScroll(page: any, scroll_number: number): Promise<any> {

    await page.evaluate(async (scroll_number: number) => {

        await new Promise((resolve) => {

            let totalHeight = 0;

        	const timer = setInterval(() => {

                const scrollHeight = window.innerHeight * scroll_number;

                window.scrollBy(0, window.innerHeight);

                totalHeight += window.innerHeight;

                if (totalHeight > scrollHeight) {

                    clearInterval(timer);

                	  resolve(true);

                }

        	}, 1000);

    	  });

    }, scroll_number);

}

Cette fonction prend comme paramètres la page ouverte et un certain nombre de mouvements de défilement. Elle tente ensuite de faire défiler la distance égale à la hauteur de la fenêtre autant de fois que le paramètre scroll_number le lui demande. Ces mouvements sont effectués toutes les 1 secondes.

Il suffit maintenant d'appeler la fonction précédant l'extrait de code qui extrait la liste des vidéos.

await autoScroll(page, 10)

await page.waitForTimeout(2 * 1000)

J'ai ajouté un temps d'attente supplémentaire de 2 secondes pour que le site web ait le temps de charger complètement les derniers éléments de la liste. En exécutant à nouveau le script, vous pourrez d'abord voir comment les mouvements de défilement se produisent et ensuite que tous les éléments de la liste ont une valeur de vignette.

Éviter les blocages

Bien que le guide ait semblé facile à suivre jusqu'à présent, les web scrapers se heurtent généralement à de nombreuses difficultés. YouTube, en particulier, met en œuvre de nombreuses techniques anti-bots pour empêcher les scripts automatisés d'extraire ses données.

Voici quelques-unes de ces techniques :

• CAPTCHAs: la résolution des CAPTCHAs peut être longue et difficile pour un scraper, ce qui peut avoir un effet dissuasif sur les robots.
• Défis JavaScript: il peut s'agir de tâches telles que résoudre des problèmes mathématiques, remplir un CAPTCHA ou trouver un élément spécifique sur la page. Un robot incapable de relever le défi sera détecté et potentiellement bloqué.
• Vérification de l'agent utilisateur: YouTube peut vérifier la chaîne user-agent des demandes entrantes pour voir si elles proviennent d'un navigateur ou d'un scraper. Si la chaîne de l'agent utilisateur n'est pas reconnue comme un navigateur valide, la demande peut être bloquée.
• Blocage des adresses IP: YouTube peut bloquer les demandes provenant de certaines adresses IP connues pour être associées à des bots ou à des activités de scraping.
• Les pots de miel: YouTube peut utiliser des pots de miel, c'est-à-dire des éléments cachés sur la page qui ne sont visibles que par les robots. Si un robot est détecté en train d'interagir avec un pot de miel, il peut être identifié et bloqué.

Le traitement de chacun de ces problèmes peut augmenter de manière significative la complexité et le coût du code de votre scraper. C'est là que les API de scraping jouent un rôle important, car elles gèrent ces problèmes par défaut et sont disponibles à un prix inférieur.

WebScrapingAPI est un exemple de ce type de service. Il offre de puissantes fonctionnalités permettant d'éviter les techniques de détection des robots et d'extraire avec précision les données dont vous avez besoin.

Nous pouvons rapidement essayer d'utiliser WebScrapingAPI en installant le SDK Node.js dans notre petit projet :

npm i webscrapingapi

Rendez-vous maintenant sur la page d'accueil pour créer un compte, ce qui vous donnera automatiquement votre clé API et un essai gratuit. La clé API se trouve sur le tableau de bord, et vous l'utiliserez pour authentifier vos demandes à l'API :

Et c'est tout, vous pouvez commencer à coder !

import webScrapingApiClient from 'webscrapingapi';

const client = new webScrapingApiClient("YOUR_API_KEY");

async function exampleUsage(target_url: string) {

    const api_params = {

        'render_js': 1,

    	  'proxy_type': 'datacenter',

    	  'country': 'us',

    	  'timeout': 60000,

    	  'js_instructions': JSON.stringify([

            {

                action: "click",

                selector: 'button[aria-label="Accept all"]',

                timeout: 10000

         	}

    	  ]),

    	  'extract_rules': JSON.stringify({

        	avatar: {

                selector: "yt-img-shadow#avatar > img",

                output: "@src",

        	},

        	name: {

                selector: "yt-formatted-string#text",

                output: "text",

        	},

        	handle: {

                selector: "yt-formatted-string#channel-handle",

                output: "text",

        	},

        	subscribers: {

                selector: "yt-formatted-string#subscriber-count",

                output: "text",

        	},

        	videoTitles: {

                selector: "yt-formatted-string#video-title",

                output: "text",

                all: "1"

        	},

        	videoViews: {

                selector: "div#metadata-line > span",

                output: "text",

                all: "1"

        	},

        	videoThumbnails: {

                selector: "yt-image.ytd-thumbnail > img",

                output: "@src",

                all: "1"

        	},

        	videoLocations: {

                selector: "a#thumbnail",

                output: "@href",

                all: "1"

        	},

        })

    }

    const response = await client.get(target_url, api_params);

    if (response.success) {

        console.log(response.response.data);

    } else {

        console.log(response.error.response.data);

    }

}

exampleUsage("https://www.youtube.com/@TechWorldwithNana/videos");

Nous avons traduit l'algorithme et les sélecteurs CSS décrits précédemment dans l'API. Le paramètre "js_instructions" gérera la fenêtre du cookie, en cliquant sur le bouton "Accepter tout". Enfin, le paramètre "extract_rules" gère l'extraction des données.

const scroll_number = 10

let scroll_index = 0

for (let i = 0; i < scroll_number; i++) {

    const js_instructions_obj = JSON.parse(api_params.js_instructions)

    js_instructions_obj.push({

        action: "scrollTo",

        selector: `ytd-rich-grid-row.ytd-rich-grid-renderer:nth-child(${scroll_index + 3})`,

        block: "end",

     	  timeout: 1000

    })

    api_params.js_instructions = JSON.stringify(js_instructions_obj)

    scroll_index += 3

}

Juste avant d'envoyer la requête, n'oubliez pas d'ajuster la logique de défilement. Celle-ci sera légèrement différente, car nous demandons à l'API de faire défiler 10 fois la troisième rangée de vidéos.

Conclusion

Dans cet article, nous avons exploré le domaine passionnant du web scraping et appris à extraire des données de YouTube à l'aide de Node.js et de Puppeteer. Nous avons abordé la configuration nécessaire pour le web scraping, ainsi que le processus d'extraction des données des chaînes YouTube.

Le web scraping peut être un outil incroyablement utile pour accéder aux données des sites web. Cependant, il est important de garder à l'esprit les différents défis et considérations qui l'accompagnent. Il peut s'agir de CAPTCHA, de contenu dynamique, de limitation de débit ou de modifications du site web.

Si vous envisagez de récupérer des données de YouTube ou de tout autre site web, il est essentiel de peser le pour et le contre et de déterminer si le web scraping est la meilleure solution pour vos besoins. Dans certains cas, l'utilisation d'une API ou l'achat de données auprès d'une source réputée peut être une option plus appropriée que le scraping.

Quelle que soit l'approche choisie, il est essentiel de respecter les conditions de service et les lois sur les droits d'auteur qui s'appliquent aux données auxquelles vous accédez. Et si vous décidez de récupérer des données sur YouTube, n'oubliez pas de faire appel à un scrapeur professionnel pour vous assurer d'obtenir des données exactes et à jour de manière sûre et efficace.

J'espère que cet article vous a été utile dans votre apprentissage du web scraping et de la manière de récupérer les données de YouTube !