Scribd
Upload
13 views5 pages

Tutorial2 Collaborative Whiteboard

Uploaded by

anhthon570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views5 pages

Tutorial2 Collaborative Whiteboard

Uploaded by

anhthon570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

TUTORIAL 2 – COLLABORATIVE WHITEBOARD AND MEDIA PLAYER

Here's a step-by-step guide to create a collaborative whiteboard with an embedded video


player using Visual Studio Code on a Windows machine. This solution will utilize HTML,
CSS, JavaScript, and Node.js.

Step 1: Set Up Your Environment

1. Install Node.js: If you haven't already, download and install Node.js from
nodejs.org.
2. Open Visual Studio Code: Launch Visual Studio Code.

Step 2: Create the Project Structure

1. Create a New Folder: Create a new folder for your project, e.g., collaborative-
whiteboard.
2. Open the Folder in VS Code: Open this folder in Visual Studio Code.
3. Initialize a Node.js Project:
a. Open the terminal in VS Code (View > Terminal).
b. Run the following command to initialize your project:
npm init -y

4. Install Required Packages:


a. Run the following command to install Express and WebSocket:

npm install express ws

Step 3: Create the Server

1. Create a server.js file in the root of your project:

const express = require('express');


const WebSocket = require('ws');
const http = require('http');

const app = express();


const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

app.use(express.static('public'));

wss.on('connection', (ws) => {


ws.on('message', (message) => {
// Broadcast the received message to all clients
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});

const PORT = process.env.PORT || 3000;


server.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

Step 4: Create the Frontend

1. Create a public folder in the root of your project.


2. Create an index.html file in the public folder:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Collaborative Whiteboard</title>
<style>
body { display: flex; flex-direction: column; align-items:
center; }
canvas { border: 1px solid black; }
video { margin-top: 20px; width: 640px; height: 360px; }
</style>
</head>
<body>
<canvas id="whiteboard" width="640" height="480"></canvas>
<video id="videoPlayer" controls>
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<script>
const canvas = document.getElementById('whiteboard');
const ctx = canvas.getContext('2d');
const ws = new WebSocket(`ws://${window.location.host}`);

let drawing = false;

canvas.addEventListener('mousedown', (e) => {


drawing = true;
draw(e);
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mouseout', () => drawing = false);

function draw(e) {
if (!drawing) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;

ctx.lineTo(x, y);
ctx.stroke();

const message = { x, y };
ws.send(JSON.stringify(message));
}

ws.onmessage = (event) => {


const { x, y } = JSON.parse(event.data);
ctx.lineTo(x, y);
ctx.stroke();
};

ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
</script>
</body>
</html>

Step 5: Add a Video File

• Place your video file (e.g., your-video-file.mp4) in the public folder. Make sure
to update the <source src="your-video-file.mp4" type="video/mp4"> line
in index.html with the actual filename.

Step 6: Run the Server

1. Start the server:


a. In the terminal, run:

node server.js

2. Access the Application:


a. Open your web browser and go to http://localhost:3000.

Step 7: Test Collaboration

• Open multiple tabs or different browsers to see the collaborative functionality in


action. Any drawing made in one tab will be reflected in all connected tabs.

Additional Features

• Color and Brush Size Options: You can add UI elements to choose different colors
and brush sizes.
• Clear Canvas Button: Implement a button that clears the canvas for all users.
• Persistent Data: Consider saving drawings to a database for persistent sessions.

You might also like