CODEWITHSUNDEEP
javascriptwebrtcopentoktokboxvonage
Onkar Musale
Onkar Musale

Reputation: 909

Video On/Off Button is not showing in Vonage Video API

I am working on a video conference solution which involves one-to-one video call (doctor-patient), To implement webRTC I am using vonage api solution, I have tried their embed video call solution which is perfect as it provides video on/off features, But using embed we cannot archive the conversation,hence i am now using vonage api.

I have working solution which includes features like one-to-one video call and archiving videos automatically to s3 bucket, Although i can see small button for audio on/off, I am not able to see the button for video on/off like embed video chat, i have also tried to on/off the video manually using the documentation as on the link - vonage docs But still i am not able to disable/enable videos manually, sometimes it works on safari though. So can anyone help me with this ?

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

var session = OT.initSession(apiKey, sessionId);
session.on('streamCreated', function(event) {
       session.subscribe(event.stream, 'subscriber', {
         insertMode: 'append',
         width: '100%',
         height: '100%'
       }, handleError);
     });
     
   var publisher = OT.initPublisher('publisher', {
     insertMode: 'append',
     width: '100%',
     height: '100%'
   }, handleError);

I am using above code to facilitate one-to-one video call, and tried setting video on/off functionality by using below code, But it is not working,

var pubOptions = {publishAudio:true, publishVideo:false};
var publisher = OT.initPublisher('publisher', pubOptions, {
     insertMode: 'append',
     width: '100%',
     height: '100%'
   }, handleError);
   
var options = {subscribeToAudio:true, subscribeToVideo:false};
session.on('streamCreated', function(event) {
       session.subscribe(event.stream, options,'subscriber', {
         insertMode: 'append',
         width: '100%',
         height: '100%'
       }, handleError);
     });

Any help will be appreciated, Thanks and cheers..!😊

Upvotes: 0

Views: 768

Answers (1)

Michael Jolley
Michael Jolley

Reputation: 368

You're looking for the publishAudio and publishVideo methods on the publisher object.

Both accept a boolean denoting whether to publish that content. So using something like below would cause the publisher to stop sharing their video:

var publisher = OT.initPublisher('publisher', pubOptions, {
     insertMode: 'append',
     width: '100%',
     height: '100%'
   }, handleError);

publisher.publishVideo(false);

If you're trying to mute the audio/video coming from someone else, you'll use the subscribeToAudio and subscribeToVideo methods on the subscriber object. Both also accept booleans. This would mean you need to keep track of your subscribers.

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, options,'subscriber', {
    insertMode: 'append',
    width: '100%',
    height: '100%'
    }, handleError);
  subscriber.subscribeToVideo(false);
});

You may want to look at the OpenTok Accelerators. They provide a lot of functionality already baked in, including state.

Upvotes: 3

Related Questions