Search code examples
javascriptvideovideo-streamingziggeo-api

Ziggeo meta-profiles parameter for recording video in javascript


I've been playing around with the ziggeo API and I'm trying to attach some events for a recording. as far as I can tell, the best way to do this is to create a div with a specific id and then create the ziggeo recorder using attribs, etc.

<div id="video_section"></div> 
<script>
    ZiggeoApi.Events.on("system_ready", function() {
        var recorder = new ZiggeoApi.V2.Recorder({
            element: document.getElementById("video_section"),
            attrs: {
                width: 320,
                height: 240,
                theme: "modern",
                themecolor: "red",
            }
        });

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

yet, unlike the use of the simple form <ziggeorecorder></ziggeorecorder> which allows the passing of a meta-profile parameter,

<ziggeorecorder ziggeo-theme='minimalist' ziggeo-themecolor="red" ziggeo-meta-profile='META_PROFILE_TOKEN'></ziggeorecorder>

when adding meta-profile in the attribs, initializing the recorder (as indicated in the API reference) results in meta-profile being misinterpreted. when changing the attribute to meta_profile, nothing gets processed.

        attrs: {
            width: 320,
            height: 240,
            theme: "modern",
            themecolor: "red",
            meta_profile: 'META PROFILE ID',
        }

beyond that, when trying to attach the event.

<script>
    var element = document.getElementById('video_section');
    var embedding = ZiggeoApi.V2.Recorder.findByElement(element);
    embedding.on("submitted", function(data) {
       alert("Video " + data.video.token + " was submitted!");
    });
</script>

I keep getting an error:

Uncaught TypeError: Cannot read property 'on' of null

does anyone have a good grip on how to do this properly? - create a recorder, set a meta-profile, and attach an event (either submission or completion of processing) to redirect back to a root path.


Solution

  • I think you need to use meta-profile instead of meta_profile. You may try this code:

    <div id="video_section"></div>
    <script>
    ZiggeoApi.Events.on("system_ready", function() {
        var recorder = new ZiggeoApi.V2.Recorder({
            element: document.getElementById("video_section"),
            attrs: {
                width: 320,
                height: 240,
                theme: "modern",
                themecolor: "red",
                "meta-profile":"META PROFILE ID"
            }
        });
    
        recorder.activate();
        recorder.on("verified", function(data){
           console.log(data);
        });
    });
    </script>
    

    Javascript doesn't allow using - outside quote when defining object property (CMIIW).