init
This commit is contained in:
nnduc
@@ -0,0 +1,31 @@
|
||||
[visio]
|
||||
calling = …is calling you
|
||||
video_call = Incoming video call
|
||||
audio_call = Incoming audio call
|
||||
ringing = …ringing
|
||||
declined = Declined
|
||||
in_call = Ongoing call
|
||||
joined_call = Joined call
|
||||
failed = Failed
|
||||
connecting = …connecting
|
||||
ended = End of call
|
||||
waiting_participants = Waiting for incoming participants
|
||||
no_participants_left = All participants have left the call
|
||||
hang_up = Hang up the call
|
||||
hang_up_text= You are going to hang up the current call, are you sure?
|
||||
pinned = "%s pinned"
|
||||
unpinned = Unpinned
|
||||
|
||||
[visiolobby]
|
||||
called = "%s is calling you"
|
||||
calling = "Calling %s"
|
||||
muji_create = "Creating a conference call in %s"
|
||||
muji_join = "Joining the conference call"
|
||||
setup = "Setting up your camera and microphone"
|
||||
devices_disco = "Please allow your browser to share your devices to configure them"
|
||||
microphone_label= Default microphone
|
||||
camera_label = Default camera
|
||||
default_microphone_changed = Default microphone changed
|
||||
default_camera_changed = Default camera changed
|
||||
no_mic_sound = "No sound detected from your microphone"
|
||||
no_mic_sound2 = "Try make some noise, select another source or check your system settings"
|
||||
@@ -0,0 +1,544 @@
|
||||
#visio {
|
||||
display: block;
|
||||
position: fixed;
|
||||
transition: opacity 0.3s ease-in-out,
|
||||
bottom 0.3s ease-in-out,
|
||||
right 0.3s ease-in-out,
|
||||
width 0.3s ease-in-out,
|
||||
height 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
#dialog:not(:empty)~#visio,
|
||||
#drawer:not(:empty)~#visio {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
#chat_widget #visio {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
grid-column: start / end;
|
||||
grid-row: header / visio;
|
||||
}
|
||||
|
||||
#chat_widget.call #visio {
|
||||
grid-row: header / end;
|
||||
}
|
||||
|
||||
body>#visio:not(:fullscreen) #toggle_dtmf,
|
||||
|
||||
#chat_widget #visio #switch_chat,
|
||||
#visio:not([data-jid]),
|
||||
#visio:not([data-jid]) #toggle_audio,
|
||||
#visio #dtmf:not(.hide)~#participants,
|
||||
|
||||
body>#visio:not(:fullscreen) #toggle_mode,
|
||||
#visio:not([data-muji=true]) #toggle_mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio #visio_source {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio #switch_camera:not(.enabled) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio #dtmf {
|
||||
top: calc(50% - 15rem);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#visio #dtmf p.dtmf {
|
||||
width: 16rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
mask-image: linear-gradient(to left, black calc(100% - 2rem), transparent);
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
#visio #dtmf p.dtmf span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 2rem;
|
||||
text-align: center;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
#visio .infos {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: calc(50% - 15rem);
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
text-align: center;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
#visio[data-muji='false'] #participants:has(.participant:not(.video_off))~.infos,
|
||||
#visio[data-muji='true'] #participants:not(:empty)~.infos,
|
||||
#visio #dtmf:not(.hide)~.infos {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#visio .infos #remote_level {
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 6rem;
|
||||
line-height: 15rem;
|
||||
border: 0.5rem solid transparent;
|
||||
}
|
||||
|
||||
#visio .infos #remote_level div.avatar img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#visio .infos p.state {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
#visio video#local_video,
|
||||
#visio video#screen_sharing_video.sharing {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
width: 20rem;
|
||||
max-width: 40%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--elevation-4);
|
||||
|
||||
background-image: url('../theme/img/cloud_spinner.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 25%;
|
||||
|
||||
transition: width 0.2s ease-in-out;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#visio video#local_video:hover,
|
||||
#visio video#screen_sharing_video.sharing:hover {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* Minimized */
|
||||
|
||||
body>#visio:not(:fullscreen) {
|
||||
bottom: 7rem;
|
||||
right: 1rem;
|
||||
width: 40rem;
|
||||
height: 25rem;
|
||||
border-radius: 1rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
body>#visio:not(:fullscreen) #participants:has(.participant:nth-child(2)) .participant,
|
||||
body>#visio:not(:fullscreen) #participants:has(.participant:nth-child(5)) .participant,
|
||||
body>#visio:not(:fullscreen) #participants .participant.active {
|
||||
height: 92%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
body>#visio:not(:fullscreen) .participant span.pin,
|
||||
body>#visio[data-muji='true']:not(:fullscreen) #participants .participant:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
body>#visio:not(:fullscreen) video#local_video,
|
||||
body>#visio:not(:fullscreen) video#screen_sharing_video.sharing {
|
||||
width: 10rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
body>#visio:not(:fullscreen) #visio_contact,
|
||||
body>#visio:not(:fullscreen) .participant img.avatar {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
#chat_widget #visio:not(:fullscreen) #visio_contact,
|
||||
body>#visio:not(:fullscreen) .participant img.avatar {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
body>#visio:not(:fullscreen) #visio {
|
||||
width: 30rem;
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
#visio video#screen_sharing_video:not(.sharing),
|
||||
#visio video#screen_sharing_video.sharing+video#local_video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
#visio video#local_video,
|
||||
#visio video#screen_sharing_video.sharing {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
#visio header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#visio header::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 115%;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#visio header span.control {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#visio.movements header span.control,
|
||||
#visio.movements header::before,
|
||||
#visio header:hover span.control,
|
||||
#visio header:hover::before {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
#visio header ul.list li {
|
||||
justify-content: space-between;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#visio header ul.list li span#switch_chat {
|
||||
flex: 0 0 5rem;
|
||||
}
|
||||
|
||||
#visio header i {
|
||||
text-shadow: 0 0 3rem #333, 0 0 0.5rem #777;
|
||||
}
|
||||
|
||||
#visio header i#network_condition:before {
|
||||
font-family: 'Material Symbols';
|
||||
color: var(--movim-font);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#visio header i#network_condition.excellent:before {
|
||||
content: '\e202';
|
||||
color: var(--p-green);
|
||||
}
|
||||
|
||||
#visio header i#network_condition.good:before {
|
||||
content: '\ebe3';
|
||||
color: var(--p-orange);
|
||||
}
|
||||
|
||||
#visio header i#network_condition.bad:before {
|
||||
content: '\ebdf';
|
||||
color: var(--p-red);
|
||||
}
|
||||
|
||||
#visio header #no_mic_sound.disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio header span#toggle_audio::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.3rem;
|
||||
height: 2rem;
|
||||
min-height: 0.3rem;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
transition: height .1s;
|
||||
height: calc(var(--level) * 2.5rem);
|
||||
opacity: 0.75;
|
||||
margin-top: -1rem;
|
||||
margin-left: -0.4rem;
|
||||
margin-right: 0;
|
||||
box-shadow: var(--elevation-4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#visio header #no_mic_sound {
|
||||
animation: fadeIn 0.3s;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#visio .button.action {
|
||||
right: calc(50% - 3.5rem);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#visio #participants {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
padding: 0 1rem;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#visio .participant {
|
||||
position: relative;
|
||||
aspect-ratio: 4/3;
|
||||
background-color: #222;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-height: calc(100% - 2rem);
|
||||
transition: outline 0.3s;
|
||||
outline: 0.25rem solid rgb(255, 255, 255, calc(var(--level) * 0.75));
|
||||
justify-content: center;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#visio #participants .participant:only-child {
|
||||
max-height: 96%;
|
||||
}
|
||||
|
||||
#visio #participants:has(.participant:nth-child(2)) .participant {
|
||||
flex-basis: 48%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
#visio #participants:has(.participant:nth-child(3)):not(.active) .participant {
|
||||
max-height: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
#visio #participants:has(.participant:nth-child(5)) .participant {
|
||||
flex-basis: 32%;
|
||||
}
|
||||
|
||||
#visio #participants:has(.participant:nth-child(7)):not(.active) .participant {
|
||||
max-height: calc(33% - 2rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#visio #participants:has(.participant:nth-child(5)) .participant {
|
||||
flex-basis: 48%;
|
||||
}
|
||||
|
||||
#visio #participants:has(.participant:nth-child(5)):not(.active) .participant {
|
||||
max-height: calc(25% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video elements */
|
||||
|
||||
#visio .participant video {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#visio .participant video.screen {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#visio .participant.screen_off video.screen {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#visio .participant:not(.screen_off) video:not(.screen) {
|
||||
height: 10%;
|
||||
border-radius: 0.5rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
#visio .participant:not(.screen_off) video:not(.screen):hover {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
#visio #local_video,
|
||||
#visio .participant video {
|
||||
transition: opacity 0.5s ease-in-out, outline 0.4s ease 0s, height 0.3s;
|
||||
}
|
||||
|
||||
#visio #local_video.video_off,
|
||||
#visio .participant.video_off video:not(.screen) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
|
||||
#visio .participant img.avatar {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: 15rem;
|
||||
max-height: 50%;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
align-self: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#visio .participant.video_off.screen_off img.avatar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Status box */
|
||||
|
||||
#visio .participant div.status {
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
bottom: 1rem;
|
||||
position: absolute;
|
||||
line-height: 3.5rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
padding: 0 1.25rem;
|
||||
border-radius: 1rem;
|
||||
color: white;
|
||||
box-shadow: var(--elevation-1);
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#visio .participant:not(.screen_off) div.status {
|
||||
background-color: var(--p-red);
|
||||
}
|
||||
|
||||
#visio .participant div.status[data-name]::before {
|
||||
content: attr(data-name);
|
||||
margin-right: 1rem;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
#visio .participant:not(.audio_off):not(.video_off).screen_off div.status[data-name]::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#visio .participant div.status span::before {
|
||||
font-family: 'Material Symbols';
|
||||
font-variation-settings: 'FILL' 1;
|
||||
vertical-align: center;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
#visio .participant div.status span.video_off::before {
|
||||
content: '\e04c';
|
||||
}
|
||||
|
||||
#visio .participant:not(.audio_off) div.status span.audio_off,
|
||||
#visio .participant:not(.video_off) div.status span.video_off,
|
||||
#visio .participant:not(.pinned) div.status span.pin,
|
||||
#visio .participant.screen_off div.status span.screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio .participant div.status span.audio_off::before {
|
||||
content: '\e02b';
|
||||
}
|
||||
|
||||
#visio .participant div.status span.screen::before {
|
||||
font-family: 'sans-serif';
|
||||
content: 'LIVE';
|
||||
}
|
||||
|
||||
/* Pin button */
|
||||
|
||||
#visio .participant span.pin {
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 2rem;
|
||||
line-height: 3.5rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--elevation-1);
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
position: absolute;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#visio:not([data-muji=true]) .participant span.pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio .participant.pinned span.pin,
|
||||
#visio .participant:not(.pinned):hover span.pin {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#visio .participant span.pin:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#visio .participant span.pin::before {
|
||||
font-family: 'Material Symbols';
|
||||
content: '\e6aa';
|
||||
}
|
||||
|
||||
#visio .participant span.pin:hover::before,
|
||||
#visio .participant.pinned span.pin::before {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
/* Active speaker */
|
||||
|
||||
#visio #participants.active:has(.participant:nth-child(2)) .participant.active {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#visio #participants.active:has(.participant:nth-child(2)) .participant:not(.active) {
|
||||
height: 15%;
|
||||
max-width: 25rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Temporary CSS */
|
||||
/*
|
||||
#visio[data-sfu="true"] #screen_sharing {
|
||||
display: none;
|
||||
}*/
|
||||
@@ -0,0 +1,69 @@
|
||||
var VisioDTMF = {
|
||||
context: null,
|
||||
osc1: null,
|
||||
osc2: null,
|
||||
started: false,
|
||||
|
||||
setup: function () {
|
||||
this.context = new window.AudioContext;
|
||||
this.osc1 = this.context.createOscillator();
|
||||
this.osc2 = this.context.createOscillator();
|
||||
|
||||
this.gainNode = this.context.createGain();
|
||||
this.gainNode.gain.value = 0.25;
|
||||
|
||||
this.filter = this.context.createBiquadFilter();
|
||||
this.filter.type = "lowpass";
|
||||
this.filter.frequency = 8000;
|
||||
|
||||
this.osc1.connect(this.gainNode);
|
||||
this.osc2.connect(this.gainNode);
|
||||
|
||||
this.gainNode.connect(this.filter);
|
||||
this.filter.connect(this.context.destination);
|
||||
},
|
||||
|
||||
pressButton(number) {
|
||||
var dtmfFrequencies = {
|
||||
"1": { f1: 697, f2: 1209 },
|
||||
"2": { f1: 697, f2: 1336 },
|
||||
"3": { f1: 697, f2: 1477 },
|
||||
"4": { f1: 770, f2: 1209 },
|
||||
"5": { f1: 770, f2: 1336 },
|
||||
"6": { f1: 770, f2: 1477 },
|
||||
"7": { f1: 852, f2: 1209 },
|
||||
"8": { f1: 852, f2: 1336 },
|
||||
"9": { f1: 852, f2: 1477 },
|
||||
"*": { f1: 941, f2: 1209 },
|
||||
"0": { f1: 941, f2: 1336 },
|
||||
"#": { f1: 941, f2: 1477 }
|
||||
}
|
||||
|
||||
let frequencies = dtmfFrequencies[number];
|
||||
|
||||
this.tone(frequencies.f1, frequencies.f2);
|
||||
},
|
||||
|
||||
tone: function (freq1, freq2) {
|
||||
if (this.started) this.stop();
|
||||
|
||||
this.setup();
|
||||
|
||||
this.osc1.frequency.value = freq1;
|
||||
this.osc2.frequency.value = freq2;
|
||||
|
||||
this.osc1.start(0);
|
||||
this.osc2.start(0);
|
||||
|
||||
this.started = true;
|
||||
},
|
||||
|
||||
stop: function () {
|
||||
this.osc1.stop(0);
|
||||
this.osc2.stop(0);
|
||||
|
||||
this.started = false;
|
||||
}
|
||||
}
|
||||
|
||||
VisioDTMF.setup();
|
||||
@@ -0,0 +1,69 @@
|
||||
#visio_lobby:not(.configure) form,
|
||||
#visio_lobby.configure .placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio_lobby .placeholder {
|
||||
margin: 4rem auto;
|
||||
}
|
||||
|
||||
#visio_lobby {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#visio_lobby form {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#visio_lobby #mic_preview {
|
||||
height: 2rem;
|
||||
margin-left: 7rem;
|
||||
}
|
||||
|
||||
#visio_lobby #mic_preview .level {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#visio_lobby #mic_preview .level span {
|
||||
display: inline-block;
|
||||
width: calc(10% - 0.75rem);
|
||||
margin: 0.25rem;
|
||||
height: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#visio_lobby #mic_preview .level span.disabled {
|
||||
opacity: 0.1;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
#visio_lobby #default_microphone.muted span.primary i.enabled,
|
||||
#visio_lobby #default_microphone:not(.muted) span.primary i.disabled,
|
||||
#visio_lobby #default_microphone:not(.muted) .supporting {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#visio_lobby #camera_preview {
|
||||
border-radius: 0.5rem;
|
||||
max-height: 30rem;
|
||||
width: 100%;
|
||||
|
||||
background-image: url('../theme/img/cloud_spinner.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15%;
|
||||
}
|
||||
|
||||
#visio_lobby + footer {
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#visio_lobby + footer > .button {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
var VisioTones = {
|
||||
context: null,
|
||||
o: null,
|
||||
g: null,
|
||||
init: function() {
|
||||
this.context = new AudioContext();
|
||||
this.o = this.context.createOscillator();
|
||||
this.g = this.context.createGain();
|
||||
this.o.connect(this.g);
|
||||
this.g.connect(this.context.destination);
|
||||
},
|
||||
|
||||
ringingTone: function() {
|
||||
this.o.frequency.value = 1440.0;
|
||||
this.o.start(0);
|
||||
},
|
||||
}
|
||||
|
||||
VisioTones.init();
|
||||
@@ -0,0 +1,419 @@
|
||||
var VisioUtils = {
|
||||
microphone: null,
|
||||
maxLevel: 0,
|
||||
remoteMaxLevel: 0,
|
||||
audioContext: null,
|
||||
meter: null,
|
||||
rafId: null,
|
||||
|
||||
handleAudio: function () {
|
||||
if (VisioUtils.audioContext) {
|
||||
VisioUtils.audioContext.close();
|
||||
VisioUtils.audioContext = null;
|
||||
}
|
||||
|
||||
VisioUtils.audioContext = new AudioContext();
|
||||
|
||||
try {
|
||||
VisioUtils.microphone = VisioUtils.audioContext.createMediaStreamSource(
|
||||
MovimVisio.localAudio.srcObject
|
||||
);
|
||||
} catch (error) {
|
||||
MovimUtils.logError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
let javascriptNode = VisioUtils.audioContext.createScriptProcessor(128 * 64, 1, 1);
|
||||
let icon = document.querySelector('#toggle_audio i');
|
||||
let toggleAudio = document.getElementById('toggle_audio');
|
||||
icon.innerText = 'mic';
|
||||
let isMuteStep = 251;
|
||||
let noMicSound = document.querySelector('#no_mic_sound');
|
||||
let defaultMicrophone = document.querySelector('#default_microphone');
|
||||
|
||||
if (defaultMicrophone) {
|
||||
defaultMicrophone.classList.add('muted');
|
||||
}
|
||||
|
||||
VisioUtils.meter = VisioUtils.audioContext.createAnalyser();
|
||||
VisioUtils.meter.fftSize = 256;
|
||||
VisioUtils.microphone.connect(VisioUtils.meter);
|
||||
|
||||
function startAnalyzer() {
|
||||
if (!VisioUtils.meter) return;
|
||||
|
||||
const dataArray = new Uint8Array(VisioUtils.meter.frequencyBinCount);
|
||||
|
||||
function update() {
|
||||
if (!VisioUtils.meter) return;
|
||||
|
||||
VisioUtils.meter.getByteFrequencyData(dataArray);
|
||||
|
||||
let sum = 0;
|
||||
for (let i = 0; i < dataArray.length; i++) {
|
||||
sum += dataArray[i];
|
||||
}
|
||||
|
||||
const avg = sum / dataArray.length;
|
||||
const level = Math.min(1, (avg / 255) ** .3);
|
||||
VisioUtils.rafId = requestAnimationFrame(update);
|
||||
|
||||
let step = 0;
|
||||
|
||||
if (level == 0) {
|
||||
isMuteStep++;
|
||||
} else {
|
||||
isMuteStep = 0;
|
||||
}
|
||||
|
||||
if (isMuteStep > 32) {
|
||||
if (noMicSound) {
|
||||
noMicSound.classList.remove('disabled');
|
||||
}
|
||||
|
||||
if (defaultMicrophone) {
|
||||
defaultMicrophone.classList.add('muted');
|
||||
}
|
||||
} else {
|
||||
if (noMicSound) {
|
||||
noMicSound.classList.add('disabled');
|
||||
}
|
||||
|
||||
if (defaultMicrophone) {
|
||||
defaultMicrophone.classList.remove('muted');
|
||||
}
|
||||
|
||||
// Lobby level
|
||||
if (isMuteStep <= 5) {
|
||||
document.querySelectorAll('.level span').forEach(span => {
|
||||
if (step < Math.floor(level * 10)) {
|
||||
span.classList.remove('disabled');
|
||||
} else {
|
||||
span.classList.add('disabled');
|
||||
}
|
||||
|
||||
step++;
|
||||
});
|
||||
|
||||
toggleAudio.style.setProperty('--level', level.toFixed(2));
|
||||
}
|
||||
}
|
||||
}
|
||||
update();
|
||||
}
|
||||
|
||||
startAnalyzer();
|
||||
},
|
||||
|
||||
stopAudio: function () {
|
||||
if (VisioUtils.rafId) {
|
||||
cancelAnimationFrame(VisioUtils.rafId);
|
||||
VisioUtils.rafId = null;
|
||||
}
|
||||
|
||||
if (VisioUtils.microphone) {
|
||||
VisioUtils.microphone.disconnect();
|
||||
VisioUtils.microphone = null;
|
||||
}
|
||||
|
||||
if (VisioUtils.audioContext) {
|
||||
VisioUtils.audioContext.close();
|
||||
VisioUtils.audioContext = null;
|
||||
}
|
||||
},
|
||||
|
||||
toggleFullScreen: function () {
|
||||
let button = document.querySelector('#toggle_fullscreen i');
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
if (document.querySelector('#visio').requestFullscreen) {
|
||||
document.querySelector('#visio').requestFullscreen();
|
||||
}
|
||||
|
||||
button.innerText = 'fullscreen_exit';
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
|
||||
button.innerText = 'fullscreen';
|
||||
}
|
||||
},
|
||||
|
||||
toggleMode: function (active) {
|
||||
let button = document.querySelector('#toggle_mode i');
|
||||
let participants = document.querySelector('#participants');
|
||||
|
||||
if (button.innerText == 'tile_small' || active) {
|
||||
participants.classList.add('active');
|
||||
button.innerHTML = 'tile_large';
|
||||
} else {
|
||||
participants.classList.remove('active');
|
||||
button.innerHTML = 'tile_small';
|
||||
}
|
||||
},
|
||||
|
||||
toggleAudio: function () {
|
||||
let button = document.querySelector('#toggle_audio i');
|
||||
|
||||
if (button.innerText == 'mic_off') {
|
||||
MovimJingles.enableAudio(true);
|
||||
button.innerText = 'mic';
|
||||
} else {
|
||||
MovimJingles.enableAudio(false);
|
||||
button.innerText = 'mic_off';
|
||||
}
|
||||
},
|
||||
|
||||
toggleVideo: async function () {
|
||||
let button = document.querySelector('#toggle_video i');
|
||||
|
||||
if (MovimVisio.localVideo.srcObject == null) {
|
||||
MovimVisio.getUserMedia(true).then(e => {
|
||||
MovimJingles.enableVideo(true);
|
||||
MovimVisio.localVideo.classList.remove('video_off');
|
||||
button.innerText = 'videocam';
|
||||
});
|
||||
} else {
|
||||
if (button.innerText == 'videocam_off') {
|
||||
MovimJingles.enableVideo(true);
|
||||
MovimVisio.localVideo.classList.remove('video_off');
|
||||
button.innerText = 'videocam';
|
||||
} else {
|
||||
MovimJingles.enableVideo(false);
|
||||
MovimVisio.localVideo.classList.add('video_off');
|
||||
button.innerText = 'videocam_off';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toggleScreenSharing: async function () {
|
||||
MovimVisio.switchCamera = document.querySelector("#visio #switch_camera");
|
||||
let button = document.querySelector('#screen_sharing i');
|
||||
|
||||
if (MovimVisio.screenSharing.srcObject == null) {
|
||||
try {
|
||||
MovimVisio.screenSharing.srcObject = await navigator.mediaDevices.getDisplayMedia({
|
||||
video: { cursor: "always" },
|
||||
audio: true
|
||||
});
|
||||
|
||||
MovimVisio.screenSharing.classList.add('sharing');
|
||||
VisioUtils.disableSwitchCameraButton();
|
||||
button.innerText = 'stop_screen_share';
|
||||
|
||||
if (MovimVisio.sfu) {
|
||||
MovimVisio.startScreenshareSFU();
|
||||
} else {
|
||||
MovimJingles.enableScreenSharing();
|
||||
MovimVisio.mujiPublish();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error: " + err);
|
||||
}
|
||||
return;
|
||||
} else {
|
||||
if (MovimVisio.sfu) {
|
||||
MovimVisio.stopScreenshareSFU();
|
||||
VisioUtils.disableScreenSharing();
|
||||
} else {
|
||||
VisioUtils.disableScreenSharing();
|
||||
MovimVisio.mujiPublish();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
disableScreenSharing: function () {
|
||||
MovimJingles.disableScreenSharing();
|
||||
|
||||
if (MovimVisio.screenSharing && MovimVisio.screenSharing.srcObject) {
|
||||
MovimVisio.screenSharing.srcObject.getTracks().forEach(track => track.stop());
|
||||
MovimVisio.screenSharing.srcObject = null;
|
||||
|
||||
MovimVisio.screenSharing.classList.remove('sharing');
|
||||
MovimVisio.switchCamera.classList.remove('disabled');
|
||||
}
|
||||
|
||||
if (button = document.querySelector('#screen_sharing i')) {
|
||||
button.innerText = 'screen_share';
|
||||
}
|
||||
},
|
||||
|
||||
switchChat: function () {
|
||||
let visio = document.querySelector('#visio');
|
||||
|
||||
if (visio.dataset.jid) {
|
||||
Search.chat(visio.dataset.jid, (visio.dataset.muji == 'true'));
|
||||
}
|
||||
},
|
||||
|
||||
toggleDtmf: function () {
|
||||
document.querySelector('#visio #dtmf').classList.toggle('hide');
|
||||
},
|
||||
|
||||
insertDtmf: function (s) {
|
||||
VisioDTMF.pressButton(s);
|
||||
setTimeout(() => VisioDTMF.stop(), 100);
|
||||
|
||||
let insert = (s == '*') ? '🞳' : s;
|
||||
document.querySelector('#dtmf p.dtmf span').innerText += insert;
|
||||
|
||||
MovimJingles.insertDtmf(s);
|
||||
},
|
||||
|
||||
clearDtMf: function () {
|
||||
document.querySelector('#dtmf p.dtmf span').innerText = '';
|
||||
},
|
||||
|
||||
disableSwitchCameraButton: function () {
|
||||
MovimVisio.switchCamera.classList.add('disabled');
|
||||
},
|
||||
|
||||
enableLobbyCallButton: function () {
|
||||
if (document.querySelector('#lobby_start')) {
|
||||
document.querySelector('#lobby_start').classList.remove('disabled');
|
||||
}
|
||||
},
|
||||
|
||||
disableLobbyCallButton: function () {
|
||||
if (document.querySelector('#lobby_start')) {
|
||||
document.querySelector('#lobby_start').classList.add('disabled');
|
||||
}
|
||||
},
|
||||
|
||||
getConstraints: function (withVideo) {
|
||||
const cpuCores = navigator.hardwareConcurrency || 2;
|
||||
let constraints = {
|
||||
audio: true,
|
||||
video: false,
|
||||
};
|
||||
|
||||
if (withVideo) {
|
||||
if (cpuCores <= 2) {
|
||||
constraints.video = {
|
||||
width: { ideal: 640 },
|
||||
height: { ideal: 480 },
|
||||
frameRate: { max: 15, ideal: 15 }
|
||||
};
|
||||
} else if (cpuCores <= 4) {
|
||||
constraints.video = {
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
frameRate: { max: 30, ideal: 24 }
|
||||
};
|
||||
} else {
|
||||
constraints.video = {
|
||||
width: { ideal: 1920 },
|
||||
height: { ideal: 1080 },
|
||||
frameRate: { max: 30, ideal: 30 }
|
||||
};
|
||||
}
|
||||
|
||||
constraints.video.facingMode = 'user';
|
||||
|
||||
if (localStorage.defaultCamera) {
|
||||
constraints.video.deviceId = localStorage.defaultCamera
|
||||
}
|
||||
}
|
||||
|
||||
if (localStorage.defaultMicrophone) {
|
||||
constraints.audio = {
|
||||
deviceId: localStorage.defaultMicrophone
|
||||
}
|
||||
}
|
||||
|
||||
return constraints;
|
||||
},
|
||||
|
||||
setVideoCodecPreferences: function (transceiver) {
|
||||
let codecs = RTCRtpReceiver.getCapabilities('video').codecs;
|
||||
|
||||
if (transceiver.setCodecPreferences != undefined) {
|
||||
let preferredOrder = [/*'video/AV1',*/ 'video/H264', 'video/VP8', 'video/VP9'];
|
||||
codecs.sort((a, b) => {
|
||||
const indexA = preferredOrder.indexOf(a.mimeType);
|
||||
const indexB = preferredOrder.indexOf(b.mimeType);
|
||||
const orderA = indexA >= 0 ? indexA : Number.MAX_VALUE;
|
||||
const orderB = indexB >= 0 ? indexB : Number.MAX_VALUE;
|
||||
return orderA - orderB;
|
||||
});
|
||||
transceiver.setCodecPreferences(codecs);
|
||||
}
|
||||
},
|
||||
|
||||
adaptToNetworkCondition: async function (peerConnection) {
|
||||
const stats = await peerConnection.getStats();
|
||||
let packetLossRate = 0;
|
||||
let rtt = 0;
|
||||
|
||||
stats.forEach(stat => {
|
||||
if (stat.type === 'outbound-rtp' && stat.kind === 'video') {
|
||||
if (stat.packetsSent && stat.packetsLost) {
|
||||
packetLossRate = stat.packetsLost / stat.packetsSent;
|
||||
}
|
||||
}
|
||||
|
||||
if (stat.type === 'remote-inbound-rtp') {
|
||||
rtt = stat.roundTripTime;
|
||||
}
|
||||
});
|
||||
|
||||
let networkIcon = document.querySelector('#network_condition');
|
||||
networkIcon.classList.remove('excellent', 'good', 'bad');
|
||||
|
||||
peerConnection.getSenders().filter(s =>
|
||||
s.track && s.track.kind === 'video'
|
||||
).forEach(sender => {
|
||||
const parameters = sender.getParameters();
|
||||
|
||||
// Don't exceed original encoding
|
||||
if (!parameters.encodings || parameters.encodings.length === 0) {
|
||||
parameters.encodings = [{}];
|
||||
}
|
||||
|
||||
if (packetLossRate > 0.1 || rtt > 0.6) {
|
||||
networkIcon.classList.add('bad');
|
||||
parameters.encodings[0].maxBitrate = 250000; // 250 kbps
|
||||
parameters.encodings[0].scaleResolutionDownBy = 4; // 1/4 resolution
|
||||
} else if (packetLossRate > 0.05 || rtt > 0.3) {
|
||||
networkIcon.classList.add('good');
|
||||
parameters.encodings[0].maxBitrate = 500000; // 500 kbps
|
||||
parameters.encodings[0].scaleResolutionDownBy = 2; // 1/2 resolution
|
||||
} else {
|
||||
networkIcon.classList.add('excellent');
|
||||
parameters.encodings[0].maxBitrate = 1500000; // 1.5 Mbps
|
||||
parameters.encodings[0].scaleResolutionDownBy = 1; // Full resolution
|
||||
}
|
||||
|
||||
sender.setParameters(parameters);
|
||||
});
|
||||
},
|
||||
|
||||
cancelLobby: function (fullJid, id) {
|
||||
if (fullJid && id) {
|
||||
Visio_ajaxReject(fullJid, id);
|
||||
}
|
||||
|
||||
Visio_ajaxClear(); Dialog_ajaxClear(); Notif.snackbarClear();
|
||||
},
|
||||
|
||||
updateStartedAtCounters: function (startedAt) {
|
||||
document.querySelectorAll('span[data-started-at]').forEach(span => {
|
||||
var dateStartedAt = Date.parse(span.dataset.startedAt);
|
||||
var dateNow = new Date();
|
||||
|
||||
var seconds = Math.floor((dateNow - (dateStartedAt)) / 1000);
|
||||
var minutes = Math.floor(seconds / 60);
|
||||
var hours = Math.floor(minutes / 60);
|
||||
var days = Math.floor(hours / 24);
|
||||
|
||||
hours = hours - (days * 24);
|
||||
minutes = minutes - (days * 24 * 60) - (hours * 60);
|
||||
seconds = seconds - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);
|
||||
|
||||
span.innerHTML = hours > 0
|
||||
? hours + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0')
|
||||
: String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user