CODEWITHSUNDEEP
javascriptreactjsopentoktokbox
dante
dante

Reputation: 39

OTCore only starts mutliple existing streams instead of 1

Sorry for my english dutch native.

I'm using accelerator-core-js to share my screen and publish it to.

Example can be found here https://github.com/opentok/accelerator-core-js.

Tried to implement it but got lost.

When i open a New stream to be published it will publish 2*existing streams.

To give an impression if i have 2 active streams and open a new 1 it will publish 3 new streams.

I supplied some code.

To give an example enter image description here

Three publish streams are started. At least i think three are started that what i make up from the html.

let otCore;
const otCoreOptions = {
  credentials: {
    apiKey:"" ,
    sessionId: "",
    token: "",
  },
  // A container can either be a query selector or an HTML Element
  streamContainers(pubSub, type, data, streamId) {
    return {
      publisher: {
        camera: '#cameraPublisherContainer',
        screen: '#screenPublisherContainer',
      },
      subscriber: {
        camera: '#cameraSubscriberContainer',
        screen: '#screenSubscriberContainer',
      },
    }[pubSub][type];
  },
  controlsContainer: '#controls',
  packages: ['textChat', 'screenSharing', 'annotation'],
  communication: {
    callProperites: null, // Using default
  },

  screenSharing: {
    extensionID: "lalalalalalal",
    annotation: true,
    externalWindow: false,
    dev: true,
    screenProperties: {
      insertMode: 'append',
      width: '100%',
      height: '100%',
      showControls: false,
      style: {
        buttonDisplayMode: 'off',
      },
      videoSource: 'window',
      fitMode: 'contain' // Using default
    },
  },
  annotation: {
    absoluteParent: {
      publisher: '.App-video-container',
    }
  },
};

....

 render() {
    const { connected, active } = this.state;
    const {
      localAudioClass,
      localVideoClass,
      localCallClass,
      controlClass,
      cameraPublisherClass,
      screenPublisherClass,
      cameraSubscriberClass,
      screenSubscriberClass,
    } = containerClasses(this.state);

    return (
      <div className="App">
        <div className="App-header">
          <h1>OpenTok Accelerator Core</h1>
        </div>
        <div className="App-main">
          <div className="App-video-container">
            { !connected && connectingMask() }
            { connected && !active && startCallMask(this.startCall)}
            <div id="cameraPublisherContainer" className={cameraPublisherClass} />
            <div id="screenPublisherContainer" className={screenPublisherClass} />
            <div id="cameraSubscriberContainer" className={cameraSubscriberClass} />
            <div id="screenSubscriberContainer" className={screenSubscriberClass} />
          </div>
          <div id="controls" className={controlClass}>
            <div className={localAudioClass} onClick={this.toggleLocalAudio} />
            <div className={localVideoClass} onClick={this.toggleLocalVideo} />
            <div className={localCallClass} onClick={this.endCall} />
          </div>
          <div id="chat" className="App-chat-container" />
        </div>
      </div>
    );
  }

Upvotes: 1

Views: 228

Answers (1)

Michael Michael Michael
Michael Michael Michael

Reputation: 159

Not sure if you still need this but it's because of this line : { connected && !active && startCallMask(this.startCall)}

You should start the call in the componentDidMount. Had the exact same problem. Make sure you check if the user is connected first though before calling the startCall handler.

Upvotes: 1

Related Questions