1

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

user1595858
  • 3,700
  • 15
  • 66
  • 109
  • I'm a little unclear on what you mean by things like 'generate the video' and how the integration works. In general, when wrapping a non-enyo component you will create the non-enyo component within the `rendered()` method and have methods on the wrapper that call into the non-enyo component. Can you use enyo.Video? – Pre101 Jan 08 '15 at 23:30

1 Answers1

2

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.

Pre101
  • 2,370
  • 16
  • 23
  • which method will be called first? Create or rendered? – user1595858 Jan 09 '15 at 03:19
  • Create is called first. Rendered is only called when it is ready to be placed into the DOM. – Pre101 Jan 09 '15 at 08:04
  • Can you help me how to generate div under subscription div? streamCreated: function(event) { this.session.subscribe(event.stream, < new child div of susbcription>); }, http://jsfiddle.net/6z9n65ty/53/ – user1595858 Feb 02 '15 at 22:33
  • You could do a number of things. You could use `createComponent()` to make a component in there or you could just use `hasNode()` to get the HTML element and set the `innerHTML` to include a div. Or, `createElement()` and append it to the node. – Pre101 Feb 04 '15 at 00:11
  • Tried as below but not working as expected. this.createComponent({tag: "li", name: "test", container : this.$.subscribeButton}); this.render(); this.session.subscribe(event.stream, subscribeButton); – user1595858 Feb 07 '15 at 13:39
  • Open a new question with a new fiddle if you want to discuss this further. – Pre101 Feb 07 '15 at 20:13
  • Opened new question http://stackoverflow.com/questions/28446330/how-to-add-programatically-add-new-div-using-enyojs-and-attach-to-the-subscriber . Appreciate if you can help – user1595858 Feb 11 '15 at 03:53