Taking screenshots of streaming video services using Browser Developer Tools

One of the more overly strict features of video players in modern operating systems is that you can not use screen recording or screenshot tools to record content from streaming video platforms like Netflix or Disney+. Whilst I understand the need for DRM and preventing recording a streaming program, taking screenshots is a different matter. […]

One of the more overly strict features of video players in modern operating systems is that you can not use screen recording or screenshot tools to record content from streaming video platforms like Netflix or Disney+. Whilst I understand the need for DRM and preventing recording a streaming program, taking screenshots is a different matter. Often pointing out goofs in programs with a screenshot makes for good viral web content and people aren’t really likely to stitch a silent movie together from screenshots. Although I am sure some have tried.

Now, if you want to take a screenshot of a streaming service video, you can do that using the developer tools built into the browser.

Screenshot using the Elements tool and the node context menu.

In order to take a screenshot of a video, you can do this:

  • Pause the video and wait for the controls to vanish.
  • Open the Developer Tools (using F12).
  • Go to the Elements tool , active the Inspector and pick the video (it shows a coloured overlay).
  • Activate the context menu on the … of the highlighted node in the Elements tool and pick “capture node screenshot”

Context menu item on Element nodes 'Capture Node Screenshot'

And that’s it. Here’s how that looks as a screencast:

Taking a screenshot of a video using the Elements tool

Screenshot using Device Emulation

Alternatively, you can also use the Device Emulation Tool .

  • Pause the video and wait for the controls to vanish.
  • Open the Developer Tools (using F12).
  • Activate Device emulation
  • Activate the … menu and select “Capture Screenshot”

Capture screenshot item in the Device emulation

You can see this in action in the following screencast.

Taking a screenshot using the device emulation

The main difference to the other way is that this will take a screenshot with black borders around it.

But there is the browser extension “Superscreenshotwowtotallylegit” that does the same!

Now, I know that there are probably dozens of browser extensions that do the same thing, but I just don’t trust extensions that offer a “way around limitations of service X” as they are likely to be a front for malicious code or ad supported themselves. Why install something when your browser already has everything you need?


Print Share Comment Cite Upload Translate
APA
Chris Heilmann | Sciencx (2024-03-28T15:24:21+00:00) » Taking screenshots of streaming video services using Browser Developer Tools. Retrieved from https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/.
MLA
" » Taking screenshots of streaming video services using Browser Developer Tools." Chris Heilmann | Sciencx - Tuesday June 28, 2022, https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/
HARVARD
Chris Heilmann | Sciencx Tuesday June 28, 2022 » Taking screenshots of streaming video services using Browser Developer Tools., viewed 2024-03-28T15:24:21+00:00,<https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/>
VANCOUVER
Chris Heilmann | Sciencx - » Taking screenshots of streaming video services using Browser Developer Tools. [Internet]. [Accessed 2024-03-28T15:24:21+00:00]. Available from: https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/
CHICAGO
" » Taking screenshots of streaming video services using Browser Developer Tools." Chris Heilmann | Sciencx - Accessed 2024-03-28T15:24:21+00:00. https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/
IEEE
" » Taking screenshots of streaming video services using Browser Developer Tools." Chris Heilmann | Sciencx [Online]. Available: https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/. [Accessed: 2024-03-28T15:24:21+00:00]
rf:citation
» Taking screenshots of streaming video services using Browser Developer Tools | Chris Heilmann | Sciencx | https://www.scien.cx/2022/06/28/taking-screenshots-of-streaming-video-services-using-browser-developer-tools/ | 2024-03-28T15:24:21+00:00
https://github.com/addpipe/simple-recorderjs-demo