CODEWITHSUNDEEP
javascripthtmlreactjs
Miltosh
Miltosh

Reputation: 91

How to connect a script to a ReactJS component?

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

Upvotes: 0

Views: 128

Answers (1)

Amit Gaikwad
Amit Gaikwad

Reputation: 516

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.

Upvotes: 1

Related Questions