195 |
196 |
197 |
198 | Enable green screen
199 |
200 |
208 |
210 |
211 |
212 | Enable virtual background
213 |
214 |
222 |
223 |
224 | Custom Image
225 |
226 |
227 |
235 | Choose file
236 |
237 |
238 |
239 |
299 |
300 | This is how you will appear in video at bottom right corner
303 |
339 | );
340 | }
341 |
342 | export default forwardRef(VlogVideo);
343 |
--------------------------------------------------------------------------------
/packages/frontend/hooks/pageVisibility.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export default function usePageVisibility() {
4 | const [isVisible, setIsVisible] = useState(true);
5 | useEffect(() => {
6 | let hidden, visibilityChange;
7 | if (typeof document.hidden !== "undefined") {
8 | // Opera 12.10 and Firefox 18 and later support
9 | hidden = "hidden";
10 | visibilityChange = "visibilitychange";
11 | } else if (typeof document.msHidden !== "undefined") {
12 | hidden = "msHidden";
13 | visibilityChange = "msvisibilitychange";
14 | } else if (typeof document.webkitHidden !== "undefined") {
15 | hidden = "webkitHidden";
16 | visibilityChange = "webkitvisibilitychange";
17 | }
18 | const handleVisibilityChange = (e) => {
19 | e.stopPropagation();
20 | if (document[hidden]) {
21 | setIsVisible(false);
22 | } else {
23 | setIsVisible(true);
24 | }
25 | };
26 | window.onblur = (e) => {
27 | setIsVisible(false);
28 | };
29 | window.onfocus = (e) => {
30 | setIsVisible(true);
31 | };
32 | document.addEventListener(visibilityChange, handleVisibilityChange, true);
33 | return () => {
34 | document.removeEventListener(visibilityChange, handleVisibilityChange);
35 | };
36 | }, []);
37 | return isVisible;
38 | }
39 |
--------------------------------------------------------------------------------
/packages/frontend/hooks/socketConnection.js:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import { useEffect, useState } from "react";
3 |
4 | export default function useSocketConnetion(isStarted, userName) {
5 | const [state, setState] = useState({});
6 | const router = useRouter();
7 | useEffect(() => {
8 | if (isStarted) {
9 | const socket = new WebSocket(process.env.NEXT_PUBLIC_WEBSOCKET_URL);
10 | socket.onopen = function () {
11 | const initialData = { type: "connect" };
12 | if (router.query && router.query.roomName) {
13 | initialData.roomId = router.query.roomName;
14 | initialData.userName = userName;
15 | }
16 | socket.send(JSON.stringify(initialData));
17 | };
18 | socket.onmessage = async function (event) {
19 | const { rtcContent, type, ...rest } = JSON.parse(event.data);
20 | switch (rtcContent) {
21 | case "connectSuccess": {
22 | const { roomId, userId } = rest;
23 | setState({
24 | roomId,
25 | userId,
26 | socket,
27 | });
28 | break;
29 | }
30 | }
31 | };
32 | }
33 | }, [isStarted]);
34 | return state;
35 | }
36 |
--------------------------------------------------------------------------------
/packages/frontend/hooks/useGetDevices.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { debug } from "../utils/helpers";
3 |
4 | export default function useGetDevices() {
5 | let defaultDevices = {
6 | audio: [],
7 | video: [],
8 | };
9 | const [devices, setDevices] = useState(defaultDevices);
10 | debug(devices);
11 | useEffect(() => {
12 | (async () => {
13 | if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
14 | return;
15 | }
16 | try {
17 | const cameraPermission = await navigator.permissions.query({ name: "camera" });
18 | const micPermission = await navigator.permissions.query({ name: "microphone" });
19 | debug({ cameraPermission, micPermission });
20 | if (cameraPermission.state !== "granted" || micPermission.state !== "granted") {
21 | const stream = await navigator.mediaDevices.getUserMedia({
22 | video: true,
23 | audio: true,
24 | });
25 | if (!stream) {
26 | return;
27 | }
28 | stream.getVideoTracks().forEach((x) => x.stop());
29 | stream.getAudioTracks().forEach((x) => x.stop());
30 | }
31 | const devices = await navigator.mediaDevices.enumerateDevices();
32 | //toggleLoader()
33 | defaultDevices = devices.reduce((acc, device) => {
34 | if (device.kind === "videoinput") {
35 | acc.video.push(device);
36 | }
37 | if (device.kind === "audioinput") {
38 | acc.audio.push(device);
39 | }
40 | return acc;
41 | }, defaultDevices);
42 | setDevices({ ...defaultDevices });
43 | } catch (err) {
44 | console.error(err);
45 | }
46 | })();
47 | }, []);
48 | return devices;
49 | }
50 |
--------------------------------------------------------------------------------
/packages/frontend/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | target: "serverless",
3 | async redirects() {
4 | return [
5 | {
6 | source: "/vlog",
7 | destination: "/",
8 | permanent: true,
9 | },
10 | ];
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/packages/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@openrtc/frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "description": "Frontend for openrtc",
6 | "scripts": {
7 | "serve": "next start",
8 | "build": "next build",
9 | "start": "npx next dev",
10 | "export": "next export"
11 | },
12 | "dependencies": {
13 | "modern-normalize": "^1.0.0",
14 | "next": "10.0.6",
15 | "nextjs-sitemap-generator": "^1.3.1",
16 | "node-sass": "^5.0.0",
17 | "react": "17.0.1",
18 | "react-dom": "17.0.1",
19 | "react-rhino": "^1.3.0",
20 | "sharp": "^0.28.0",
21 | "vercel": "^21.3.3",
22 | "webrtc-adapter": "^7.7.0",
23 | "@tensorflow-models/body-pix": "^2.2.0",
24 | "@tensorflow/tfjs": "^3.9.0",
25 | "comlink": "^4.3.1"
26 | },
27 | "devDependencies": {
28 | "autoprefixer": "^10.2.4",
29 | "postcss": "^8.2.6",
30 | "tailwindcss": "2.1"
31 | }
32 | }
--------------------------------------------------------------------------------
/packages/frontend/pages/[roomName].jsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import { useRouter } from "next/router";
3 | import { LocalVideo } from "../components/localVideos";
4 | import { RemoteStreams } from "../components/remoteStreams";
5 | import UserDetails from "../components/userDetails";
6 | import { classNames } from "../utils/classNames";
7 | import useSocketConnection from "../hooks/socketConnection";
8 | import { useRhinoState } from "../store/states";
9 | import { text } from "../utils/constants";
10 | import { capitalize } from "../utils/helpers";
11 |
12 | export default function Main() {
13 | const [isStarted, setIsStarted] = useRhinoState("isStarted");
14 | const [userName] = useRhinoState("userName");
15 | const [localStream] = useRhinoState("localStream");
16 | const [shareScreen, setShareScreen] = useRhinoState("shareScreen");
17 | const [roomName] = useRhinoState("roomName");
18 | const { userId: myUserId, socket } = useSocketConnection(isStarted, userName);
19 | const router = useRouter();
20 | const stop = () => {
21 | router.push("/");
22 | setIsStarted(false);
23 | };
24 | const copyToClipboard = () => {
25 | const el = document.createElement("textarea");
26 | el.value = `${process.env.NEXT_PUBLIC_URL}/${roomName}`;
27 | el.classList.add("opacity-0", "h-1", "w-1", "absolute", "top-0", "-z-1");
28 | document.body.appendChild(el);
29 | el.select();
30 | document.execCommand("copy");
31 | document.body.removeChild(el);
32 | };
33 | const PageHead = () => (
34 |
35 |