Option to mute microphone of the publisher through a button

[prabhat13528]

Currently, I can hover over the video and mute the mic but is there any other way to access the function/method to mute the microphone through a button?

I am using the window.OT.initsession to create the session and the below code is used to create the publisher stream:

this.sessionHelper = createSessionHelper({
      apiKey: session.apiKey,
      sessionId: session.sessionId,
      token: session.token,
      onStreamsUpdated: (streams) => {
        this.setState({ streams });
      },
      onConnect: function () {
        setTimeout(function () {
          const publisherOptions = {
            frameRate: 15,
            resolution: "1280x720",
            showControls: true,
            facingMode: "environment",
            fitMode: "contain",
            height: "100%",
            width: "100%",
            mirror: false,
            publishAudio: me.state.demo,
          };
          me.publisherHelper = new Publisher();
          me.publisherHelper
            .publish(publisherOptions, null, true)
            .then(function publishThen(publisher) {
              me.sessionHelper.session.publish(publisher, me.handleError);
              me.publisher = publisher;
            })
            .catch(me.handleError);
        }, 100);
      },
      onIncomingSignal: function (data) {
        me.handleIncomingSignal(data);
      },
    });

I know that the publishAudio can be used to mute but once the publisher stream has started, changing the state variable it's being assigned to doesn't update the publisher property.

Is there any way to update the publisher property once the stream is published or access the mute method/function outside of the video ?

[enricop89]

This is part of your implementation. You can see an example here:

1. Button: https://github.com/enricop89/multiparty-video-react-native/blob/master/App.js#L337
2. Action: https://github.com/enricop89/multiparty-video-react-native/blob/master/App.js#L115

[prabhat13528]

Thank you for the samples and the quick response but I mistakenly posted on the react-native project instead of the node js project. But would the implementation differ for node? Or Should I post it on opentok-node project?

[enricop89]

opentok-node is the server side library which is used to create credentials, tokens, start archiving/broadcast and so on. Why would you implement a mute feature on the server side? Can you explain your use-case?

There is a feature called "mute streams" on the server side (https://tokbox.com/developer/rest/#force_mute_stream) but I don't think it's what you're looking for

[prabhat13528]

Correction: Opentok-react(https://github.com/opentok/opentok-react). I am fairly new to this so got confused.

Update: Your samples did give me an idea to resolve my issue. I was stuck because we use a custom Publisher component instead of directly using the OTPublisher, so changing the properties wasn't affecting the Publisher in my case. So in the previous code, I just had to store the publisher into a state and then I was able to access it with the button action.

this.sessionHelper = createSessionHelper({
      apiKey: session.apiKey,
      sessionId: session.sessionId,
      token: session.token,
      onStreamsUpdated: (streams) => {
        this.setState({ streams });
      },
      onConnect: function () {
        setTimeout(function () {
          const publisherOptions = {
            frameRate: 15,
            resolution: "1280x720",
            showControls: true,
            facingMode: "environment",
            fitMode: "contain",
            height: "100%",
            width: "100%",
            mirror: false,
            publishAudio: me.state.demo,
          };
          me.publisherHelper = new Publisher();
          me.publisherHelper
            .publish(publisherOptions, null, true)
            .then(function publishThen(publisher) {
              me.sessionHelper.session.publish(publisher, me.handleError);
              me.publisher = publisher;
              this.state.pub= publisher;    -----> changed here
            })
            .catch(me.handleError);
        }, 100);
      },
      onIncomingSignal: function (data) {
        me.handleIncomingSignal(data);
      },
    });

 handleMuteButton(){
    let micStatus = this.state.mic;
    let pubObject = this.state.pub;
    pubObject.publishAudio(!micStatus);
    this.setState({mic: !micStatus});    
  }

Using the above pubObject I was able to access all the opentok Publisher methods(PFA).

Thank you again @enricop89 :)