DEV Community

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...

Read full post

leastbad • May 13 '20

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?

Ben Greenberg • May 14 '20

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/.

leastbad • May 14 '20

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

I'm a Rails dev. :)

leastbad • May 14 '20

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!

Ben Greenberg • May 14 '20

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/.

leastbad • May 14 '20 • Edited

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

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. ;)
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)"!

Ben Greenberg • May 14 '20

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.

leastbad • May 14 '20

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!

Ben Greenberg • May 14 '20

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

kamalpandey • May 15 '20

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

Ben Greenberg • May 18 '20

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

kamalpandey • Jun 27 '20

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?

Ben Greenberg • Jun 29 '20

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!