generated from CS3219-AY2324S1/course-assessment-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #154 from CS3219-AY2324S1/implement-video
Implement video
- Loading branch information
Showing
13 changed files
with
1,350 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -80,4 +80,3 @@ jobs: | |
| run: | | ||
| git push -f origin HEAD:production | ||
| working-directory: . | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,212 @@ | ||
| import React, { useEffect, useRef, useState } from "react"; | ||
| import { Peer } from "peerjs"; | ||
| import { io } from "socket.io-client"; | ||
| import { useSearchParams } from "react-router-dom"; | ||
|
|
||
|
|
||
| const addVideoStream = (video, stream) => { | ||
| video.srcObject = stream; | ||
| video.addEventListener('loadedmetadata', () => { | ||
| video.play(); | ||
| }); | ||
| } | ||
|
|
||
| const VideoChat = () => { | ||
|
|
||
| const [searchParams] = useSearchParams(); | ||
|
|
||
| const [peer, setPeer] = useState(null); | ||
| const [peerId, setPeerId] = useState(null); | ||
| const [socket, setSocket] = useState(null); | ||
| const [roomId, setRoomId] = useState(searchParams.get("roomId")); | ||
| const [videos, setVideos] = useState([]); | ||
|
|
||
| const videoGridRef = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
|
|
||
| const peer = new Peer(); | ||
| peer.on("open", (id) => { | ||
| console.log('My peer ID is: ' + id); | ||
| setPeerId(id); | ||
| }); | ||
| setPeer(peer); | ||
| setSocket(io(`${process.env.REACT_APP_VIDEO_SERVICE_HOST}`)) | ||
| }, []); | ||
|
|
||
| // useEffect(() => { | ||
| // if (!socket) return; | ||
| // socket.on("able-to-join-server-now", () => { | ||
| // socket.emit("join-server", { | ||
| // peerId: peerId, | ||
| // roomId: roomId | ||
| // }); | ||
| // console.log(`User ${peerId} is attemping to join video-server.`); | ||
| // // if (!socket || !peer || !peerId) return; | ||
|
|
||
| // const userVideo = document.createElement("video"); | ||
| // userVideo.muted = true; | ||
| // const matchedUserVideo = document.createElement("video"); | ||
|
|
||
| // const startMediaDevices = async () => { | ||
| // try { | ||
| // const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); | ||
| // console.log("hi") | ||
| // addVideoStream(userVideo, stream); | ||
| // setVideos([userVideo]); | ||
|
|
||
| // peer.on('call', (call) => { | ||
| // call.answer(stream); | ||
|
|
||
| // call.on('stream', (matchedUserVideoStream) => { | ||
|
|
||
| // addVideoStream(matchedUserVideo, matchedUserVideoStream); | ||
| // setVideos([userVideo, matchedUserVideo]); | ||
| // }); | ||
|
|
||
| // call.on('close', () => { | ||
| // matchedUserVideo.remove(); | ||
| // setVideos([userVideo]); | ||
| // }) | ||
| // }); | ||
|
|
||
| // socket.on("user-connected", (userId) => { | ||
| // console.log(`User ${userId} has joined the room ${roomId}.`); | ||
| // const call = peer.call(userId, stream); | ||
|
|
||
| // call.on('stream', (matchedUserVideoStream) => { | ||
| // addVideoStream(matchedUserVideo, matchedUserVideoStream); | ||
| // setVideos([userVideo, matchedUserVideo]); | ||
| // }); | ||
|
|
||
| // call.on('close', () => { | ||
| // matchedUserVideo.remove(); | ||
| // setVideos([userVideo]); | ||
|
|
||
| // }) | ||
| // }); | ||
|
|
||
|
|
||
| // socket.on("able-to-leave-server-now", () => { | ||
| // if (!peer) return; | ||
| // peer.close(); | ||
| // setVideos([]); | ||
| // console.log(`User ${peerId} is attemping to leave video-server.`) | ||
| // socket.emit("user-disconnected", peerId, roomId); | ||
| // }) | ||
| // // socket.on("user-disconnected", (userId) => { | ||
|
|
||
| // // }) | ||
|
|
||
|
|
||
|
|
||
|
|
||
| // } catch (error) { | ||
| // console.error('Error accessing media devices.', error); | ||
| // } | ||
| // }; | ||
|
|
||
| // startMediaDevices(); | ||
|
|
||
| // }) | ||
| // }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (!socket || !peer || !peerId) return; | ||
|
|
||
| const userVideo = document.createElement("video"); | ||
| userVideo.muted = true; | ||
| const matchedUserVideo = document.createElement("video"); | ||
|
|
||
| const startMediaDevices = async () => { | ||
| try { | ||
| const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); | ||
| addVideoStream(userVideo, stream); | ||
| setVideos([userVideo]); | ||
| console.log("user video has been set up"); | ||
| peer.on('call', (call) => { | ||
| call.answer(stream); | ||
|
|
||
| call.on('stream', (matchedUserVideoStream) => { | ||
|
|
||
| addVideoStream(matchedUserVideo, matchedUserVideoStream); | ||
| setVideos([userVideo, matchedUserVideo]); | ||
| console.log("matchedUser video has been set up"); | ||
| }); | ||
|
|
||
| call.on('close', () => { | ||
| matchedUserVideo.remove(); | ||
| setVideos([userVideo]); | ||
| }) | ||
| }); | ||
|
|
||
| socket.on("user-connected", (userId) => { | ||
| console.log(`User ${userId} has joined the room ${roomId}.`); | ||
| const call = peer.call(userId, stream); | ||
|
|
||
| call.on('stream', (matchedUserVideoStream) => { | ||
| addVideoStream(matchedUserVideo, matchedUserVideoStream); | ||
| setVideos([userVideo, matchedUserVideo]); | ||
| console.log(`User and matched user videos are up`); | ||
| }); | ||
|
|
||
| call.on('close', () => { | ||
| matchedUserVideo.remove(); | ||
| setVideos([userVideo]); | ||
|
|
||
| }) | ||
|
|
||
| }); | ||
|
|
||
|
|
||
| // socket.on("able-to-leave-server-now", () => { | ||
| // if (!peer) return; | ||
| // peer.close(); | ||
| // setVideos([]); | ||
| // console.log(`User ${peerId} is attemping to leave video-server.`) | ||
| // socket.emit("user-disconnected", peerId, roomId); | ||
| // }) | ||
|
|
||
|
|
||
| socket.emit("join-server", { | ||
| peerId: peerId, | ||
| roomId: roomId | ||
| }); | ||
| console.log(`User ${peerId} is attemping to join video-server.`); | ||
|
|
||
|
|
||
| } catch (error) { | ||
| console.error('Error accessing media devices.', error); | ||
| } | ||
| }; | ||
|
|
||
| startMediaDevices(); | ||
|
|
||
|
|
||
|
|
||
| // socket.on('user-disconnected', (userId) => { | ||
| // if (peers[userId]) { | ||
| // peers[userId].close(); | ||
| // } | ||
| // }); | ||
|
|
||
|
|
||
| }, [socket, peer ]); | ||
|
|
||
| useEffect(() => { | ||
| if (videoGridRef.current == null) return; | ||
|
|
||
| videos.map((video) => { | ||
| video.style.width = '300px' | ||
| video.style.height = '300px' | ||
| video.style.margin = '10px' | ||
| videoGridRef.current.appendChild(video); | ||
| return video; | ||
| }); | ||
| }, [videos]); | ||
|
|
||
| return <div id="videos" ref={videoGridRef}></div>; | ||
|
|
||
| }; | ||
|
|
||
| export default VideoChat; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| const express = require('express') | ||
| 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')) | ||
|
|
||
| app.get('/', (req, res) => { | ||
| res.redirect(`/${uuidV4()}`) | ||
| }) | ||
|
|
||
| app.get('/:room', (req, res) => { | ||
| res.render('room', { roomId: req.params.room }) | ||
| }) | ||
| server.listen(3000) |
Oops, something went wrong.