Google Meet Clone - HTML/Css/Js 및 기타 언어

7141 단어 beginnersjavascriptwebdevprogramming

Google Meet 클론 만들기를 시작하겠습니다.



이 프로젝트는 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>

/클라이언트/공개/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"
}

클라이언트/공개/favicon.ico



//자신의 아이콘을 사용할 수 있습니다.

클라이언트/공개/robots.txt


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

클라이언트/공개/src/test.js



`import { useEffect, useState, useRef } from "react";
"단순 피어"에서 피어 가져오기;
가져오기 "./App.css";
let peer = null;

함수 앱() {
const [incoming, setIncoming] = useState(null);
const [발신, setOutgoing] = useState(null);
const [msg, setMsg] = useState("");
const [stream, setStream] = useState();
const [screenCastStream, setScreenCastStream] = useState();
//const userVideo = useRef();

useEffect(() => {
초기화WebRTC();
}, []);

const initWebRTC = () => {
navigator.media장치
.getUserMedia({
비디오: 참,
오디오: 거짓,
})
.then((스트림) => {
setStream(스트림);
//if (userVideo.current) {
//userVideo.current.srcObject = 스트림;
//}

    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.media장치
.getDisplayMedia({ 커서: 참 })
.then((스크린스트림) => {
피어.replaceTrack(
stream.getVideoTracks()[0],
screenStream.getVideoTracks()[0],
개울
);
setScreenCastStream(스크린스트림);
//userVideo.current.srcObject = screenStream;
screenStream.getTracks()[0].onended = () => {
피어.replaceTrack(
screenStream.getVideoTracks()[0],
stream.getVideoTracks()[0],
개울
);
//userVideo.current.srcObject = 스트림;
};
});
};

const stopScreenShare = () => {
screenCastStream.getVideoTracks().forEach(기능(트랙) {
트랙.스톱();
});
피어.replaceTrack(
screenCastStream.getVideoTracks()[0],
stream.getVideoTracks()[0],
개울
);
};

반품 (



handleChange(e)}/>

제출하다





  <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>
);
}

기본 앱 내보내기;`

/클라이언트/src/App.js



`react-router-dom'에서 가져오기 { BrowserRouter as Router, Switch, Route };
가져오기 "./App.scss";
"./components/HomePage/HomePage"에서 홈페이지 가져오기;
"./components/CallPage/CallPage"에서 CallPage 가져오기;
"./components/NoMatch/NoMatch"에서 NoMatch 가져오기;

함수 앱() {
반품 (













);
}

기본 앱 내보내기;`

/클라이언트/src/App.scss



.초록 {
배경: #00796b !중요;
색상: #fff !중요;
글꼴 두께: 500 !important;
&:호버 {
배경: #00685c !중요;
}
}

Complete Source Code

협력해주셔서 감사합니다
프로덕션에 몰래 들어간 어리석은 버그
./bin/commits-since-last-production-deploy

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage