How to capture screenshot from html5 video player live streaming?

Currently i am following >> https://dev.twitch.tv/docs/embed-video/ for integrating live streaming.

example:

However i am stuck in capturing current frame screenshot by html5 player api.
i need to capture frame/image then draw it into canvas.
i have found no event regarding this in API docs.

Any help will be really appreciated.

Thanks

It’s not supported by the player API and you can’t really do it yourself on the web platform since the embed uses a cross-origin iframe. It would be cool for the interactive player to allow for this though.

1 Like

The closest you will get right now is to use a preview image, I guess. Those seem to be cached fro 30 seconds however, so its not useful for something like a screenshotting tool :confused:

You get the previews from the /streams endpoint, for example https://api.twitch.tv/kraken/streams/bobross

1 Like

hey,

As far as I know there is no easy way to get an image from a stream!

So here is my way of getting an image from a stream (worked on my ubuntu server)

First of all use the package livestreamer to download a part ot the stream

livestreamer --output stream.mp4 --twitch-oauth-token [token] --hls-timeout 1 --stream-types hls -f twitch.tv/[channel] best &

Use the hls-timeout to automatically stop after a few seconds

Wait for a few seconds to let livestreamer stop

sleep 5

Then use the package avconv to extract an image from the mp4 file

avconv -i stream.mp4 -frames:v 1 -qscale 1 -aq 1 stream.png

Youre image is now saved as stream.png

I hope this helps you a bit :slight_smile:

Greetings
Marci4

1 Like

i agree with you 3ventic, i will have to use some kind of interactive player for this.

Dear marci4, thanks for the above suggestion & steps, i will try and update you soon.

Hi marci4, Actually i need to extract images/frames continuously for 1 minute & it should be done on client side according to business requirements. Let me know if any possible solution/approach exist.

You would be better off downloading the chunks of video directly. There is no way to do that purely in-browser because of same-domain restrictions, you’ll have to use some kind of CORS-proxy.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.