So in the last lecture, we made sure that in our feed.js file, we actually get the video image into our
modal and that's nice,
now I want to hook up that button, that capture button here. Now we already get access to the button
in the feed.js file,
it's the capture button variable here. Now I want to add an event listener and to keep the code which
belongs together
together, I'll add it right below initialized media which is where I set everything up regarding that.
So here, I'll now get access to my capture button and I want to add an event listener to listen on a
click and on that click here,
I obviously want to take an image. Now for that as I said, we'll use that canvas element because
the cool thing is the general idea is we'll get the stream of the video element, basically send it to the
canvas
and since the canvas is there to display static content, it will automatically take the latest snapshot
and just display that. Then we stop the video player and all we get is a canvas element with the
latest snapshot and we can then extract that simply from that canvas element. Might sound super
hacky but actually is a very valid way of doing that.
So on the click listener, I want to show the canvas therefore. So the canvas element
should be switched to display block, so that it shows up.
Now it is empty by default though.
So the next thing is I want to disable,
so basically hide the video player, so I'll set it to style none. Important, even if we hide it,
the stream is still going on,
so what we can do this first and still get access to the currently running stream. We'll stop this in
a second too though.
So this will basically set the canvas and disable the video player.
Now the next thing I want to do is, I want to set my capture button here, the style to none because I also want
to disable that
once I took a screenshot.
Now finally, let's get the stream onto the canvas.
For that, I need to create some context for the canvas, I'll store it in a variable by accessing my canvas
element here and there we can access get context.
That's a method where we basically initialize how we want to draw on this canvas.
I want to draw it to the image because I just want to have two-dimensional image,
a screenshot basically or a snapshot of my stream.
So that's the context
and now we can use that canvas context here to draw an image, since it's two-dimensional,
that's easily possible.
Now drawing an image sounds complicated but it isn't.
I'll use the video player as an image element and this will automatically give me the stream,
then I have to define the boundaries, the dimensions of the canvas.
I want to start in the top left corner,
that's why I initialize it with 00,
so it uses a two-dimensional coordinate system basically and we want to paste that image in the top left
corner and then span it up to the bottom and the right and the next thing is the width.
Now here, I want to use the default canvas width which I set up in CSS or which I actually limit to the
maximum screen width
because here I clearly have to contain this inside the screen.
Regarding the height though, I need to do a calculation because the height should of course fit the video
aspect ratio.
So here, I will get access to my video player which still has the stream going on,
keep that in mind, even though we draw it here, that doesn't stop the stream and there, I can access video
height,
this gives me, you guessed it, the video height and I'll divide it by the video player, video width divided
by the canvas width because the canvas width is set and by dividing the video player width through the
canvas or by the canvas width, I get the portion of the original source I can use and I
can then apply this on the video player, video height by simply dividing it through that, this make sure I
keep the aspect ratio.
Now I need to stop that stream in the video though because otherwise it keeps on going even though we
closed it and if we keep this stream ongoing, the camera will stay on,
also indicating this of course by, for example on a Mac, having the screen LED light pointing at you.
So you definitely want to turn this off to both save resources and not scare your users.
So we stopped the video by accessing the video player
and on that video player, we now can access the source object.
You remember, that is where we added our stream to and now you could think we just set it to null,
this is not what we do though,
instead we access get video tracks. Get video tracks as you guessed it, gives us access to all the running
video streams on that element,
it's only one here but still, that's the general approach you can use.
You can then use the forEach method
to loop through all the running tracks and basically for each track, you call stop.
So that gives you access to all streams which are currently used on that video player and it will stop
them all.
So with that, let's save this and let's see if it works.
Back in the service worker, I'll bump up that version number and go back to my application, reload once
to get the newest service worker, close and reopen to then activate this new service worker and let's
try it out.
I'll open this, we'll see my image again,
now let me try to smile and click that capture button. And you see, yes I could have looked more intelligently
but what you see is that the stream stopped and we got a picture, exactly what we wanted.
So this is the
first step,
now the next step is to get that picture onto the server.
We'll start working on this in the next lecture.