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

[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

[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?

[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!