opentok / opentok-react

React components for OpenTok.js
https://www.npmjs.com/package/opentok-react
MIT License
107 stars 105 forks source link

OTPublisher rapid videoSource change errors #79

Open ber8749 opened 5 years ago

ber8749 commented 5 years ago

Hello,

I have stumbled upon a scenario in which the OTPublisher component generates a number of JavaScript console errors as a result of rapidly changing the videoSource property between different devices. The errors I am encountering are detailed below:

I am currently using macOS Mojave v.10.14.6 (18G103) and Chrome Version 76.0.3809.132.

I am currently using both my internal MacBook FaceTime camera and a generic USB camera. It appears as though at least 2 different cameras are necessary to replicate this issue, I was not able to replicate it with a single camera.

You can reproduce this error using the code below. Simply click on the "Cycle Camera" button multiple times in quick succession until you start seeing JavaScript errors in your console:

import React from "react";
import ReactDOM from "react-dom";
import { OTSession, OTPublisher } from "opentok-react";

class App extends React.Component {
  state = {
    audioSource: undefined,
    videoSource: undefined
  };

  getDeviceIds = (kind) => {
    const deviceIds = this.devices
      .filter(device => device.kind === kind)
      .map(device => device.deviceId);
    return deviceIds;
  }

  componentDidMount() {
    window.OT.getDevices((error, devices) => {
      if (error) {
        console.log('getDevices error:', error);
        return;
      }
      this.devices = devices;
      this.audioDeviceIds = this.getDeviceIds('audioInput');
      this.videoDeviceIds = this.getDeviceIds('videoInput');
      this.audioIndex = 0;
      this.videoIndex = 0;
    }); 
  }

  cycleCamera = () => {    
    const videoSource = this.videoDeviceIds[this.videoIndex];
    this.setState({ videoSource });   
    this.videoIndex = this.videoIndex === this.videoDeviceIds.length ? 0 : this.videoIndex + 1; 
  }

  cycleMicrophone = () => {
    const audioSource = this.audioDeviceIds[this.audioIndex];
    this.setState({ audioSource });
    this.audioIndex = this.audioIndex === this.audioDeviceIds.length ? 0 : this.audioIndex + 1;
  }

  render() {
    return (
      <div className="App">
        <h1>OTPublisher Device Test</h1>
        <button
          onClick={ this.cycleCamera }
        >
          Cycle Camera
        </button>
        <button
          onClick={ this.cycleMicrophone }
        >
          Cycle Microphone
        </button>

         <OTSession
           apiKey="valid-api-key" 
           sessionId="valid-session-id" 
           token="valid-session-token"
         >
           <OTPublisher 
            properties={
              {
                audioSource: this.state.audioSource,
                videoSource: this.state.videoSource
              }
            }
           />
         </OTSession>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

OR, simply modify directly on CodeSandbox:

Edit OTPublisher Device Error

I am very interested in know if there is any way I can prevent these errors from happening.

Thank you!

franzus5 commented 4 years ago

@ber8749 Hi! Did you solve this issue?

ber8749 commented 4 years ago

Hello @franzus5,

No, unfortunately I have not yet been able to resolve this issue.

I have created a sample app with the code above to hopefully assist anyone who is interested in helping to resolve this issue:

Edit OTPublisher Device Error

enricop89 commented 4 years ago

This is related to https://github.com/opentok/opentok-react/blob/master/src/OTPublisher.js#L38. 🤔

ttraenkler commented 4 years ago

Related to this code, I've had a similar issue switching between screen sharing and camera on Chrome Windows where the whole browser would freeze. Worked around it by setting maxResolution = {width: 1920, height: 1080} for the screen sharing video source as Tokbox support reported a problem with Chrome Windows hardware acceleration that should be fixed in Chrome 83 when switching off screen sharing. For me limiting the resolution solved the issue even with Chrome 81. This might or might not be related to the issue, but it would probably be worth a try as it seemed to me the issue is related to the browser, not the opentok-react library.

enricop89 commented 4 years ago

@ttraenkler thanks for the comment but the screen sharing freezing issue is not related to this one (it's a Chrome issue).

The issue above is related to the quick sequence calls of destroyPublisher and createPublisher on https://github.com/opentok/opentok-react/blob/master/src/OTPublisher.js#L38

sunilmanipara commented 3 years ago

i got freezing issue in mobile device. i have implemented opentok in ionic 5. please help.