Seeing an unpublish error when a user has shared camera access

[Ganesh-grandy]

I'm seeing the above error when a user has allowed all camera, video and mic access. I was wondering if this was because i did not disconnect. I have a standard implementation of this npm package. Has anyone else experienced this issue?

[enricop89]

hi, can you please share sample code and steps to reproduce it?

[Ganesh-grandy]

`

async componentWillMount() { // alert(window.location.pathname) console.log("willMount")

var str = navigator.userAgent
var patt = new RegExp("CriOS");
var res = patt.test(str);
var ieCheck = navigator.userAgent.match(/(MSIE|Trident)/) !== null

if (window.OT.checkSystemRequirements() == 1 && (!res || ieCheck)) {
  this.setState({ browserSupported: true, browserName: browser.name })
  await this.requestSession()
  console.log('sessionHelper', this.sessionHelper);
} else {
  this.setState({ browserSupported: false, browserName: browser.name })
}

}

componentWillUnmount() { // const { endMeeting } = this.props // if (this.otSession.sessionHelper.session) { this.sessionHelper.disconnect() // endMeeting() // } }

requestSession = async () => { console.log('requestSession') const { accountId, endMeeting } = this.props;

return await request.get(`${BASE_API}/accounts/${accountId}/opentok/video`)
  .set('Content-Type', 'application/json')
  .set('Accept', 'application/json')
  // .set('jwt', localStorage.getItem('jwt'))
  .withCredentials()
  .set('Accept', 'application/json').then(res => {
    if (res.statusCode === 200) {
      const { token, session_id } = JSON.parse(res.text);

     //  try {
        this.sessionHelper = createSession({
          apiKey: apiKey,
          sessionId: session_id,
          token: token,
          onStreamsUpdated: streams => {
            console.log("====>", streams)
            this.setState({ streams })
            this.sessionEventHandlers.sessionConnected()
          }
        });

        console.log('sessionHelper from requestSesssion', this.sessionHelper)

        return this.sessionHelper;
      // } catch (error) {
      //   console.log("========>", error)
      //   alert('We could not connect to your video chat, please try again later')
      //   endMeeting()
      // }
    }
  }).catch(err => {
    alert('We could not connect to your video chat, please try again later')
    endMeeting()
  })

}

renderDefaultView = () => { const { colBreakXs, colBreakMd, colBreakLg, notJoinedText } = this.props; const { connection, subscriberHasJoinedRoom, streams, browserName } = this.state;

console.log("window.OT", window.OT.checkSystemRequirements())
console.log("browser.name", browser, browserName)

console.log("streams", streams.length)
return (
  <Row noGutters>

    {connection !== 'Connected' && this.renderReconnectingLoadingSpinner()}
    <Col xs={colBreakXs} md={colBreakMd} lg={colBreakLg} >
      {/* {(streams.length === 0 || streams.length === 1) && this.checkPermissions() } */}
      {streams.length < 1 && (
        
          <Box
            width={'100%'}
            color={'white'}
            background={styles.colors.grandieDarkGrey}
            fontSize={'50px'}
            display={'flex'}
            flexDirection={'column'}
            // height={'50%'}
            alignItems={'center'}
            minHeight={subscriberHasJoinedRoom ? '100%' : '100%'}
            justifyContent={'center'}
            padding={'20px'}>
            {notJoinedText &&
              <p style={{ fontSize: '20px', margin: '10px auto 5px', justifyContent: 'center', alignItems: 'center' }}>
                {notJoinedText}
              </p>
            }
          </Box>
      )}

      {streams.length > 0 &&
        <Box display={'flex'} height={streams.length > 0 && '100%'} background={'black'} justifyContent={'center'} overflow={'hidden'}>
          <OTSubscriber
            key={streams[0].id}
            session={this.sessionHelper && this.sessionHelper.session}
            stream={streams[0]}
            properties={this.subscriberProperties}
            onSubscribe={this.onSubscribe}
            onError={this.onSubscribeError}
            eventHandlers={this.subscriberEventHandlers} />
        </Box>
      }
    </Col>
    <Col xs={colBreakXs} md={colBreakMd} lg={colBreakLg}>
      <Box display={'flex'} height={'100%'} background={'black'} justifyContent={'center'} overflow={'hidden'}>
        <OTPublisher
          session={this.sessionHelper && this.sessionHelper.session}
          properties={this.publisherProperties}
          onPublish={this.onPublish}
          onError={this.onPublishError}
          eventHandlers={this.publisherEventHandlers} />

      </Box>
    </Col>
  </Row >
)

}

`

@enricop89 Let me know if you need me to post more information/code. The way to reproduce is to get a browser that is running Windows 10 / Chrome v83. The users are sharing all their permissions but they are getting the first error that I posted.

[enricop89]

@Ganesh-grandy it seems like you are unpublishing the stream before it gets connected and published. You might have some rendering condition that is removing the OTPublisher component or something like that.

Are you able to repro on the sample app? https://github.com/opentok/opentok-web-samples/tree/master/React-Basic-Video-Chat