├── .eslintrc.json
├── public
├── favicon.ico
└── vercel.svg
├── postcss.config.js
├── next.config.js
├── pages
├── _app.js
├── api
│ └── hello.js
├── index.js
└── components
│ ├── ScreenShare.js
│ ├── VideoSpaces.js
│ ├── VideoTile.js
│ ├── Login.js
│ ├── RoomControls.js
│ └── Controls.js
│ └── Room.js
├── tailwind.config.js
├── styles
├── globals.css
└── Home.module.css
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Victory-ET/Videome-Complete-Source-code/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 |
3 | function MyApp({ Component, pageProps }) {
4 | return
5 | }
6 |
7 | export default MyApp
8 |
--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default function handler(req, res) {
4 | res.status(200).json({ name: 'John Doe' })
5 | }
6 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: [
3 | "./pages/**/*.{js,ts,jsx,tsx}",
4 | "./components/**/*.{js,ts,jsx,tsx}",
5 | ],
6 | theme: {
7 | extend: {},
8 | },
9 | plugins: [],
10 | }
11 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body {
7 | padding: 0;
8 | margin: 0;
9 | /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
10 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
11 | font-family: monospace;
12 | }
13 |
14 | a {
15 | color: inherit;
16 | text-decoration: none;
17 | }
18 |
19 | * {
20 | box-sizing: border-box;
21 | }
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import styles from "../styles/Home.module.css";
3 | import Login from "./components/Login";
4 | import { HMSRoomProvider } from "@100mslive/react-sdk";
5 |
6 |
7 | export default function Home() {
8 | return (
9 |
10 |
11 |
12 |
Videome
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "videome",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@100mslive/react-sdk": "^0.0.11",
13 | "next": "12.1.5",
14 | "react": "18.0.0",
15 | "react-dom": "18.0.0",
16 | "uuid": "^8.3.2"
17 | },
18 | "devDependencies": {
19 | "autoprefixer": "^10.4.4",
20 | "eslint": "8.13.0",
21 | "eslint-config-next": "12.1.5",
22 | "postcss": "^8.4.12",
23 | "tailwindcss": "^3.0.24"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/components/ScreenShare.js:
--------------------------------------------------------------------------------
1 | import {React, useEffect, useRef} from "react";
2 | import {
3 | useHMSActions,
4 | useHMSStore,
5 | selectScreenShareByPeerID,
6 | } from "@100mslive/react-sdk";
7 |
8 | const ScreenShare = ({peer, isLocal }) => {
9 | const hmsActions = useHMSActions();
10 | const screenRef = useRef(null);
11 | const screenTrack = useHMSStore(selectScreenShareByPeerID(peer.id));
12 |
13 | useEffect(() => {
14 | (async () => {
15 | if (screenRef.current && screenTrack) {
16 | if (screenTrack.enabled) {
17 | await hmsActions.attachVideo(screenTrack.id, screenRef.current);
18 | } else {
19 | await hmsActions.detachVideo(screenTrack.id, screenRef.current);
20 | }
21 | }
22 | })();
23 | }, [screenTrack]);
24 |
25 | return (
26 |
39 |
40 | );
41 |
42 | }
43 |
44 |
45 | export default ScreenShare;
46 |
--------------------------------------------------------------------------------
/pages/components/VideoSpaces.js:
--------------------------------------------------------------------------------
1 | import { React, useEffect, useRef } from "react";
2 | import {
3 | useHMSActions,
4 | useHMSStore,
5 | selectLocalPeer,
6 | selectCameraStreamByPeerID,
7 | } from "@100mslive/react-sdk";
8 |
9 | function VideoSpaces({ peer, islocal }) {
10 | const hmsActions = useHMSActions();
11 | const videoRef = useRef(null);
12 | const videoTrack = useHMSStore(selectCameraStreamByPeerID(peer.id));
13 | useEffect(() => {
14 | (async () => {
15 | if (videoRef.current && videoTrack) {
16 | if (videoTrack.enabled) {
17 | await hmsActions.attachVideo(videoTrack.id, videoRef.current);
18 | } else {
19 | await hmsActions.detachVideo(videoTrack.id, videoRef.current);
20 | }
21 | }
22 | })();
23 | }, [videoTrack]);
24 | return (
25 |
26 |
27 |
36 |
37 | {peer.name}
38 |
39 |
40 |
30 |
40 |
41 | );
42 | }
43 |
44 | export default VideoTile;
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/pages/components/Login.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useEffect } from "react";
2 | import { selectIsConnectedToRoom, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
3 | import Room from "./Room";
4 |
5 | function Login() {
6 |
7 |
8 | const endpoint = "your endpoint";
9 |
10 | const hmsActions = useHMSActions();
11 | const [inputValues, setInputValues] = useState("");
12 | const [selectValues, setSelectValues] = useState("viewer");
13 | const isConnected = useHMSStore(selectIsConnectedToRoom)
14 |
15 |
16 | useEffect(() => {
17 | window.onunload = () => {
18 | hmsActions.leave();
19 | };
20 | }, [hmsActions]);
21 |
22 | const handleInputChange = (e) => {
23 | setInputValues(e.target.value);
24 | };
25 | const handleSelect = (e) => {
26 | setSelectValues(e.target.value);
27 | };
28 |
29 | const handleSubmit = async (e) => {
30 | e.preventDefault();
31 | const fetchtoken = async () => {
32 | const response = await fetch(`${endpoint}api/token`, {
33 | method: "POST",
34 | body: JSON.stringify({
35 | user_id: "1234",
36 | role: selectValues, //stage or viewers
37 | type: "app",
38 | room_id: "your room id",
39 | }),
40 | });
41 | const { token } = await response.json();
42 | return token;
43 | };
44 | const token = await fetchtoken(inputValues)
45 | hmsActions.join({
46 | userName: inputValues,
47 | authToken: token,
48 | settings: {
49 | isAudioMuted: true,
50 | },
51 | });
52 | };
53 |
54 | return (
55 | <>
56 | {!isConnected? (
57 |
58 |
59 |
60 |
67 |
77 |
83 |
84 |
57 |
63 |
69 | {stage ? (
70 | <>
71 |
77 | {permissions.endRoom ? (
78 |
84 | ) : null}
85 |
86 | ) : (
87 | <>
88 |
94 |
95 | )}
96 |
105 |
106 | );
107 | }
108 |
109 | export default Controls;
110 |
--------------------------------------------------------------------------------
/pages/components/Room.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Controls from "./RoomControls.js/Controls";
3 | import {
4 | useHMSActions,
5 | selectHMSMessages,
6 | useHMSStore,
7 | selectLocalPeer,
8 | selectPeers,
9 | } from "@100mslive/react-sdk";
10 |
11 | import VideoTile from "./VideoTile";
12 | import VideoSpaces from "./VideoSpaces";
13 | import ScreenShare from "./ScreenShare";
14 |
15 | function Room() {
16 | const localPeer = useHMSStore(selectLocalPeer);
17 | const stage = localPeer.roleName === "stage";
18 | const viewer = localPeer.roleName === "viewer";
19 | const peers = useHMSStore(selectPeers);
20 | const hmsActions = useHMSActions();
21 | const allMessages = useHMSStore(selectHMSMessages); // get all messages
22 | // hmsActions.sendBroadcastMessage("hello"); // send a message
23 | const [inputValues, setInputValues] = React.useState("");
24 | const [visible, isVisible] = React.useState(false);
25 | const handleInputChange = (e) => {
26 | setInputValues(e.target.value);
27 | };
28 |
29 | const sendMessage = () => {
30 | hmsActions.sendBroadcastMessage(inputValues);
31 | setInputValues("");
32 | };
33 |
34 | const setVisibility =(dat)=>{
35 | isVisible(dat)
36 | }
37 |
38 | return (
39 |
40 |
41 |
42 |
43 | {/* Share screen */}
44 | {stage
45 | ? null
46 | : peers &&
47 | peers
48 | .filter((peer) => !peer.isLocal)
49 | .map((peer) => {
50 | return (
51 | <>
52 |
53 |
54 | );
55 | })}
56 |
57 |
58 |
59 |
60 |
Live
61 |
62 | Live Conference meeting
63 |
64 |
65 | Welcome {localPeer && localPeer.name}
66 |
67 | {/* display users name */}
68 |
69 |
70 | {stage
71 | ? localPeer &&
72 | : peers &&
73 | peers
74 | .filter((peer) => !peer.isLocal)
75 | .map((peer) => {
76 | return (
77 | <>
78 |
79 |
80 | );
81 | })}
82 | {/* Room owner video chat */}
83 |
84 |
86 | {/* Controls */}
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | {/* Chat interface */}
95 |
96 | {allMessages.map((msg) => (
97 |
101 |
102 | {msg.senderName}
103 | {console.log(msg.time)}
104 |
105 | {msg.message}
106 |
107 | ))}
108 |
109 |
110 |
118 |
124 |
125 |
127 | {/* section for attendees videos chat interface */}
128 | {visible ? (
129 |
130 | {localPeer && }
131 | {peers &&
132 | peers
133 | .filter((peer) => !peer.isLocal)
134 | .map((peer) => {
135 | return (
136 | <>
137 |
138 |
139 | );
140 | })}
141 |
142 | ) : null}
143 |