title: I am trying to create a zoom clone website but two problems I can't fix the live video (means: camera video) not appearing on the website,
body: <p>I am trying to create a zoom clone website but two problems I can't fix the live video (means: camera video) not appearing on the website, and the second problem is the error showing like</p>
  <pre><code>Uncaught ReferenceError: io is not defined
      at script.js:3:18
  (anonymous) @ script.js:3 
  </code></pre>
  <p><em><strong>server.js</strong></em></p>
  <pre><code>const express = require('express');
  const { join } = require('path');
  const app = express();
  const server = require('http').Server(app);
  const io = require('socket.io')(server)
  const {v4: uuidv4}= require('uuid'); 
  
  
  app.set('view engine','ejs');
  app.use(express.static('public')) ;
  
  const PORT = process.env.PORT|| 3000;
  
  
  
  app.get('/',(req,res)=&gt;{
       res.redirect(`/${uuidv4()}`);
  })
  
  app.get('/:room',(req,res)=&gt;{
      res.render('room',{roomId: req.params.room})
  })
  
  io.on('connection',(socket)=&gt;{
      socket.on ('join-room',()=&gt;{
          console.log(&quot;join-room&quot;);
      })
  })
  
  // server.listen(3000);
  app.listen(PORT,()=&gt;{
      console .log(`server is connected to port ${(PORT)}.`);
  })  
  </code></pre>
  <p><em><strong>room.ejs</strong></em></p>
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;Face to Face&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
          &lt;script src=&quot;/socket.io/socket.io.js&quot;&gt;&lt;/script&gt;
          
          &lt;script&gt; 
          const ROOM_ID =&quot;&lt;%= roomId %&gt;&quot;
          console.log(&quot;&lt;%= roomId %&gt;&quot;); 
          &lt;/script&gt;
          
         
          &lt;/head&gt;
      &lt;body&gt;
          
       &lt;div id =&quot;Video-grid&quot;&gt;
       &lt;/div&gt;
       &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;
  </code></pre>
  <blockquote>
  <blockquote>
  <blockquote>
  <p>here, the error getting  io is not defined
  <em><strong>script.js</strong></em></p>
  </blockquote>
  </blockquote>
  </blockquote>
  <pre><code>const socket = io('/');
  
  const VideoGrid = document.getElementById('Video-grid');
  //  console.log(VideoGrid)
  const myVideo = document.createElement('video');
  myVideo.muted = true; 
  let myVideoStream
  navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
  }).then(stream =&gt;{
    myVideoStream = stream;
    addVideoStream(myVideo,stream);
  
  })
  socket.emit('join-room');
  
  const addVideoStream = (video, stream)=&gt;{
      video.srcObject = stream;
      video.addEventListener('loademetadata',()=&gt;{
          video.play();
      })
      VideoGrid.append(video) 
  }
  </code></pre>
  <p>the video is not appearing on the website. but notification is coming (like permission to on the camera and audio) how to fix this.</p>