How to capture screenshot from html5 video player live streaming?

[kptest_kp]

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

[3ventic]

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.

[CBenni]

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

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

[marci4]

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 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

Greetings
Marci4

[kptest_kp]

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

[kptest_kp]

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

[kptest_kp]

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.

[CBenni]

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.