How To Record HD videos

To record HD videos there are few different things to keep in mind. You have the frontend and backend.

We will show you how you can set up both.

All of the videos that come into our system get transcoded into 640x480. Now if you want to have HD you need to change that.

To do this you should set up the Video Profile in your Ziggeo Dashboard.

Video Profile is basically a way for you to set what resolutions you want to have the videos end up with.

Benefits of setting it up:

1. You need to create this only once
2. Easily referenced in your recorders
3. You can have any number of them
4. Easily modified later on if you decide something else is better
5. Supports common and custom resolutions
6. Has Expert Settings for more specific scenarios.

Now each video profile can have one setting marked for default stream and multiple for non default streams.

The default stream basically means the video stream that is played for you when you just provide the token.

In general you can play any stream in your player by specifying the stream-width or stream-height however we always recommend setting the default stream with the resolution you would use the most.

Now to set the video profiles up, please check How to create Video Profiles page.

As you go through it, you will end up with the key or the token of your video profile.

Once you do, you are ready to go and set up the frontend.

If you jumped to this section, please note that you will need the key or token of your video profile. In codes bellow we will reference it as "VIDEO_PROFILE" regardless if it is key or token.

Note: If you set up a key and the key's name is "test", you would add it to the recorder as "_test". If you add it as "_test" then you would again need to add underscore into the recorder as "__test".

We will use a very simple recorder code here, however you can add any of the additional parameters to it.

First, in order to make it easier for you, let us take that our video profile is set with 4 streams:

1. Default stream of 1280x720 (720p)
2. Next stream of 1920x1080 (1080p)
3. SD stream of 854x480 (480p)
4. Another SD stream of 640x360 (360p)

Let's take the following as if that is our existing code:

    <ziggeorecorder
        ziggeo-theme="modern"
        ziggeo-themecolor="red">
    </ziggeorecorder>

With all of the above, this is how our code would look now.

    <ziggeorecorder
        ziggeo-theme="modern"
        ziggeo-themecolor="red"
        ziggeo-video-profile="VIDEO_PROFILE"
        ziggeo-recordingwidth="1920"
        ziggeo-recordingheight="1080">
    </ziggeorecorder>

We can see that video-profile parameter allows us to set up the video profile we will use. That is all you need to get the videos that come in transcoded in the way you wanted.

Now looking at the video stream resolutions, we can see that the first set was default as 720p however our recording width and height are set to the second stream of 1080p instead. The reason for this is that you want to record as high as possible resolution and then shrink the video down.

If you instead increase the resolution you will always get artifacts shown. Artifacts are basically little square boxes that are sometimes shown on video and images if they are upscaled. This is why you might have seen some videos or images looking pixelated.

So what happens on our system is that we take the original stream and then from it, and based on the video profile we create additional streams. It would create 1080p, 720p, 480p and 360p.

Now since our video profile is set to be the default as 720p, what happens is that this is what is played back for us.

Additionally to the above code you can also add the following parameter: fittodimensions. This parameter will try to respect the resolution you provide in recordingwidth and recordingheight even if it is not supported natively. In this case if you set 1080p and the person recording the video can not be recorded in 1080p, the aspect ratio will be respected, while the best new resolution is acquired and padding is addded around it.

• Please Note: *

1. While all of the above is accurate it will depend on your own setup. So resolutions you get would be equal to your setting and not to the one shown above, unless you made the same setup.
2. Parameters you add to your recorder next to the above mentioned, might change your end result, however this will not be true if you are only changing the way recorder works or looks which is not connected to the profiles and resolution.
3. Some browsers do not report what resolutions are available for recording
4. Many people do not yet have 1080p camera to use, while most should support 720p camera so knowing your end-users will help you decide the resolutions you want to get, or if you want to provide alternative recorder for some.

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",
                    'video-profile': "VIDEO_PROFILE",
                    recordingwidth: "1920",
                    recordingheight: "1080"
                }
            });

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

React

    <ZiggeoRecorder
        apiKey={API_KEY}
        ziggeo-theme={'modern'}
        ziggeo-themecolor={'red'}
        ziggeo-video-profile={'VIDEO_PROFILE'}
        ziggeo-recordingwidth={1920}
        ziggeo-recordingheight={1080}
    />

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

VueJS

    <ziggeo-recorder
        :apiKey="API_KEY"
        :theme="modern"
        :themecolor="red"
        :video-profile="VIDEO_PROFILE"
        :recordingwidth="1920"
        :recordingheight="1080"
    ></ziggeo-recorder>

To see more about VueJS check out our docs here.

Angular

    <ziggeo-recorder #ziggeorecorder
        [apiKey]="API_KEY"
        [options]="{theme: 'modern', themecolor: 'red', 'video-profile': 'VIDEO_PROFILE', recordingwidth: '1920', recordingheight: '1080'}"
    ></ziggeo-recorder>

To see more about Angular check out our docs here.

Android

    HashMap<String, String> extraArguments = new HashMap<>();
    extraArguments.put("video_profile", "VIDEO_PROFILE");

    RecorderConfig config = new RecorderConfig.Builder()
        .extraArgs(extraArguments)
        .build();

To see more about Android check out our Android docs here

iOS

     recorder.extraArgsForCreateVideo = @{ @"video_profile" : @"VIDEO_PROFILE" };

To see more about iOS SDK methods check out our iOS docs here