Close Fullscreen Video Recorder popup after recording is done

There are many options offered for your embeddings through Ziggeo API. There are parameters, events, methods and so many nice features. The great benefit that we can see is a plethora of different ways our codes can be added and used.

This can go from simple to really complex scenarios. Today we will share with you one that is simple yet quite interesting. Imagine having the recorder pop up in fullscreen just to go back to your page once recording finishes.

You did? That is exactly what you will be making yourself as you go through this text.

To pop up or not

There are benefits to having a popup element. Often such are referred to as lightbox. They are great for cases where your design does not allow the addition of a large video recorder. As we all know having a large preview during recording is quite beneficial and desired.

When you make your recorder as a popup instead, you no longer need to care about the sizing since it will jump out of your website. This also makes it easy to add our system without having to think about re-designing your layouts.

The code

As always we start with the header code that will look 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 ziggeoApp = new ZiggeoApi.V2.Application({
		token:"APPLICATION_TOKEN",
		webrtc_streaming_if_necessary: true,
		webrtc_on_mobile: true
	});
</script>

Note: Please replace the "APPLICATION_TOKEN" with your application token.

Now, we add the code for the popup in the place where we want the button to be. This code looks like so:

<div id="ziggeo_recorder_btn" style="border:1px solid gray; padding:10px; text-align:center;">Start Recorder</div>
<script>
    var btn = document.getElementById("ziggeo_recorder_btn");
    btn.onclick = function () {
        // this will create recorder popup
        var recorder = new ZiggeoApi.V2.PopupRecorder({
            attrs: {
                width: '100%',
                theme: 'cube',
                themecolor: 'red'
            }
        });

        recorder.activate();

        // to close the popup automatically
        recorder.on('verified', function () {
            recorder.destroy();
        });
    }
</script>

If you have added it to your page all you would do is save it. Once you open the page you will be able to start recording by clicking on "Start Recorder" segment.

As you finish the recording and the video is verified the recorder will simply turn off. At that time you can direct your customer to any part of page you like while video is safely stored in your Ziggeo account.

PREV NEXT