aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - update whiteboard using fabric.js

Browse Source
This commit is contained in:
Miroslav Pejic
2021-10-09 10:34:38 +02:00
parent 59665d0ad5
commit 15a01c7bcd
7 changed files with 630 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -43,7 +43,7 @@ Open the app with the following **supported browsers** & many more...
- Ability to set video quality up to 4K and adapt the FPS
- Recording your Screen, Audio and Video
- Chat with Emoji Picker & Private messages & Save the conversations
- Simple collaborative whiteboard for the teachers
- Advance collaborative whiteboard for the teachers
- Share any YouTube video in real time
- Start a tetris game in waiting your participants :)
- Full Screen Mode on mouse click on the Video element
@@ -145,7 +145,7 @@ Many Thanks to:
- ianramzy (html [template](https://cruip.com/demos/neon/))
- vasanthv (webrtc)
- Sajad (chat)
- i-aryan (whiteboard)
- fabric.js (whiteboard)
- fmeringdal (rest api)
From where I took inspiration for this project. ❤️
app/src/server.js
+8 -2
View File
@@ -664,9 +664,15 @@ io.sockets.on('connect', (socket) => {
/**
* Whiteboard actions for all user in the same room
*/
socket.on('wb', (config) => {
socket.on('wbCanvasToJson', (config) => {
let room_id = config.room_id;
sendToRoom(room_id, socket.id, 'wb', config);
sendToRoom(room_id, socket.id, 'wbCanvasToJson', config);
});
socket.on('whiteboardAction', (config) => {
log.debug('Whiteboard', config);
let room_id = config.room_id;
sendToRoom(room_id, socket.id, 'whiteboardAction', config);
});
}); // end [sockets.on-connect]
public/css/client.css
+1
View File
@@ -51,6 +51,7 @@
/* whiteboard resize */
--wb-width: 800px;
--wb-height: 600px;
--wb-bg: linear-gradient(to left, #1f1e1e, #000000);
/* my settings */
--mySettings-select-w: 100%;
public/css/whiteboard.css
+48 -171
View File
@@ -1,9 +1,17 @@
.whiteboard-cont {
/*--------------------------------------------------------------
# Whiteboard
--------------------------------------------------------------*/
#whiteboard {
z-index: 14;
display: none;
position: fixed;
margin: auto;
padding: 10px;
width: var(--wb-width);
height: var(--wb-height);
position: absolute;
background: var(--wb-bg);
border-radius: 10px;
box-shadow: var(--box-shadow);
/* center */
top: 50%;
left: 50%;
@@ -18,216 +26,85 @@
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
overflow: none;
box-shadow: var(--box-shadow);
border-radius: 5px;
overflow: hidden;
}
.whiteboard-cont #whiteboard {
background-color: var(--wb-bg);
border-radius: 5px;
cursor: crosshair;
}
.whiteboard-cont .colors-cont {
position: absolute;
.whiteboard-header {
display: flex;
left: 0px;
top: 0px;
width: 100%;
background: var(--wb-hbg);
justify-content: space-between;
background: rgb(0, 0, 0);
border-radius: 10px;
color: white;
cursor: move;
border-radius: 5px;
}
.whiteboard-cont .colors-cont .white {
height: 30px;
#whiteboard button {
width: 30px;
border-radius: 50px;
background-color: #ffffff;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .white:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .red {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #e74c3c;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .red:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .yellow {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #f1c40f;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .yellow:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .green {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #badc58;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .green:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .orange {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #e67e22;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .orange:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .purple {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #9b59b6;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .purple:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .blue {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #3498db;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .blue:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .pink {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #fd79a8;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .pink:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .brown {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #834c32;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .brown:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont .colors-cont .grey {
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #afadad;
margin-top: 10px;
margin-left: 10px;
}
.whiteboard-cont .colors-cont .grey:hover {
cursor: pointer;
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
.whiteboard-cont button {
height: 30px;
width: 30px;
font-size: 1.2rem;
margin-top: 10px;
margin-left: 10px;
height: 40px;
border: none;
color: white;
background: transparent;
}
.whiteboard-cont button:hover {
color: rgb(0, 180, 50);
#whiteboard button:hover {
color: var(--hover-color);
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
#whiteboardColorPicker {
.whiteboardColorPicker {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
width: 30px;
height: 30px;
width: 20px;
height: 20px;
margin-top: 10px;
margin-left: 10px;
margin-right: 15px;
border-radius: 50px;
border: solid 0.5px #afadad38;
}
#whiteboardColorPicker:hover {
.whiteboardColorPicker:hover {
transform: var(--btns-hover-scale);
transition: all 0.3s ease-in-out;
}
#whiteboardColorPicker::-webkit-color-swatch {
.whiteboardColorPicker::-webkit-color-swatch {
border: none;
border-radius: 50px;
border-radius: 20px;
padding: 0;
}
#whiteboardColorPicker::-webkit-color-swatch-wrapper {
.whiteboardColorPicker::-webkit-color-swatch-wrapper {
border: none;
border-radius: 50px;
border-radius: 20px;
padding: 0;
}
#whiteboardColorPicker::-moz-color-swatch {
.whiteboardColorPicker::-moz-color-swatch {
border: none;
border-radius: 50px;
border-radius: 20px;
padding: 0;
}
#whiteboardColorPicker::-moz-color-swatch-wrapper {
.whiteboardColorPicker::-moz-color-swatch-wrapper {
border: none;
border-radius: 50px;
border-radius: 20px;
padding: 0;
}
#whiteboardColorPicker::color-swatch {
.whiteboardColorPicker::color-swatch {
border: none;
border-radius: 50px;
border-radius: 20px;
padding: 0;
}
#whiteboardColorPicker::color-swatch-wrapper {
.whiteboardColorPicker::color-swatch-wrapper {
border: none;
border-radius: 50px;
border-radius: 20px;
padding: 0;
}
.hidden {
display: none;
}
.show {
display: block;
}
public/js/client.js
+540 -325
View File
File diff suppressed because it is too large Load Diff
public/view/client.html
+29 -25
View File
@@ -355,32 +355,35 @@ access to use this app.
<!-- Start whiteboard -->
<div class="whiteboard-cont">
<div class="colors-cont">
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
<button id="whiteboardFsBtn" class="fas fa-expand-alt"></button>
<div>
<input type="color" id="whiteboardColorPicker" onchange="setColor(value)" />
<section id="whiteboard" class="hidden">
<header id="whiteboardHeader" class="whiteboard-header">
<div id="whiteboardTitle" class="whiteboard-header-title"></div>
<div class="whiteboard-header-options">
<!-- <input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" /> -->
pencil
<input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
background
<input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
<button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
<button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
<button id="whiteboardUndoBtn" class="fas fa-undo"></button>
<button id="whiteboardRedoBtn" class="fas fa-redo"></button>
<button id="whiteboardImgFileBtn" class="far fa-image"></button>
<button id="whiteboardImgUrlBtn" class="fas fa-link"></button>
<button id="whiteboardTextBtn" class="fas fa-spell-check"></button>
<button id="whiteboardLineBtn" class="fas fa-slash"></button>
<button id="whiteboardRectBtn" class="far fa-square"></button>
<button id="whiteboardCircleBtn" class="far fa-circle"></button>
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
<button id="whiteboardCleanBtn" class="fas fa-trash"></button>
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
</div>
<br />
<div class="white" onclick="setColor('#ffffff')"></div>
<div class="red" onclick="setColor('#e74c3c')"></div>
<div class="yellow" onclick="setColor('#f1c40f')"></div>
<div class="green" onclick="setColor('#badc58')"></div>
<div class="blue" onclick="setColor('#3498db')"></div>
<div class="orange" onclick="setColor('#e67e22')"></div>
<div class="purple" onclick="setColor('#9b59b6')"></div>
<div class="pink" onclick="setColor('#fd79a8')"></div>
<div class="brown" onclick="setColor('#834c32')"></div>
<div class="grey" onclick="setColor('#afadad')"></div>
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
<button id="whiteboardCleanBtn" class="fas fa-trash"></button>
</div>
<canvas id="whiteboard"></canvas>
</div>
</header>
<main>
<canvas id="wbCanvas"></canvas>
</main>
</section>
<!-- End whiteboard -->
@@ -441,6 +444,7 @@ access to use this app.
<script defer src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.20"></script>
<script defer type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script defer src="https://unpkg.com/@popperjs/core@2"></script>
<script defer src="https://unpkg.com/tippy.js@6"></script>
public/view/landing.html
+2 -2
View File
@@ -230,8 +230,8 @@
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Interactive Whiteboard</h4>
<p class="m-0 text-sm">
Simple collaborative whiteboard to draw and explain your concepts to the
other participants in the meeting.
Advance collaborative whiteboard to draw and explain your concepts to
the other participants in the meeting.
</p>
</div>
</div>