Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suhani1209/digi-canvas
Online collaborative whiteboard to get things done together, where one can create the drawing room and invite people just on the click of a link and collaboratively draw in real time.
https://github.com/suhani1209/digi-canvas
chat-application chatrooms css drawing drawing-rooms ejs ejs-templates node-js
Last synced: 1 day ago
JSON representation
Online collaborative whiteboard to get things done together, where one can create the drawing room and invite people just on the click of a link and collaboratively draw in real time.
- Host: GitHub
- URL: https://github.com/suhani1209/digi-canvas
- Owner: suhani1209
- Created: 2021-10-04T04:59:10.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-04T05:06:37.000Z (about 3 years ago)
- Last Synced: 2024-11-06T07:05:46.911Z (about 2 months ago)
- Topics: chat-application, chatrooms, css, drawing, drawing-rooms, ejs, ejs-templates, node-js
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Node JS Collaborative Drawing Tool
## Usage
```
npm install
npm start
Go to localhost:3030
```
## Tutorial
# to make server with express
```js
npm install express
const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`Server started on port ${PORT}`));
```
# include ejs
```js
npm install ejs
app.set('view engine', 'ejs');
```
# include static folder
app.use(express.static('public'))
as a user connects we want to generate a random id and redirect user to that new url
**generate random ids**
```js
const {v4:uuidv4} = require('uuid');
app.get('/',(req,res)=>{
res.redirect(`/${uuidv4()}`);
})
app.get('/:room',(req,res)=>{
res.render('room',{roomId:req.params.room})
})
```
# adding my video
```js
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)
}
```
```js
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
```
# include socket.io in your project
first of all user will connect and peer id will be generated and send a join-room event to the server along with roomid and userid. The server will receive this event and broadcast to other users that this user has join in this room with this user id. when user will disconnect it will send a disconnect event from script.js to the server and server will receive this event and broadcast to others.
inside server file
# making a peer js server
in roome.js include script files
in server.js
```js
npm install peer
const { ExpressPeerServer } = require('peer');
const peerServer = ExpressPeerServer(server, {
debug: true
});
app.use('/peerjs', peerServer);
```
in script.js
```js
const myPeer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '443'
})
const peers = {}
myPeer.on('open', id => {
//just as peer generates the id socket should tell the server join-room with this RIoom id and peerid
socket.emit('join-room', ROOM_ID, id)
})
```
# socket.io
```js
npm install socket.io
const server= require('http').Server(app);
const io= require('socket.io')(server);
io.on('connection',socket=>{
socket.on('join-room',(roomId)=>{
socket.join(roomId);
//broadcast to other that this user has joined
socket.to(roomId).broadcast.emit('user-connected', userId);
}
}
```
# media calls
when the other person connects it will make a peer call to me ans send his stream. I have to add his video to the video grid and ans to his call and send my stream which the other person will get and add to his videogrid
```js
let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true;
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)
//just as other user connects, server tells the client
socket.on('user-connected', userId => {
//new user is making call
connectToNewUser(userId, stream)
})
// answering the call send by the other user
myPeer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})
});
```
```js
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
call.on('close', () => {
video.remove()
})
peers[userId] = call
}
```