2 followers Follow

Face outline etc.


In the blog it mentions you can add face outline if using 32 on mobile

I initialize like this:

 ziggeo_app.on("ready", function() {
        var element = document.getElementById('ziggeo-recorder');
        recorder = ZiggeoApi.V2.Recorder.findByElement(element);
        recorder = new ZiggeoApi.V2.Recorder({
            element: document.getElementById("thevideo"),
                attrs: {
                    'custom-covershots': false,
                    'early-rerecord': true

How do I add outline to that?


What i think would be really cool, if you could somehow implement your own 'face outline' map.

For my purposes, we record vehicles. Ideally they would remember to turn their device to landscape ( I know you can now use orientation in 31, but there are some issues doing that). Wouldn't it be great if I could have it display an outline of a vehicle. You'd see if you were in portrait mode the car outline is sideways... therefore suggesting you change the orientation.

Just a thought.

Todd Thompson

Please sign in to leave a comment.

1 comment


Hi Todd,

The face outline is designed for a head, however I see how in your case the face would be the car instead.

It would also probably make it much easier as which photo goes where if you want to know if the recording is from one side or the other through code.

Now having that said, first for reference for others, the blog post you are referring to is most likely this one:

What it is about is the webrtc for mobile. While it is considered as experimental feature, it should work just fine. Still it is good to point out that it would work just fine as long as the device and the mobile browser do and can support the WebRTC streaming.

Now to turn it on, it is super simple. To make it easier in the future, you can quickly create it for any new implementation through the header page here:

What this means is that you would add the same into the app initialization (next to app token) as so:

var app = new ZiggeoApi.V2.Application({
webrtc_on_mobile: true

Now the reason why we need this for face outline is because webrtc is utilizing the technology within the browser, instead of using the native app it would normally use.

Going further, since we are using the WebRTC we can then show our own things over the recording screen, which in turn allows us to show the face outline.

In terms of it being a car, that would be interesting and what I would suggest is to add a bit of CSS to it to make it work just right. If you have some sample car face map feel free to share it and I will give you an example code of doing this, if not, no worries, I will create something on my end (warning, you would probably need to have some designer re-do everything in terms of graphics :) ) which would show you how to add your own face outline image in place of the standard image.

I will also suggest this (and I think that we do have it as one of the interesting features to add already) so that adding a custom image is easier in future.


Bane 0 votes