How to connect a script to a ReactJS component?

Question

I have a functional ReactJS component with video. This video should interact with the scripts, but I can only include this script in index.html, which, as far as I understand, is not correct. How can I integrate these scripts connection into react component (App.js)?

My index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>React App</title>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script>
    // some script code..
  </script>
  <script>
    window.onload = websocketServerConnect;
  </script>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

My App.js

function App() {
  return (
    <div>
      <div>
        <video id="stream" autoPlay playsInline>Your browser doesn't support video</video>
      </div>
      <div>
        Status: <span id="status">unknown</span>
      </div>
      <br />

      <div>Our id is <b id="peer-id">unknown</b></div>
      <br />
      <div>
        <div>getUserMedia constraints being used:</div>
      </div>
    </div>
  );
}

export default App;

If i'm just paste script code from html to app.js, i got errors

Link to Sandbox

Amit Gaikwad · Accepted Answer · 2021-01-20 15:33:42Z

1

You can use npm package of adapter.js . and import in app.jsx file. then there is no need of importing in index.html file.

answered Jan 20, 2021 at 15:33

Amit Gaikwad

5164 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to connect a script to a ReactJS component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related