Confirm that media!

To record a video you have to ask for permission to capture data from camera and microphone. When this is done, the person that is about to record themselves need to click on "Record" button as well. Now once they finish the recording they also need to wait for uploading to finish for you to actually have the video.

Now reading this it seem that there are few steps before you can get the video. Additional to that however some countries require additional consent after the video was recorded and uploaded. This is the freedom for you to select if you are happy with some video being used as you intended before you started recording. Of course this is true for video, audio and image capture.

This is all great, however how do you get that additional confirmation?

Well we have few options that have been added just for this specific case.

Header Setup

It is always best to make sure that we are using the same codes. For that reason we suggest that you check your header code and make sure it looks something like this:

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
	var ziggeo_app = new ZiggeoApi.V2.Application({
		token:"APPLICATION_TOKEN",
		webrtc_streaming_if_necessary: true,
		webrtc_on_mobile: true
	});
</script>
  • Of course, please replace "APPLICATION_TOKEN" with your own application token.

Now, there are multiple things you might do so we will show you how to make the most important part first.

The update call

Our API allows you to quickly and simply make an update call to your media and have the parameter intended for confirmation be updated.

To do that you would use the code like this:

<script>
    ziggeo_app.videos.update("VIDEO_TOKEN", {submitted: true}, {
        success: function () {
             //If you want to know that your update call was a success
        }, failure: function () {
             //If you want to know that something unexpected happened
        }
    });
</script>

In this code, you would replace the "VIDEO_TOKEN" with your actual video token.

Confirm on Recorder

You can always add your own code to confirm the video and make the call as we described above. However in most cases you might prefer to have our own button ask for confirmation.

To add this button you would just add a single parameter as per the code bellow

<ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="red"
    ziggeo-width="100%"
    ziggeo-manualsubmit="true">
</ziggeorecorder>

This will show a nice confirm button on your recorder and allow you to confirm the same.

Detect that confirmation

Usually when you are required to capture this confirmation you might be required to do some other things as well. For that reason it would be useful if you could also listen to the click / press of that button.

Well actually you can. All you would do is to listen to a special event called: manually_submitted.

You can do that as follows:

recorder.on("manually_submitted", function () {
    //Your code goes here
});

Connect it all together

Well now that we know how it all works, we are ready to try and combine it all together. Let's add an option to show the confirm button connected to the event. Once the event fires we make the update call.

Wondering why it works like this? Why is the confirm button not making the update itself? Well to be honest there are different types of confirmations that you might require. With this approach you are able to use our system in any manner that works best for you.

With that said, here is the complete code, including the header segment.

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
	var ziggeo_app = new ZiggeoApi.V2.Application({
		token:"APPLICATION_TOKEN",
		webrtc_streaming_if_necessary: true,
		webrtc_on_mobile: true
	});
</script>

<ziggeorecorder id="ziggeo_recorder"
    ziggeo-theme="cube"
    ziggeo-themecolor="red"
    ziggeo-width="100%"
    ziggeo-manualsubmit="true">
</ziggeorecorder>

<script>
    ziggeo_app.on("ready", function () {
	    var element = document.getElementById('ziggeo_recorder');
        var recorder = ZiggeoApi.V2.Recorder.findByElement(element);
        recorder.on("manually_submitted", function () {
            ziggeo_app.videos.update("VIDEO_TOKEN", {submitted: true}, {
                success: function () {
                    alert('Confirmed!');
                }, failure: function () {
                    //If you want to know that something unexpected happened
                }
            });
        });
    });
</script>

As you can see above, we have added "ready" event to the code which is there to help in case you copy paste the code. The idea is to give time for the codes within this event to have the page created (so that HTML element can be found). In this case to find our recorder.

PREV NEXT