Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 24, 2022 06:27 am GMT

Google Meet Clone - HTML/Css/Js and other languages

Let's Start Making Our Google Meet Clone

This project was created with create React App

/client/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

/client/public/manifest.json

{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

client/public/favicon.ico

// You can use your own icon

client/public/robots.txt

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

client/public/src/test.js

`import { useEffect, useState, useRef } from "react";
import Peer from "simple-peer";
import "./App.css";
let peer = null;

function App() {
const [incoming, setIncoming] = useState(null);
const [outgoing, setOutgoing] = useState(null);
const [msg, setMsg] = useState("");
const [stream, setStream] = useState();
const [screenCastStream, setScreenCastStream] = useState();
// const userVideo = useRef();

useEffect(() => {
initWebRTC();
}, []);

const initWebRTC = () => {
navigator.mediaDevices
.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
setStream(stream);
// if (userVideo.current) {
// userVideo.current.srcObject = stream;
// }

    peer = new Peer({      initiator: window.location.hash === "#admin",      trickle: false,      stream: stream,    });    peer.on("signal", (data) => {      console.log(data);      // when peer has signaling data, give it to peer2 somehow      // peer2.signal(data)      setOutgoing(data);    });    peer.on("connect", () => {      // wait for 'connect' event before using the data channel      // peer.send('hey peer2, how is it going?')    });    peer.on("data", (data) => {      // got a data channel message      console.log("got a message from peer2: " + data);    });    peer.on("stream", (stream) => {      console.log("stream **** ", stream);      // got remote video stream, now let's show it in a video tag      var video = document.querySelector("video");      if ("srcObject" in video) {        video.srcObject = stream;      } else {        video.src = window.URL.createObjectURL(stream); // for older browsers      }      video.play();    });  })  .catch(() => {});

};

const handleChange = (e) => {
console.log(e.target.value);
setIncoming(e.target.value);
};

const handleSubmit = () => {
peer.signal(JSON.parse(incoming));
};

const handleChangeMsg = (e) => {
setMsg(e.target.value);
};

const sendMsg = () => {
peer.send(${msg});
};

const screenShare = () => {
navigator.mediaDevices
.getDisplayMedia({ cursor: true })
.then((screenStream) => {
peer.replaceTrack(
stream.getVideoTracks()[0],
screenStream.getVideoTracks()[0],
stream
);
setScreenCastStream(screenStream);
// userVideo.current.srcObject = screenStream;
screenStream.getTracks()[0].onended = () => {
peer.replaceTrack(
screenStream.getVideoTracks()[0],
stream.getVideoTracks()[0],
stream
);
// userVideo.current.srcObject = stream;
};
});
};

const stopScreenShare = () => {
screenCastStream.getVideoTracks().forEach(function (track) {
track.stop();
});
peer.replaceTrack(
screenCastStream.getVideoTracks()[0],
stream.getVideoTracks()[0],
stream
);
};

return (



handleChange(e)} />


Submit








  <br />  <br />  <br />  <br />  <br />  <input value={msg} onChange={(e) => handleChangeMsg(e)} />  <button onClick={sendMsg}>Send</button>  <button onClick={screenShare}>Share</button>  <button onClick={stopScreenShare}>Stop Share</button></div>

);
}

export default App;`

/client/src/App.js

`import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.scss";
import HomePage from "./components/HomePage/HomePage";
import CallPage from "./components/CallPage/CallPage";
import NoMatch from "./components/NoMatch/NoMatch";

function App() {
return (













);
}

export default App;`

/client/src/App.scss

.green {
background: #00796b !important;
color: #fff !important;
font-weight: 500 !important;
&:hover {
background: #00685c !important;
}
}

Complete Source Code

Thank You for your colaboration Akshit


Original Link: https://dev.to/kavyargb/google-meet-clone-htmlcssjs-and-other-languages-1a8j

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To