How to set up screen recording

Screen recording can be very helpful in many cases. For example this is how many presentations can be created. However what if the right software is not available? What if the presentation assets are not taken with it? Well if you record the presentation and turn it into a video, everything is always right there available at any moment.

Screen recording is not just about presentations. You might need to see what is happening, where or how. Some bug or issue that your customer can see yet you can not recreate might show up in the video and make it much easier for your team to work through.

Regardless of the exact use case, you can easily set up the Ziggeo Screen Recorder following the steps outlined here.

Any recorder can be set to use the screen recording. All you need is the allowscreen parameter. Once you add it you will see the screen as the option.

It can be added to the other parameters that already are present in your recorder.

For example, let us take a look at this code:

    <ziggeorecorder
        ziggeo-theme="modern"
        ziggeo-themecolor="blue"
        ziggeo-allowscreen>
    </ziggeorecorder>

This is the most basic setup you would do to have the screen recorder on your pages. It will allow you to record video, upload video and to also do the screen recording.

If you wanted to disable the first two, all you would need is to disable both like shown here:

    <ziggeorecorder
        ziggeo-theme="modern"
        ziggeo-themecolor="blue"
        ziggeo-allowscreen
        ziggeo-allowrecord="false"
        ziggeo-allowupload="false">
    </ziggeorecorder>

That is it really. You have the codes added like that and you have yourself a full featured screen recorder that submits the videos to your Ziggeo account.

You can see all of the parameters you can use to further change it on our parameter page. We will however show you few possibly interesting ones bellow as well.

There are various parameters that you can add to your screen recorder. They can change how it works or how it behaves. It can also add more features to your existing screen recorder.

flipscreen a boolean parameter that allows you to flip the screen that you are recording. This might be interesting to you if you flip your camera as well.

Next parameters allow you to change how the additional streams might work. These would be for example a camera next to your screen recording.

allowmultistreams is a boolean parameter that would allow you to enable the addition of more streams. It would add the button next to the screen recording so you immediately start with 2 streams (camera and screen).

showaddstreambutton is another boolean parameter which allows you to start screen recorder and then change your mind and add the camera as well.

multistreamdraggable boolean parameter makes the additional (smaller) stream to become possible to drag around. This is useful if at some point of presentation it becomes required to move the camera to show something that would otherwise be hidden by it.

multistreamresizeable boolean parameter works similar to dragging however it allows for resize of the stream. This could become useful to make the camera feed smaller at some point yet still visible, or if you wanted to make it larger than it was originally.

multistreamreversable defaults to true, however if you want to disable it, you can set it as false to no longer allow reversibility of stream-in-stream

addstreamminheight is integer value that would set what is the minimal height the stream can be resized to, defaulting to 95 pixels.

addstreamminwidth is integer value that would set what is the minimal width that the stream can be resized to and it is defaulting to 120 pixels.

addstreampositionheight allows you to set the height of the additional stream that is set when recorder is shown. The default value for that is 95 pixels in height.

addstreampositionwidth allows you to set up the width of the additional stream when recorder is shown. The default value for the width is set at 120 pixels.

addstreampositionx integer value that would set where additional stream would be shown on horizontal line and is defaulting to 5.

addstreampositiony integer value that would set where additional stream would be shown on vertical line and is defaulting to 5.

addstreamproportional boolean value to make sure that additional stream keeps its aspect ratio which is useful if you set the width or height only.

The screen recording is relatively new. Firefox was the only browser that started this without requiring any addon. The WebKit or Chromium based browser vendors such as Chrome and Opera started support with the requirement of addon to be made. We created a segment under your application Manage section to help you create this with few simple actions.

Good news is that at this time this is no longer required. Chrome and Opera both work without any addon being required.

If you still want to support the few versions of Chrome and Opera that did require it, just log into your Ziggeo account, go to your application that you will use with the plugin and go to Manage section. There you will see Extension Builder which has 4 fields to fill out and a button. It is that easy.

You will also need to add the right info into the header section of your app. This info goes together with the other app wide settings (like app token) however it requires you to first build and submit your plugin to Google and Opera stores.

    chrome_extension_id: "EXT-ID",
    chrome_extension_install_link: "https://chrome.google.com/webstore/detail/EXT-NAME/EXT-ID"
    opera_extension_id: "EXT-ID",
    opera_extension_install_link: "https://addons.opera.com/en/extensions/details/INTERNAL-ID"

• EXT-ID, EXT-NAME and INTERNAL-ID parameters above are details you would know once the plugin is submitted and approved by the teams at Google and Opera store.

The code above would look very similar in other flavors of JavaScript, so here they are:

Vanilla Javascript

    <div id="recorder"></div>
    <script>
        ziggeoApp.on("ready", function() {
            var recorder = new ZiggeoApi.V2.Recorder({
                element: document.getElementById("recorder"),
                attrs: {
                    theme: "modern",
                    themecolor: "red",
                    allowscreen: true
                }
            });

            recorder.activate();
        });
    </script>

React

    <ZiggeoRecorder
        apiKey={API_KEY}
        ziggeo-theme={'modern'}
        ziggeo-themecolor={'red'}
        ziggeo-allowscreen={true}
    />

To see more about React JS check out our docs here.

VueJS

    <ziggeo-recorder
        :apiKey="API_KEY"
        :theme="modern"
        :themecolor="red"
        :allowscreen="true"
    ></ziggeo-recorder>

To see more about VueJS check out our docs here.

Angular

    <ziggeo-recorder #ziggeorecorder
        [apiKey]="API_KEY"
        [options]="{theme: 'modern', themecolor: 'red', allowscreen: true}"
    ></ziggeo-recorder>

To see more about Angular check out our docs here.

Android

    ziggeo.startScreenRecorder(@Nullable ScreenRecordServiceNotificationConfig config);

To see more about Android check out our Android docs here