mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-11-12 09:28:09 +00:00
webrtc: remove desktop browser call page
This commit is contained in:
shum committed
1 parent
fbb1e074b6
commit
bd4637a064
15 files changed
+3
-540
No files matched your search
@@ -1,24 +1,17 @@
|
||||
#!/bin/sh
|
||||
|
||||
# it can be tested in the browser from dist folder
|
||||
mkdir -p dist/{android,desktop,desktop/images} 2>/dev/null
|
||||
mkdir -p dist/android 2>/dev/null
|
||||
cp ./src/android/call.html ./dist/android/call.html
|
||||
cp ./src/android/style.css ./dist/android/style.css
|
||||
cp ./src/desktop/call.html ./dist/desktop/call.html
|
||||
cp ./src/desktop/style.css ./dist/desktop/style.css
|
||||
cp ./src/desktop/images/* ./dist/desktop/images/
|
||||
cp ./node_modules/lz-string/libs/lz-string.min.js ./dist/lz-string.min.js
|
||||
cp ./src/webcall.html ./dist/webcall.html
|
||||
cp ./src/ui.js ./dist/ui.js
|
||||
|
||||
# copy to android and desktop apps
|
||||
mkdir -p ../../apps/multiplatform/common/src/commonMain/resources/assets/www/{android,desktop,desktop/images} 2>/dev/null
|
||||
# copy to android app
|
||||
mkdir -p ../../apps/multiplatform/common/src/commonMain/resources/assets/www/android 2>/dev/null
|
||||
cp ./src/android/call.html ../../apps/multiplatform/common/src/commonMain/resources/assets/www/android/call.html
|
||||
cp ./src/android/style.css ../../apps/multiplatform/common/src/commonMain/resources/assets/www/android/style.css
|
||||
cp ./src/desktop/call.html ../../apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/call.html
|
||||
cp ./src/desktop/style.css ../../apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/style.css
|
||||
cp ./src/desktop/images/* ../../apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/
|
||||
|
||||
cp ./dist/desktop/ui.js ../../apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/ui.js
|
||||
cp ./dist/call.js ../../apps/multiplatform/common/src/commonMain/resources/assets/www/call.js
|
||||
cp ./node_modules/lz-string/libs/lz-string.min.js ../../apps/multiplatform/common/src/commonMain/resources/assets/www/lz-string.min.js
|
||||
@@ -1,81 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>SimpleX Chat WebRTC call</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<link href="/desktop/style.css" rel="stylesheet" />
|
||||
<script src="/lz-string.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<video
|
||||
id="remote-screen-video-stream"
|
||||
class="inline"
|
||||
playsinline
|
||||
poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
|
||||
style="visibility: hidden"
|
||||
onclick="javascript:toggleRemoteScreenVideoFitFill()"
|
||||
></video>
|
||||
|
||||
<video
|
||||
id="remote-video-stream"
|
||||
class="inline"
|
||||
playsinline
|
||||
poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
|
||||
onclick="javascript:toggleRemoteVideoFitFill()"
|
||||
></video>
|
||||
|
||||
<video
|
||||
id="local-video-stream"
|
||||
class="inline"
|
||||
muted
|
||||
playsinline
|
||||
poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
|
||||
></video>
|
||||
|
||||
<video
|
||||
id="local-screen-video-stream"
|
||||
class="inline"
|
||||
muted
|
||||
playsinline
|
||||
poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
|
||||
style="visibility: hidden"
|
||||
></video>
|
||||
|
||||
<div id="progress"></div>
|
||||
<div id="info-block">
|
||||
<p id="state"></p>
|
||||
<p id="description"></p>
|
||||
<b id="media-sources" style="color: #fff"></b>
|
||||
</div>
|
||||
<div id="audio-call-icon">
|
||||
<img src="/desktop/images/ic_phone_in_talk.svg" />
|
||||
</div>
|
||||
|
||||
<div id="permission-denied">
|
||||
<p id="permission-denied-title"></p>
|
||||
<p id="permission-denied-desc"></p>
|
||||
</div>
|
||||
|
||||
<p id="manage-call">
|
||||
<button id="toggle-screen" onclick="javascript:toggleScreenManually()">
|
||||
<img src="/desktop/images/ic_screen_share.svg" />
|
||||
</button>
|
||||
<button id="toggle-mic" onclick="javascript:toggleMicManually()">
|
||||
<img src="/desktop/images/ic_mic.svg" />
|
||||
</button>
|
||||
<button id="end-call" style="background: red" onclick="javascript:endCallManually()">
|
||||
<img src="/desktop/images/ic_call_end_filled.svg" />
|
||||
</button>
|
||||
<button id="toggle-speaker" onclick="javascript:toggleSpeakerManually()">
|
||||
<img src="/desktop/images/ic_volume_up.svg" />
|
||||
</button>
|
||||
<button id="toggle-camera" onclick="javascript:toggleCameraManually()">
|
||||
<img src="/desktop/images/ic_videocam_off.svg" />
|
||||
</button>
|
||||
</p>
|
||||
</body>
|
||||
<footer>
|
||||
<script src="/call.js"></script>
|
||||
<script src="/desktop/ui.js"></script>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M480 418q125 0 238.75 50.25T914 613.5q8 9.5 8.25 21t-8.25 20L821 748q-8 8-22.5 8.75t-23-5.75l-113-84.5q-6-4.5-8.75-10.25T651 643.5v-139q-42-16-85.5-22.5t-85-6.5q-42 0-85.5 6.5t-85.5 22.5v139q0 6.5-2.75 12.5T298 666.5L184.5 751q-11.5 8.5-23.5 7.5T139.5 748L46 654.5q-8.5-8.5-8.25-20t8.25-21q81.5-95 195.25-145.25T480 418Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 437 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M480 630.5q-41.75 0-69.875-30.167Q382 570.167 382 527V278q0-40.417 28.566-68.708Q439.132 181 479.941 181t69.434 28.292Q578 237.583 578 278v249q0 43.167-28.125 73.333Q521.75 630.5 480 630.5Zm0-224.5Zm-.175 526q-12.325 0-20.325-8.375t-8-20.625V795.865Q354 786 285.25 719T206 557.5q-1.5-12.593 7.295-21.547Q222.091 527 235.5 527q9.917 0 18.148 7.542 8.232 7.541 9.852 18.458 10.5 80.5 72.044 134 61.543 53.5 144.347 53.5 82.805 0 144.457-53.5Q686 633.5 696.5 553q1.853-11.167 10.121-18.583Q714.89 527 725.543 527q12.91 0 21.434 8.953Q755.5 544.907 754 557.5 743.5 652 674.75 719T509 795.865V903q0 12.25-8.425 20.625-8.426 8.375-20.75 8.375ZM480 573q18.075 0 29.288-13.5Q520.5 546 520.5 527V278.335q0-16.835-11.629-28.335-11.628-11.5-28.818-11.5t-28.872 11.356Q439.5 261.212 439.5 278v248.868q0 19.132 11.212 32.632Q461.925 573 480 573Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 949 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M681.5 693 640 651.5q16.5-20.5 26-45.75T679 553q1.814-11.167 10.182-18.583Q697.551 527 707.847 527q13.153 0 21.653 8.953 8.5 8.954 7 21.547-4.5 37-18.5 71.75T681.5 693ZM554 566l-51-50V279.038q0-17.463-11.489-29.001-11.49-11.537-29.213-11.537t-29.01 11.431Q422 261.362 422 279v155l-57.5-57.5V279q0-40.833 28.515-69.417Q421.529 181 462.265 181q40.735 0 69.485 28.583Q560.5 238.167 560.5 279v248.23q0 7.103-1.5 19.186-1.5 12.084-5 19.584Zm-94.5-94.5Zm350.5 505L58.5 225q-8-7.444-8-18.222Q50.5 196 58.25 188q7.75-8 18.006-8 10.255 0 18.244 8L847 940.5q8 7.989 8 17.994 0 10.006-8 17.756-8 8.25-18.961 8.25-10.961 0-18.039-8ZM433.5 903V795.865Q336 786 267.5 719t-79-161.5q-2-12.5 7.045-21.5 9.046-9 22.455-9 9.5 0 17.75 7.5T246 553q10.053 80.713 71.588 134.107Q379.124 740.5 462.289 740.5q37.711 0 73.071-12.588Q570.721 715.325 599.5 693l41.5 41.5q-31 26-69.014 41.568Q533.972 791.635 491 796v107q0 12.25-8.463 20.625T462.325 932q-12.325 0-20.575-8.375T433.5 903Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="100" viewBox="0 -960 960 960" width="100"><path fill="white" d="M774.5-488.5q-5.5-119.5-89-203.25t-203-88.75V-838q71 2.5 133.5 30.5t109.75 75.25q47.25 47.25 75.5 110T832-488.5h-57.5Zm-168 0q-6-49.5-40.5-83.75t-83.5-39.25V-669q73 5 124.25 56T664-488.5h-57.5Zm184 363.5Q677-125 558-180.5T338-338Q236-439 180.5-557.75T125-790.692q0-18.808 12.714-31.558Q150.429-835 169.5-835H306q14 0 23.75 9.75t13.75 24.75l26.929 123.641Q372-663.5 369.5-652q-2.5 11.5-10.229 19.226L261-533q26 44 54.688 81.658Q344.375-413.683 379-380q36.5 38 77.25 69.323Q497-279.353 542-255l95.544-98q9.456-10.5 21.357-14.25T682.5-369l117.362 25.438Q815-340 825-327.801q10 12.198 10 27.301v131q0 19.071-12.714 31.786Q809.571-125 790.5-125ZM232-585.5l81-82-23.5-110H183q1.5 41.5 13 88.25t36 103.75Zm364 358q40 19 88.166 31t93.334 14v-107l-102-21.5-79.5 83.5Zm-364-358Zm364 358Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 898 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path fill="white" d="M335.5-388H393v-89q0-23.875 16.35-40.438Q425.7-534 450.175-534H530v68l97-96.5-97-97v68h-80.077q-47.756 0-81.09 33.396Q335.5-524.708 335.5-477v89ZM74-126q-12.25 0-20.625-8.425Q45-142.851 45-154.925 45-167 53.375-175.25T74-183.5h812.5q11.675 0 20.088 8.463Q915-166.574 915-154.825q0 12.325-8.412 20.575Q898.175-126 886.5-126H74Zm68.5-117q-22.969 0-40.234-17.266Q85-277.531 85-300.5V-777q0-22.969 17.266-40.234Q119.531-834.5 142.5-834.5h675q22.969 0 40.234 17.266Q875-799.969 875-777v476.5q0 22.969-17.266 40.234Q840.469-243 817.5-243h-675Zm0-57.5h675V-777h-675v476.5Zm0 0V-777v476.5Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 700 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path fill="white" d="m549-484.5-107-107h88v-68l97 97-78 78ZM799.5-233 741-291.5h70.5V-771h-550L204-828.5h607.5q22.969 0 40.234 17.266Q869-793.969 869-771v479.53q0 26.088-20.25 43.779Q828.5-230 799.5-233Zm36 200.5L737-131H45v-57.5h635L634.5-234h-485q-22.969 0-40.234-17.266Q92-268.531 92-291.5v-481.25q0-2.75.5-3.75l-56-55L78-873 877-74l-41.5 41.5ZM393-475.5v88h-57.5V-477q0-10 2.25-22.5t7.25-23.534L149.5-719v427.5H577l-184-184ZM502-532Zm-138 26.5Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 546 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M143.5 891.5q-23.031 0-40.266-17.234Q86 857.031 86 834V318q0-23.031 17.234-40.266Q120.469 260.5 143.5 260.5h516.211q22.289 0 39.789 17.234Q717 294.969 717 318v215.5L849 401q8-7.5 16.75-3.75t8.75 13.063V741q0 10-8.75 13.75t-16.85-4.35L717 618.5V834q0 23.031-17.5 40.266Q682 891.5 659.711 891.5H143.5Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 416 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M849.5 750.5 717 618.5v114L659.5 675V318H302l-57.5-57.5h415q22.969 0 40.234 17.266Q717 295.031 717 318v215l132.5-132.5q6.5-6.5 15.75-3.167 9.25 3.334 9.25 12.667v331q0 9.625-9.25 13.062Q856 757.5 849.5 750.5Zm-26.5 250-758-758q-8-7.547-8-19.069 0-11.522 9-20.431 8.5-8.5 20-8.5t20.5 8.5l758 758q7.5 7.93 7.5 19.465t-8.5 20.035q-9 9-20.5 9t-20-9Zm-340-502Zm-319.5-238L221 318h-77.5v516h516v-77.5L716 813v21q0 22.969-17.266 40.234Q681.469 891.5 658.5 891.5h-515q-22.969 0-40.234-17.266Q86 856.969 86 834V318q0-22.969 17.266-40.234Q120.531 260.5 143.5 260.5h20Zm236 316.5Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 686 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M232.5 693q-12.5 0-20.5-8t-8-20.5v-177q0-12.5 8-20.5t20.5-8h129L509 311.5q13.5-13.5 31-6.5t17.5 26v489.5q0 19.5-17.5 26.5t-31-6.5L361.5 693h-129ZM615 742V409.5q55 17 88 63.25T736 576q0 58-33 103.25T615 742ZM500 408.5l-112.5 108h-126v119h126L500 744V408.5ZM379 576Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 381 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44" fill="white"><path d="m809.5-61.5-133-133q-27 19-58.25 33.25T553.5-139.5V-199q21.5-6.5 42.5-14.5t39.5-22L476-396v229L280-363H122.5v-234H274L54.5-816.5 96-858l755 754-41.5 42.5ZM770-291l-41.5-41.5q20-33 29.75-70.67Q768-440.85 768-481q0-100.82-58.75-180.41T553.5-763v-59.5q120 28 196 123.25t76 218.25q0 50.5-14 98.75T770-291ZM642.5-418.5l-89-89v-132q46.5 21.5 73.75 64.75T654.5-480q0 16-3 31.5t-9 30ZM476-585 372-689l104-104v208Zm-57.5 278v-145.5l-87-87H180v119h124.5l114 113.5ZM375-496Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 582 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M600.5 904.5q-15.5 5.5-28.25-4T559.5 874q0-7.5 4.25-13.5t11.75-8q89-31.5 143.75-107T774 575q0-94.5-54.5-170.5T575.5 298q-7-2-11.5-8.5t-4.5-14.5q0-16 13.25-25.25t27.75-4.25Q704.5 283 768 373t63.5 202q0 112.5-63.5 202.5t-167.5 127ZM157 693q-12.5 0-20.5-8t-8-20.5v-177q0-12.5 8-20.5t20.5-8h129l147.5-147.5q13.5-13.5 31-6.25T482 331v489.5q0 19-17.5 26.25t-31-6.25L286 693H157Zm382.5 49V409.5q55 17 88 63.25t33 103.25q0 58-33 103.25t-88 62.75Zm-115-333.5L312 516.5H186v119h126L424.5 744V408.5Zm-93 167.5Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 616 B |
@@ -1,227 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: black;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#remote-video-stream.inline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#remote-video-stream.collapsed {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
max-width: 20%;
|
||||
height: 15.03vw;
|
||||
object-fit: cover;
|
||||
margin: 16px;
|
||||
border-radius: 16px;
|
||||
bottom: 80px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#remote-video-stream.collapsed-pip {
|
||||
position: absolute;
|
||||
max-width: 30%;
|
||||
max-height: 30%;
|
||||
object-fit: cover;
|
||||
margin: 8px;
|
||||
border-radius: 8px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#remote-screen-video-stream.inline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#local-video-stream.inline {
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
max-width: 20%;
|
||||
height: 15.03vw;
|
||||
object-fit: cover;
|
||||
margin: 16px;
|
||||
border-radius: 16px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#local-screen-video-stream.inline {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
max-width: 20%;
|
||||
object-fit: cover;
|
||||
margin: 16px;
|
||||
border-radius: 16px;
|
||||
top: 33%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#remote-video-stream.fullscreen {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#remote-screen-video-stream.fullscreen {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#local-video-stream.fullscreen {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#local-screen-video-stream.fullscreen {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
*::-webkit-media-controls {
|
||||
display: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
*::-webkit-media-controls-panel {
|
||||
display: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
*::-webkit-media-controls-play-button {
|
||||
display: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
*::-webkit-media-controls-start-playback-button {
|
||||
display: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
|
||||
#manage-call {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-column-gap: 38px;
|
||||
}
|
||||
|
||||
#manage-call button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-color: #ffffff33;
|
||||
border-radius: 50%;
|
||||
padding: 13px;
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
#manage-call img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#manage-call button .video {
|
||||
background: #00000033;
|
||||
}
|
||||
|
||||
#progress {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -52px;
|
||||
margin-top: -52px;
|
||||
border-radius: 50%;
|
||||
border-top: 5px solid white;
|
||||
border-right: 5px solid white;
|
||||
border-bottom: 5px solid white;
|
||||
border-left: 5px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
#permission-denied {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#permission-denied-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#permission-denied-desc {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#info-block {
|
||||
position: absolute;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#info-block.audio {
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -100px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#info-block.video {
|
||||
left: 16px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#audio-call-icon {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -50px;
|
||||
margin-top: -44px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
@@ -1,211 +0,0 @@
|
||||
// Override defaults to enable worker on Chrome and Safari
|
||||
useWorker = typeof window.Worker !== "undefined"
|
||||
isDesktop = true
|
||||
|
||||
// Create WebSocket connection. location.search carries the per-call ?token=... capability required by the server.
|
||||
const socket = new WebSocket(`ws://${location.host}${location.search}`)
|
||||
|
||||
socket.addEventListener("open", (_event) => {
|
||||
console.log("Opened socket")
|
||||
sendMessageToNative = (msg: WVApiMessage) => {
|
||||
console.log("Message to server")
|
||||
socket.send(JSON.stringify(msg))
|
||||
reactOnMessageToServer(msg)
|
||||
}
|
||||
})
|
||||
|
||||
socket.addEventListener("message", (event) => {
|
||||
const parsed = JSON.parse(event.data)
|
||||
reactOnMessageFromServer(parsed)
|
||||
processCommand(parsed)
|
||||
console.log("Message from server")
|
||||
})
|
||||
|
||||
socket.addEventListener("close", (_event) => {
|
||||
console.log("Closed socket")
|
||||
sendMessageToNative = (_msg: WVApiMessage) => {
|
||||
console.log("Tried to send message to native but the socket was closed already")
|
||||
}
|
||||
window.close()
|
||||
})
|
||||
|
||||
function endCallManually() {
|
||||
sendMessageToNative({resp: {type: "end"}})
|
||||
}
|
||||
|
||||
function toggleMicManually() {
|
||||
const enable = activeCall ? !activeCall.localMediaSources.mic : !inactiveCallMediaSources.mic
|
||||
const apiCall: WVAPICall = {
|
||||
command: {type: "media", source: CallMediaSource.Mic, enable: enable},
|
||||
}
|
||||
processCommand(apiCall)
|
||||
}
|
||||
|
||||
function toggleSpeakerManually() {
|
||||
if (activeCall?.remoteStream && activeCall.peerMediaSources.mic) {
|
||||
enableSpeakerIcon(togglePeerMedia(activeCall.remoteStream, CallMediaType.Audio), !activeCall.peerMediaSources.mic)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCameraManually() {
|
||||
const enable = activeCall ? !activeCall.localMediaSources.camera : !inactiveCallMediaSources.camera
|
||||
const apiCall: WVAPICall = {
|
||||
command: {type: "media", source: CallMediaSource.Camera, enable: enable},
|
||||
}
|
||||
processCommand(apiCall)
|
||||
}
|
||||
|
||||
async function toggleScreenManually() {
|
||||
await toggleScreenShare()
|
||||
}
|
||||
|
||||
// override function in call.ts to adapt UI to enabled media sources
|
||||
localOrPeerMediaSourcesChanged = (call: Call) => {
|
||||
enableMicIcon(call.localMediaSources.mic)
|
||||
enableCameraIcon(call.localMediaSources.camera)
|
||||
enableScreenIcon(call.localMediaSources.screenVideo)
|
||||
|
||||
const className =
|
||||
localMedia(call) == CallMediaType.Video || peerMedia(call) == CallMediaType.Video ? CallMediaType.Video : CallMediaType.Audio
|
||||
document.getElementById("info-block")!.className = className
|
||||
|
||||
if (call.connection.iceConnectionState == "connected") {
|
||||
document.getElementById("audio-call-icon")!.style.display = className == CallMediaType.Audio ? "block" : "none"
|
||||
}
|
||||
|
||||
// document.getElementById("media-sources")!.innerText = mediaSourcesStatus(call)
|
||||
document.getElementById("manage-call")!.className = localMedia(call) == CallMediaType.Video ? CallMediaType.Video : ""
|
||||
}
|
||||
|
||||
// override function in call.ts to adapt UI to enabled media sources
|
||||
inactiveCallMediaSourcesChanged = (inactiveCallMediaSources: CallMediaSources) => {
|
||||
const mic = inactiveCallMediaSources.mic
|
||||
const camera = inactiveCallMediaSources.camera
|
||||
const screenVideo = inactiveCallMediaSources.screenVideo
|
||||
enableMicIcon(mic)
|
||||
enableCameraIcon(camera)
|
||||
enableScreenIcon(screenVideo)
|
||||
|
||||
const className = camera ? CallMediaType.Video : CallMediaType.Audio
|
||||
document.getElementById("info-block")!.className = className
|
||||
// document.getElementById("media-sources")!.innerText = inactiveCallMediaSourcesStatus(inactiveCallMediaSources)
|
||||
}
|
||||
|
||||
failedToGetPermissions = (title: string, description: string) => {
|
||||
document.getElementById("info-block")!.style.visibility = "hidden"
|
||||
document.getElementById("progress")!.style.visibility = "hidden"
|
||||
|
||||
document.getElementById("permission-denied-title")!.innerText = title
|
||||
document.getElementById("permission-denied-desc")!.innerText = description
|
||||
|
||||
document.getElementById("toggle-mic")!.style.visibility = "hidden"
|
||||
document.getElementById("toggle-camera")!.style.visibility = "hidden"
|
||||
document.getElementById("toggle-screen")!.style.visibility = "hidden"
|
||||
document.getElementById("toggle-speaker")!.style.visibility = "hidden"
|
||||
}
|
||||
|
||||
function enableMicIcon(enabled: boolean) {
|
||||
document.getElementById("toggle-mic")!.innerHTML = enabled
|
||||
? '<img src="/desktop/images/ic_mic.svg" />'
|
||||
: '<img src="/desktop/images/ic_mic_off.svg" />'
|
||||
}
|
||||
|
||||
function enableCameraIcon(enabled: boolean) {
|
||||
document.getElementById("toggle-camera")!.innerHTML = enabled
|
||||
? '<img src="/desktop/images/ic_videocam_filled.svg" />'
|
||||
: '<img src="/desktop/images/ic_videocam_off.svg" />'
|
||||
}
|
||||
|
||||
function enableScreenIcon(enabled: boolean) {
|
||||
document.getElementById("toggle-screen")!.innerHTML = enabled
|
||||
? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
|
||||
: '<img src="/desktop/images/ic_screen_share.svg" />'
|
||||
}
|
||||
|
||||
function enableSpeakerIcon(enabled: boolean, muted: boolean) {
|
||||
document.getElementById("toggle-speaker")!!.innerHTML = muted
|
||||
? '<img src="/desktop/images/ic_volume_off.svg" />'
|
||||
: enabled
|
||||
? '<img src="/desktop/images/ic_volume_up.svg" />'
|
||||
: '<img src="/desktop/images/ic_volume_down.svg" />'
|
||||
document.getElementById("toggle-speaker")!!.style.opacity = muted ? "0.7" : "1"
|
||||
}
|
||||
|
||||
function mediaSourcesStatus(call: Call): string {
|
||||
let status = "local"
|
||||
if (call.localMediaSources.mic) status += " mic"
|
||||
if (call.localMediaSources.camera) status += " cam"
|
||||
if (call.localMediaSources.screenAudio) status += " scrA"
|
||||
if (call.localMediaSources.screenVideo) status += " scrV"
|
||||
|
||||
status += " | peer"
|
||||
|
||||
if (call.peerMediaSources.mic) status += " mic"
|
||||
if (call.peerMediaSources.camera) status += " cam"
|
||||
if (call.peerMediaSources.screenAudio) status += " scrA"
|
||||
if (call.peerMediaSources.screenVideo) status += " scrV"
|
||||
return status
|
||||
}
|
||||
|
||||
function inactiveCallMediaSourcesStatus(inactiveCallMediaSources: CallMediaSources): string {
|
||||
let status = "local"
|
||||
const mic = inactiveCallMediaSources.mic
|
||||
const camera = inactiveCallMediaSources.camera
|
||||
const screenAudio = inactiveCallMediaSources.screenAudio
|
||||
const screenVideo = inactiveCallMediaSources.screenVideo
|
||||
if (mic) status += " mic"
|
||||
if (camera) status += " cam"
|
||||
if (screenAudio) status += " scrA"
|
||||
if (screenVideo) status += " scrV"
|
||||
return status
|
||||
}
|
||||
|
||||
function reactOnMessageFromServer(msg: WVApiMessage) {
|
||||
// screen is not allowed to be enabled before connection estabilished
|
||||
if (msg.command?.type == "capabilities" || msg.command?.type == "offer") {
|
||||
document.getElementById("toggle-screen")!!.style.opacity = "0.7"
|
||||
} else if (activeCall) {
|
||||
document.getElementById("toggle-screen")!!.style.opacity = "1"
|
||||
}
|
||||
switch (msg.command?.type) {
|
||||
case "capabilities":
|
||||
case "offer":
|
||||
case "start":
|
||||
document.getElementById("info-block")!!.className = msg.command.media
|
||||
document.getElementById("toggle-mic")!!.style.display = "inline-block"
|
||||
document.getElementById("toggle-speaker")!!.style.display = "inline-block"
|
||||
document.getElementById("toggle-camera")!!.style.display = "inline-block"
|
||||
document.getElementById("toggle-screen")!!.style.display = "inline-block"
|
||||
enableSpeakerIcon(true, true)
|
||||
break
|
||||
case "description":
|
||||
updateCallInfoView(msg.command.state, msg.command.description)
|
||||
if (activeCall?.connection.connectionState == "connected") {
|
||||
document.getElementById("progress")!.style.display = "none"
|
||||
document.getElementById("audio-call-icon")!.style.display =
|
||||
document.getElementById("info-block")!!.className == CallMediaType.Audio ? "block" : "none"
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function reactOnMessageToServer(msg: WVApiMessage) {
|
||||
if (!activeCall) return
|
||||
|
||||
switch (msg.resp?.type) {
|
||||
case "peerMedia":
|
||||
const className = localMedia(activeCall) == CallMediaType.Video || peerMedia(activeCall) == CallMediaType.Video ? "video" : "audio"
|
||||
document.getElementById("info-block")!!.className = className
|
||||
document.getElementById("audio-call-icon")!.style.display = className == CallMediaType.Audio ? "block" : "none"
|
||||
enableSpeakerIcon(
|
||||
activeCall.remoteStream.getAudioTracks().every((elem) => elem.enabled),
|
||||
!activeCall.peerMediaSources.mic
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function updateCallInfoView(state: string, description: string) {
|
||||
document.getElementById("state")!!.innerText = state
|
||||
document.getElementById("description")!!.innerText = description
|
||||
}
|
||||
Reference in new issue
Block a user