javascript - Is there a way to take screenshots of a livestream happening on Youtube or Twitch? - Stack Overflow

admin管理员组

文章数量:1405537

I'd like to have my software periodically (every 5 minutes or so) take a screenshot of a live stream that's currently happening. I tagged this question for both Youtube and Twitch since the stream is happening on both, so an answer that works for either of those is perfect.

I've looked into some older libraries like youtube-dl and livestreamer but they are CLI that download a file that then needs to be read with a video player.

I'd like to have my software periodically (every 5 minutes or so) take a screenshot of a live stream that's currently happening. I tagged this question for both Youtube and Twitch since the stream is happening on both, so an answer that works for either of those is perfect.

I've looked into some older libraries like youtube-dl and livestreamer but they are CLI that download a file that then needs to be read with a video player.

• javascript
• youtube
• screenshot
• twitch

Share Follow edited Oct 31, 2019 at 13:59 Kaiser 60699 silver badges2424 bronze badges asked Oct 31, 2019 at 13:55 RegaliaRegalia 17944 silver badges1111 bronze badges 4

• It's actually quite simple to grab the current frame of a <video> element since it extends HTMLImageElement: you just need to pass it to myCanvasContext.drawImage(videoElement, 0, 0). Now you can use myCanvas.toDataURL('image/png') to grab the image as base64 data. Do you want to do this in-browser? Or are you looking for dedicated software? – user5734311 Commented Oct 31, 2019 at 14:08
• I'm looking to do this in my nodejs server. But I think the real problem is managing to get the video element from the live stream – Regalia Commented Oct 31, 2019 at 14:16
• In that case you'll probably want to use a headless browser library like puppeteer to simulate a browser session. Once puppeteer has navigated to the URL, it should be as simple as const vid = document.querySelector("video") or whatever the puppeteer equivalent is. – user5734311 Commented Oct 31, 2019 at 14:18
• I tried it with puppeteer myself, and apparently neither twitch nor youtube wants you to be scraping their pages. I guess your best bet is just to do it the way it's meant to be. Both YT and Twitch have APIs. – code Commented Nov 2, 2022 at 22:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +100

Using yt-dlp and ffmpeg you can get the last frame of a livestream happening on YouTube by executing:

ffmpeg -i "$(yt-dlp -g VIDEO_ID | head -n 1)" -vframes 1 last.jpg

yt-dlp -g VIDEO_ID | head -n 1 will retrieve the actual video URL from Google servers.

As far as I tested with ydYDqZQpim8, the retrieved frame is less than 2 seconds later than the time displayed on the livestream.

Note that the above method only downloads 2K resolution screenshot for 4K livestreams, if someone knows how to have 4K resolution screenshot please ment or add an answer.

For Twitch you can use the Get Streams API to get the current thumbnail of the stream.

Twitch already did the work for you to provide a screenshot, so you can just consume the thumbnail instead.

So example response to Get Streams

{
  "data": [
    {
      "id": "41375541868",
      "user_id": "459331509",
      "user_login": "auronplay",
      "user_name": "auronplay",
      "game_id": "494131",
      "game_name": "Little Nightmares",
      "type": "live",
      "title": "hablamos y le damos a Little Nightmares 1",
      "viewer_count": 78365,
      "started_at": "2021-03-10T15:04:21Z",
      "language": "es",
      "thumbnail_url": "https://static-cdn.jtvnw/previews-ttv/live_user_auronplay-{width}x{height}.jpg",
      "tag_ids": [
        "d4bb9c58-2141-4881-bcdc-3fe0505457d1"
      ],
      "is_mature": false
    },

Just grab the thumbnail_url and throw a cache buster on the end and you have an image. No FFMPEG or yt-dl schnanigans needed

本文标签： javascriptIs there a way to take screenshots of a livestream happening on Youtube or TwitchStack Overflow