Create a camera module in Hype for a webapp

[MarkHunte]

version 2. example showing one way of how to increase capture image size. 28-01-23

@kerguelen

Hi Mark,
I mean the image needs to be displayed before it can be saved. But display size (and thus saving size) depends on the container the image is being displayed. And, if I’m not mistaken, this size is always smaller than maximum image size allowed by the camera.

I did understand what @kerguelen was getting at but looks like I never did come back to this..

Although this is correct, you can actually display a preview of the image data in a smaller sized element and use css to contain how it is displayed in said preview.
i.e

 #previewImage{
  background-size: contain !important;
}

This then allows you to place a hidden element that also get the image data but its size can be much larger. (CaptureImageElementHidden)

The result is a larger scaled image.

In this example the capture will come out 2x the size of the CaptureImageElementHidden element.
You can make the adjustments as you need by changing the physical size of the CaptureImageElementHidden element and the canvas width, height + the canvas draw size.

 var thecanvas = document.createElement("canvas");
     thecanvas.width = destWidthContainer * 2
     thecanvas.height= destHeightCiontainer * 2
     
  var context = thecanvas.getContext('2d');
   context.drawImage(video, 0, 0 ,destWidthContainer * 2 ,destHeightCiontainer  * 2);

version 2. example showing one way of how to increase capture image size.

video_Camera_Browser_Stream_ImageCapture_v2.hypetemplate.zip (26.0 KB)

Live demo updated to v2 ( 28-01-23 )

https://markosx.com/httpshypetests/camerastreamSnap

[mcfilms (Jerry Witt)]

Thank you for this! It was very simple to implement. I have a follow-up question though. If I put this into the onLoad in my first scene it works. But if I jump to another scene that needs this camera feed and that scene has the onLoad javascript, the camera video doesn't display. Any thought on why this may be?

[MarkHunte]

You could probably create it all as a symbol but It is relative simple to update the code and ui.
and probably a couple of ways to make thing concise but below is the quickest.

There are two issues is in the original that will affect instances of this on more than one scene.

The first is we are asking HypeDocument to look for element ID's and assign them to vars in the code.

We cannot have elements with the same ID on multiple elements, even when they are on different scenes. ID's need to be unique.

But we can give the same elements a Class name. Any number of elements can have the same Class name.

So to fix this. We need to give any elements that we assigned an id in the Elements Inspector, a Class name. The Class name should be the same as the ID. ( just to make editing the code easier)

In the code, where we use hypeDocument.getElementById('id')

We need to change it so we are looking for a Class name instead of an ID. But Hype does not have a Class name API. We therefore need to use native Javascript.

This brings us to the second issue. To get the element with the correct Class name, we can use the

JS API querySelector('. fooClassName')

But because we have elements on multiple scenes that have the same class name, we want to make sure we always get the ones on the current scene.

So we need to ask the scene to query itself for the elements with said class name.

To do this and because we are only ever in one scene at a time, we can do this in each of our Hype Functions that we need to get the Class names.

We first get the scene element.

const thisScene = document.querySelector("#" + hypeDocument.currentSceneId())

We can then change any hypeDocument.getElementById('id')
to

thisScene.querySelector('.fooClassName');

Also any css we are using ID selectors '#' will need to change to use the Class selector '.'

Hope this all makes sense.

---

video_Camera_Browser_Stream_ImageCapture_v2-2hypetemplate.hype.zip (42.7 KB)

[mcfilms (Jerry Witt)]

Thank you for this detailed reply. Some of the technical requirements went a bit too far for me. I ultimately ended up using separate files instead of scenes.

This video playback ended up being used on a laptop on FBI: Most Wanted (S6 Ep10). In fact, about 80% of the screen graphics (computers, TVs, etc.) use Hype-generated HTML5 files for playback on that show now.

[MarkHunte]

will have to watch that.