JSFiddle - React, Tailwind, and code Playground

by veeramarni

HTML

<script src="http://static.opentok.com/webrtc/v2.2/js/opentok.min.js"></script>

CSS

.video-grid {
    position:relative;
    width: 100%;
    height: 100%;
}
.video-block {
    position:absolute;
    width: 200px;
    height: 100px;
    left: 10px;
    top: 10px;
    background-color:black;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    display:block;
}
.video-panel {
    visibility: hidden;
    background-color:rgba(255, 255, 255, 0.5);
}
.withvideo .content-pane {
    width: 100%;
    height: 75%;
}
.withvideo .video-pane {
    width: 100%;
    height: 25%;
    visibility:visible;
}

JavaScript

/* Video Conference Plugin using ENYO */

      // Initialize API key, session, and token...
      // Think of a session as a room, and a token as the key to get in to the room
      // Sessions and tokens are generated on your server and passed down to the client
      var apiKey = "45120062";
      var sessionId = "1_MX40NTEyMDA2Mn5-MTQyMDIyNDA2NDI5OX5La2dKNnpoY2wxazVFcHJKQnhkVjVtZzJ-fg";
      var token = "T1==cGFydG5lcl9pZD00NTEyMDA2MiZzaWc9NDYwZmM1NWVkMDQ2ZGE3ZmRhNjU2YjI2ZjlhN2NlYTNkNTBlOThkNTpyb2xlPXB1Ymxpc2hlciZzZXNzaW9uX2lkPTFfTVg0ME5URXlNREEyTW41LU1UUXlNREl5TkRBMk5ESTVPWDVMYTJkS05ucG9ZMnd4YXpWRmNISktRbmhrVmpWdFp6Si1mZyZjcmVhdGVfdGltZT0xNDIwNjkxMDg3Jm5vbmNlPTAuODAzODM5MjExMjQ5NDAyNg==";


/* Video Conference Plugin using ENYO */
enyo.ready(function() {
        
    var blanc = {};
    enyo.kind({
        name: "blanc.Content",
        kind: "FittableRows",
        classes: "content",
        components: [{
            kind: "Panels",
            classes: "content-panel",
            name: "panels",
            draggable: false,
            components: [{content: "Something"}]
        }, {
            name: "video",
            kind: "blanc.OTWrapper"
        }]
    })
    
    enyo.kind({
        name: "blanc.OTWrapper",
        session: null,    // OT session
        create: function() {
            this.inherited(arguments);
            // Create our session right away.  Perhaps session should be app global?
            this.session = OT.initSession(apiKey, sessionId);
 
            this.session.on("streamCreated", this.bindSafely(this.streamCreated));
        },
        rendered: function() {
            this.inherited(arguments);
            if(this.session) {
                this.session.connect(token, this.bindSafely(this.connected));
            }
        },
        streamCreated: function(event) {
            this.session.subscribe(event.stream);
        },
        connected: function(error) {
            var publisher =...