enyoopentok

enyo.js to integrate with other javascript component


I'm trying to integrate enyo.js with opentok. Can't figure how to wrap the video component which will be generated from opentok's javascript. If anyone can help me how to integrate enyo with external javascript such as opentok would be great.

I have create below jsfiddle example which has video kind and opentok sample code. I would like generate the video using enyo kind but I'm newbie and need some help from experts in enyo.

jsfiddle link

http://goo.gl/nrsZQJ


Solution

  • I'm going to take a stab at answering this one based on what I think you want to accomplish. What we need to do is create a wrapper around the OpenTok video stream. I'm not terribly familiar with it but it looks like we can make it render its video into a div we specify. So, what we'll do is create a wrapper object that will (by default) be a div element and use that element as the target for OpenTok's initPublisher method. Once a kind is rendered we can use its hasNode() method to get the node in question. So, we end up with something like the following:

            var publisher = OT.initPublisher(this.hasNode());
    

    To be sure we have the node, we'll set up the calls within the rendered method:

        rendered: function() {
            this.inherited(arguments);
            if(this.session) {
                this.session.connect(token, this.bindSafely(this.connected));
            }
        },
    

    We can add wrapper methods to the kind by using the session member to access what we need. You can also stash the publisher or any other parts you need.

    Here's a working fiddle based on your simple example. I've moved the JavaScript into the wrapper object.

    http://jsfiddle.net/6z9n65ty/4/

    You'll want to override destroy on the wrapper so you can clean up the OpenTok session properly.