How can I integrate this into an existing app?

[SharonGilmore]

Question I have a pre-existing React app that I'd like to integrate video calling into. The base component for this will be called (so when is rendered within my app, I'd like to see the Pre-Join screen appearing in that space). I'm having trouble getting it to work; I'm just getting a blank screen.

Here's what I have in VideoCall/index.js:

import AppStateProvider, { useAppState } from './state'
import VideoApp from './VideoApp'
import { VideoProvider } from './components/VideoProvider'
import useConnectionOptions from './utils/useConnectionOptions/useConnectionOptions'
import ErrorDialog from './components/ErrorDialog/ErrorDialog'

import '../../../css/scss/videocall.scss'

const WrappedVideoCall = () => {
  const { error, setError } = useAppState()
  const connectionOptions = useConnectionOptions()

  return (
    <VideoProvider
      options={connectionOptions}
      onError={setError}
    >
      <ErrorDialog dismissError={() => setError(null)} error={error} />
      <VideoApp />
    </VideoProvider>
  )
}

const VideoCall = () => (
  <AppStateProvider>
    <WrappedVideoCall />
  </AppStateProvider>
)

export default VideoCall

I've changed the value of the endpoint being connected to in the definition of AppStateProvider, and the endpoint is working when I call it in another app. When I put console logs inside getToken (both when it's assigned to contextValue, and in the standalone function just after that) the logs are never hit, so I guess the function isn't being reached. What can I check next?

[timmydoza]

Hi @SharonGilmore - thanks for the question!

It's difficult to know what could be going wrong. Are you seeing any errors anywhere, either in the terminal or browser console? Also, would it be possible to share a more complete code example?

I tried the approach above, and I got some errors that stemmed from the fact that the context provided by react-router-dom was missing. I found that it seemed to work when the <Router> component was left in (even though the router doesn't necessarily need to be used). It's probably good to keep the <MuiThemeProvider> component in there too, so it also provides the context that is needed by some components.

Would something like this work for you?

import React from 'react';

import { CssBaseline } from '@material-ui/core';
import { MuiThemeProvider } from '@material-ui/core/styles';

import App from './App';
import AppStateProvider, { useAppState } from './state';
import { BrowserRouter as Router } from 'react-router-dom';
import ErrorDialog from './components/ErrorDialog/ErrorDialog';
import theme from './theme';
import './types';
import { ChatProvider } from './components/ChatProvider';
import { VideoProvider } from './components/VideoProvider';
import useConnectionOptions from './utils/useConnectionOptions/useConnectionOptions';
import UnsupportedBrowserWarning from './components/UnsupportedBrowserWarning/UnsupportedBrowserWarning';

const VideoApp = () => {
  const { error, setError } = useAppState();
  const connectionOptions = useConnectionOptions();

  return (
    <VideoProvider options={connectionOptions} onError={setError}>
      <ErrorDialog dismissError={() => setError(null)} error={error} />
      <ChatProvider>
        <App />
      </ChatProvider>
    </VideoProvider>
  );
};

const VideoCall = () => (
  <MuiThemeProvider theme={theme}>
    <CssBaseline />
    <UnsupportedBrowserWarning>
      <Router>
        <AppStateProvider>
          <VideoApp />
        </AppStateProvider>
      </Router>
    </UnsupportedBrowserWarning>
  </MuiThemeProvider>
);

export default VideoCall;

[timmydoza]

Closing due to inactivity. Please let me know if you have any other questions and we can reopen the issue. Thanks!