Recording in HD - Ziggeo Recorder v2 JS

Question

I am having difficulty capturing HD video with the Ziggeo Recorder.

I have set up a Recorder, basically, it’s a clone of Ziggeo's hosted solution:

<script>
            $(document).ready( function() {
                //assigning the event handler for click on the Next button on first screen
                $("#step1 button").on("click", function() {
                    //hide first screen
                    $("#step1").hide();
                    //show second screen
                    $("#step2").show();

                    //add our embedding to the page
                    var recorder = new ZiggeoApi.V2.Recorder({
                        //we find the element with id="recorder" to attach v2 recorder to it
                        element: document.getElementById("recorder"),
                        attrs: {
                            //we make the recorder responsive
                            responsive: true,
                            //we set the max time for recording to 120 seconds
                            timelimit: 2 * 60,
                            theme: "modern",
                            video_width: 1920,
                            video_height: 1080,
                            video_profile_transcoding: "HDcapture",
                            hd: true,
                            //we add name and email to the video as a custom data
                            "custom-data": {
                                name: $("#name").val(),
                                email: $("#email").val()
                            }
                        }
                    });

                    //we activate the recorder
                    recorder.activate();

                    recorder.on("verified", function() {
                        //once video is uploaded and seen that it can be processed the verified event fires we show the
                        // button to Submit the form
                        $("#step2 button").show();
                    });
                });

                //When Submit button is clicked
                $("#step2 button").on("click", function() {
                    //hide second screen showing recorder
                    $("#step2").hide();
                    //show the "Thank you" screen
                    $("#step3").show();
                });
            });
        </script>

I’ve tried the following in the attrs array with no avail.

video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,

I set up a video transcoding profile (and made it default), but it isn’t catching.

All videos are coming through at:

video_width: 640,
video_heigh: 480,
hd: false,

These Ziggeo support resources don’t seem to answer how to record HD (w/ v2 & JS)...

https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-

https://ziggeo.com/blog/record-video-in-hd/

And I don't see reference to HD anywhere here: https://ziggeo.com/docs/api

Thanks in advance for any help or guidance. The promise of the Ziggeo product is awesome–I just need to get it to deliver HD!

Answer 1

It is awesome that you included the links and the codes Jon. Looking at them I can see why it is not working for you. My suggestion would be to check out the code from one of your links: https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-

This is the code currently shown there:

<ziggeorecorder
    ziggeo-recordingwidth=1280
    ziggeo-recordingheight=720
    ziggeo-theme="modern" 
    ziggeo-themecolor="red"
    ziggeo-video-profile="_name_of_your_hd_profile">
</ziggeorecorder>

The key parameters for recording HD videos would be setting recordingwidth and recordingheight to the values you wish to use. The default would be 640x480.

The HTML codes require ziggeo- prefix, while JavaScript one does not.

So changing the above example would result in the code that would look like so:

var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
    element: document.getElementById("recorder"),
    attrs: {
        theme: "modern",
        recordingwidth: 1920,
        recordingheight: 1080,
        'video-profile': "_HDcapture"
    }
});

• I have removed most other parameters to show the most basic parameters you need to set.

Now, in the above code you can also notice that I used underscore before the video profile name resulting in _HDcapture. This is because the tokens (IDs generated by our system) are used without underscore, however if you made the ID, this is then a key (your unique ID) and to make our system aware that it is a key, it will look for the underscore. So if you do not put the underscore in your embedding, then it will just ignore it.

• You can see "identifier: _HDcapture" shown to you when you create video profile in the dashboard helping you to know what exactly you should use.

Now looking at the parameters you have used, I believe that you used them from the video data then adding them to your embedding.

This video data is just showing you what you can expect in the JavaScript functions like recorder.get() or what would come in webhook. For actual parameters that you can use you should check out the docs here.

• One thing to point out: You can only record 1080 if your camera supports 1080. If you use 720 then your camera has to support 720. Most cameras support 640x480 and is the reason why it is our default. I am saying this because:
  1. You need the camera to be able to record in resolution you wish
  2. You might want to also have alternative for people that do not have HD cameras

For anything JavaScript and HTML related, I would suggest checking out the docs here: https://ziggeo.com/docs/sdks/javascript/. Still do post here, or reach out to the support team of Ziggeo, either over email (support@ziggeo.com) or through forum: https://support.ziggeo.com/hc/en-us/community/topics

PS: I am part of the Ziggeo team, we all like to help, and I hope the above is helpful to you and anyone else looking for the same :)