DEV Community

Cover image for Create a Video Party App With Rails Part 2: Building the Frontend

Create a Video Party App With Rails Part 2: Building the Frontend

Ben Greenberg on May 13, 2020

This is the second part of a two-part series on creating a video watch party application using the Vonage Video API and Ruby on Rails. In the fir...
Collapse
 
leastbad profile image
leastbad

Great finish, Ben!

Just curious, as I'm still learning about webpack every day... how come you put each class into the packs folder, essentially creating n packs?

Usually I see application.js importing from '../controllers' or whatever is appropriate to whatever framework is in place. Your configuration seems to essentially treat each pack as a separate file that needs to be sent down the wire, even though you don't appear to be doing any dynamic imports.

I'm not so uptight about a batch of HTTP requests, but I am curious if you had some great intent behind it.

Final question for the moment: do you have to load the OpenTok script on your global window object via a SCRIPT tag, or is there an npm package we can import?

Collapse
 
bengreenberg profile image
Ben Greenberg

Hello again,

Thanks so much!

There are different ways people choose to organize their assets, whether the stylesheets, javascript or images. If this was going to be a production app that I could reasonably expect would grow in complexity and in usage, I would probably do it differently. However, as the use case here was something fun for kids (or any other group of friends, etc.) I was less concerned with adopting a specific opinion on Webpack asset folder structure. As an aside, if this was to be anything more than what it was intended for, I also would not recommend implementing the "security" protocols the way I did either, as that is not very secure! A real production app would want to have more than hiding the moderator functions with a CSS element style! :)

There is indeed a Node SDK for OpenTok. Reference docs are here: tokbox.com/developer/sdks/node/.

Collapse
 
leastbad profile image
leastbad

I actually meant on the client: github.com/nexmo-community/rails-v...

I'm a Rails dev. :)

Collapse
 
leastbad profile image
leastbad

So, yeah... now that I've clarified I meant "is there a way to import the OpenTok library without needing a script tag in the document"... is there? Not a rhetorical question. Hoping to put this API to work!

Thread Thread
 
bengreenberg profile image
Ben Greenberg

Yes, there is, look at the last sentence in my last reply :)

There is indeed a Node SDK for OpenTok. Reference docs are here: tokbox.com/developer/sdks/node/.

Thread Thread
 
leastbad profile image
leastbad • Edited

I am clearly failing to communicate what I'm trying to ask. Let me try harder/better.

  1. I'm a Rails developer, not a Node developer - so you can safely presume that I'm not looking for a Node library in any potential future inquiry. ;)

  2. What I am trying to do is load whatever client library is necessary via my webpack application.js pack file, specifically so that I don't have to resort to putting a script tag in my HEAD and addressing the TokBox classes via the global namespace.

I think what I'm looking for is an ES6 module, probably downloaded and added to my package.json via npm add?

FWIW, the answer could very well be "no, we haven't done that (yet)"!

Thread Thread
 
bengreenberg profile image
Ben Greenberg

Not a problem, I think I understand now.

If I understand correctly, then the answer is you can add the OpenTok JS/Node SDK to your application via Webpack with yarn add opentok or npm install opentok without the use of a script tag.

Thread Thread
 
leastbad profile image
leastbad

Thanks for trying, Ben. That package is, once again, the node server implementation. I'm looking for the client. :)

It's all good... I think that the @opentok/client is the module I'm looking for. I'll let you know how I make out!

Thread Thread
 
bengreenberg profile image
Ben Greenberg

Glad you followed the link! Best of luck to you!

Collapse
 
kamalpandey profile image
kamalpandey

Thanks for the tutorial. Is there any way we can share desktop and allow remote control of dashboard of each others.

Collapse
 
bengreenberg profile image
Ben Greenberg

Hi Kamal,

Unfortunately, it's not possible to remotely control the screenshare. The screenshare functions as a published video stream in the same way that a webcam is a published video stream, except the media source is the screen instead of the camera. Just like a camera is a one-way stream, (i.e. viewers view the camera), so too with the screenshare stream.

All the best,

Ben

Collapse
 
kamalpandey profile image
kamalpandey

Hi Ben,

Could you help me with this ?

I am trying to implement group video functionality and I have following code

class App extends Component {
  this.state = {
     subscribers: [],
     subscriberVideos: [],
     screenVideo: undefined,
     publisherVideo: undefined,
     publisher: undefined,
  }
}
async start() {
  let publisher = OT.initPublisher(null, this.defaultPublisherProps, error => {
    if(error) {
    }  
  })
 publisher.on('videoElementCreated', this.onPublisherVideoElement);
 this.state.otSession.publish(publisher, error => {
    if (error) {
   }
   this.setState(() => {
     return { publisher: publisher };
   }
  }
}

onPublisherVideoElement = event {
  this.setState(() => {
   return { publisherVideo: event.element }
   });
  }
}
onPublisherScreenElement = event => {
  this.setState(() => {
    return { screenVideo: event.element }
 }
}
onSubscriberVideoElement = event => {
   this.setState(() => {
      return { 
        subscriberVideos: [...this.state.subscriberVideos, event.element]
      }
     }
   })
}
onSessionStreamCreated = event => {
  let subscriber = this.state.otSession.subscriber(event.stream, null, this.defaultSubscriberProps, error => {
     if (error) {
     }
    if (event.stream.videoType == 'screen') {
      subscriber.on('videoElementCreated', this.onPublisherScreenElement);
      this.setState(() => {
        return { screenSubscriber: subscriber };
      })
   } else {
     subscriber.on('videoElementCreated', this.onSubscriberVideoElement);
       if (this.props.mdm === "m") {
          this.setState((prevState) => {
             return {
               subscribers: [...this.state.subscribers, subscriber]
             }
          }
        }
     else {
       return { subscribers: [...this.state.subscribers, subscriber] }
     }
   }
  }
}

While showing subscribers I am doing

showSubscribers() {
    return this.state.subscribers.filter(subscriber => subscriber.stream !== null).map((subscriber, index) => {
       return(
          <VideoSubscriber
             key={index}
             otok={this.otok}
             subscriber={this.state.subscribers[index]
             subscriberVidoe={this.state.subscriberVideos[index]
            />
       )
    }
}

But at random times the video goes black and also while some of the subscriber refresh the page it goes blank creates multiple subscirber with null stream.
How can i resolve this?

Thread Thread
 
bengreenberg profile image
Ben Greenberg

Hi Kamal,

Good to hear from you here and in the Video Ruby SDK where you raised an issue with this question and in our Community Slack! Instead of responding in 3 separate places to the same question, we're following up with you in the Community Slack.

If anyone has any questions about the Video API, or any other Vonage API, please feel free to join us in the Vonage Community Slack where we would be glad to lend a hand!