title: how to give access to include camera in two or more html pages in react nodejs?
body: <p>I am developing a website for online shopping using gesture recognition. For this i add 5 products. And each product act as link to redirect to its subpage(ex. 5 products are sunglass, chair, shoe, cap, watch. If I click one product(chair) it open other HTML page and it shows five images of chair. Like this i made for all the five products. ). The HTML page names are index.html, index1.html, index2.html, index3.html, index4.html, index5.html.These are located in public folder. In this website the home page is index.html. And the problem is <strong>If i opened this web in localhost the camera is accessed in the home page(index.html). And if i redirect to the sub page by click any of the 5 product the camera is not accessed. I don't know where to correct the code. Because I am new for web developing.</strong></p>
  <p>Here is the image of the product and it acts as a link to redirect to the subpage
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="./index1.html"&gt; &lt;img src="assets/prdt1.jfif" alt="product1"&gt;&lt;/a&gt;
  &lt;a href="./index2.html"&gt;&lt;img src="assets/prdt2.jfif" alt="product2"&gt;&lt;/a&gt;
  &lt;a href="./index3.html"&gt;&lt;img src="assets/prdt3.jfif" alt="product3"&gt;&lt;/a&gt;
  &lt;a href="./index4.html"&gt;&lt;img src="assets/prdt4.jfif" alt="product4"&gt;&lt;/a&gt;
  &lt;a href="./index5.html"&gt;&lt;img src="assets/prdt5.jfif" alt="product5"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the code for redirecting to new window</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
        function redirect()
        {
        var url = "./index1.html";
        window.location.href=url;
        }
        function redirect1()
        {
        var url = "./index2.html";
        window.location.href=url;
        }
        function redirect2()
        {
        var url = "./index3.html";
        window.location.href=url;
        }function redirect3()
        {
        var url = "./index4.html";
        window.location.href=url;
        }
        function redirect4()
        {
        var url = "./index5.html";
        window.location.href=url;
        }
        &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here it is the code for main html page index.html(above 2 snippets are taken from the below code)
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;meta name="theme-color" content="#000000" /&gt;
      &lt;meta
        name="description"
        content="Web site created using create-react-app"
        /&gt;
      &lt;link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /&gt;
      &lt;!--
        manifest.json provides metadata used when your web app is installed on a
        user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      --&gt;
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json" /&gt;
      &lt;!--
        Notice the use of %PUBLIC_URL% in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
  
        Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      --&gt;
      &lt;title&gt;3D Model Website&lt;/title&gt;
    &lt;/head&gt;
    &lt;style&gt;
      img {
        
        border:0;
        padding: 0px;
        width: 200px;
      }
      button {
          border: none;
          padding: 0;
          background: none;
      }
      &lt;/style&gt;
    &lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
    &lt;!--
        in this div class camera is placed
      --&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    
      &lt;script type="text/javascript"&gt;
        function redirect()
        {
        var url = "./index1.html";
        window.location.href=url;
        }
        function redirect1()
        {
        var url = "./index2.html";
        window.location.href=url;
        }
        function redirect2()
        {
        var url = "./index3.html";
        window.location.href=url;
        }function redirect3()
        {
        var url = "./index4.html";
        window.location.href=url;
        }
        function redirect4()
        {
        var url = "./index5.html";
        window.location.href=url;
        }
        &lt;/script&gt;
    &lt;div id="container"&gt;
        &lt;div id="navbar"&gt;
            &lt;div id="logo"&gt;
                &lt;img src="assets/logo.png" alt=""&gt;
            &lt;/div&gt;
            &lt;ul&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Trending&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;My cart&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Wishlist&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="content"&gt;
            &lt;h2&gt;3D MODEL ONLINE SHOPPING&lt;/h2&gt;
            &lt;p&gt;This website contains 3D model of the every product&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="icons"&gt;
            &lt;div id="iconsLogo"&gt;
                &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;
                &lt;i class="fab fa-instagram"&gt;&lt;/i&gt;
                &lt;i class="fab fa-youtube"&gt;&lt;/i&gt;
                &lt;i class="fab fa-twitter"&gt;&lt;/i&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="home2"&gt;
            &lt;div id="image"&gt;
              
                &lt;a href="./index1.html"&gt; &lt;img src="assets/prdt1.jfif" alt="product1"&gt;&lt;/a&gt;
                 &lt;a href="./index2.html"&gt;&lt;img src="assets/prdt2.jfif" alt="product2"&gt;&lt;/a&gt;
                 &lt;a href="./index3.html"&gt;&lt;img src="assets/prdt3.jfif" alt="product3"&gt;&lt;/a&gt;
                 &lt;a href="./index4.html"&gt;&lt;img src="assets/prdt4.jfif" alt="product4"&gt;&lt;/a&gt;
                 &lt;a href="./index5.html"&gt;&lt;img src="assets/prdt5.jfif" alt="product5"&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/ZRldk.png" rel="nofollow noreferrer">Here you can see the files in my web</a></p>
  <p>In this, app.js is the file contains the code for accessing camera.</p>
  <p>If i run this code only index.html can access the camera. how to set all the subpages to access the camera.</p>
  <p>I think this is the code for access the app.js from index.html</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;meta name="theme-color" content="#000000" /&gt;
      &lt;meta
        name="description"
        content="Web site created using create-react-app"
        /&gt;
      &lt;link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /&gt;
      &lt;!--
        manifest.json provides metadata used when your web app is installed on a
        user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      --&gt;
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json" /&gt;
      &lt;!--
        Notice the use of %PUBLIC_URL% in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
  
        Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      --&gt;
      &lt;title&gt;3D Model Website&lt;/title&gt;
    &lt;/head&gt;</code></pre>
  </div>
  </div>
  </p>
  <pre><code>But if I copy paste this in all other html page it shows error and doesn't woke the camera.
  </code></pre>
  <p>What do i do?☹☹☹</p>
  <p><a href="https://i.stack.imgur.com/w4kex.png" rel="nofollow noreferrer">picture1</a>
  <a href="https://i.stack.imgur.com/nijgj.png" rel="nofollow noreferrer">picture2</a></p>
  <p>The above two pictures are index.html</p>
  <p>Now i redirect to index1.html by clicking the shoe image camera is not accessed.</p>
  <p><a href="https://i.stack.imgur.com/L7BlA.png" rel="nofollow noreferrer">picture3</a></p>