Hiding Recorder

[mclngl]

Hello
I just need to use the camera and I don't need the realtime preview, is there any way to hide the recorder from the page that doesn't involve overriding recorder css classes etc ?

thanks.

[ntshcalleia]

Hi Marcello,

Right now the only way to hide the recorder is by customizing the CSS, but this is something pretty easy to achieve. You can add visibility:hidden or something similar to hide the recorder, and then create your own custom buttons to start and stop recording.

Here is an example of a recorder without realtime preview.

You can also use the autorecord parameter to start recording right away (you may still need to request camera access to the user) or the timelimit parameter to automatically stop recording after a given time period.

[mclngl]

Thank you for the quick reply.
The problem with the 'display: none' approach is that I get this error:

TypeError
Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'.

Removing display none makes the problem disappear.

[Bane-D]

The option you could try Marcello is with visibility:hidden;. This one is similar however is lesser type of hidden element yet would work as you want it.

It provides your embedding and the code around it to have width and height and should resolve your issue.

It is good to point out that some browsers will try to understand what is happening and react based on that. If you can not hide the recorder, you can always add a layer above it, which hides it by itself. You could then show any sort of image/video or instructions over the (now hidden) video recorder.

The code would look something like this:

<div style="visibility:hidden;">
    <ziggeorecorder
        ziggeo-width="640"
        ziggeo-height="480"
        ziggeo-theme="minimalist"
        ziggeo-themecolor="green">
    </ziggeorecorder>
</div>

Of course it would be best if you add some buttons on the page to allow easy start and end of recording.

Do let us know how it goes. :)