apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Option to auto-mute your video by default

Browse Source
This commit is contained in:
Noah 2023-08-11 18:56:22 -07:00
parent 4ee6c106d2
commit 63889b6c6a
3 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/static/css/bulma-prefers-dark.css
View File

@ -28,6 +28,10 @@
/* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
color: #b5b5b5 !important;
}
.is-outlined.is-dark {
border-color: #b5b5b5 !important;
color: #b5b5b5 !important;
}
a.has-text-dark:focus,
a.has-text-dark:hover {

20
web/static/js/BareRTC.js
View File

@ -116,6 +116,7 @@ const app = Vue.createApp({
elem: null, // <video id="localVideo"> element
stream: null, // MediaStream object
muted: false, // our outgoing mic is muted, not by default
autoMute: false, // mute our mic automatically when going live (user option)
nsfw: false, // user has flagged their camera to be NSFW
mutual: false, // user wants viewers to share their own videos
mutualOpen: false, // user wants to open video mutually
@ -506,6 +507,9 @@ const app = Vue.createApp({
if (localStorage.videoMutualOpen === "true") {
this.webcam.mutualOpen = true;
}
if (localStorage.videoAutoMute === "true") {
this.webcam.autoMute = true;
}
},
signIn() {
@ -1408,6 +1412,22 @@ const app = Vue.createApp({
// Save our mutuality prefs.
localStorage.videoMutual = this.webcam.mutual;
localStorage.videoMutualOpen = this.webcam.mutualOpen;
localStorage.videoAutoMute = this.webcam.autoMute;
// Auto-mute our camera? Two use cases:
// 1. The user marked their cam as muted but then changed video device,
// so we set the mute to match their preference as shown on their UI.
// 2. The user opted to auto-mute their camera from the get to on their
// NSFW broadcast modal popup.
if (this.webcam.muted || this.webcam.autoMute) {
// Mute their audio tracks.
this.webcam.stream.getAudioTracks().forEach(track => {
track.enabled = false;
});
// Set their front-end mute toggle to match (in case of autoMute).
this.webcam.muted = true;
}
// Tell backend the camera is ready.
this.sendMe();

22
web/templates/chat.html
View File

@ -355,15 +355,24 @@
<p class="card-header-title has-text-light">Broadcast my webcam</p>
</header>
<div class="card-content">
<p class="block">
<p class="block mb-1">
You can turn on your webcam and enable others in the room to connect to yours.
The controls to stop, <i class="fa fa-microphone-slash"></i> mute audio, and
<i class="fa fa-eye"></i> see who is watching will be at the top of the page.
The controls to <i class="fa fa-stop has-text-danger"></i> stop and <i class="fa fa-microphone-slash has-text-danger"></i> mute audio
will be at the top of the page.
</p>
<div class="field">
<label class="checkbox">
<input type="checkbox"
v-model="webcam.autoMute">
Start with my microphone on mute by default
</label>
</div>
<p class="block mb-1">
If your camera will be featuring "<abbr title="Not Safe For Work">Explicit</abbr>" or sexual content, please mark it as such by
clicking on the <i class="fa fa-fire has-text-danger"></i> button or checking the box below to start with it enabled.
If your camera will be featuring "<abbr title="Not Safe For Work">Explicit</abbr>" or sexual content, please
mark it as such by clicking on the "<small><i class="fa fa-fire mr-1 has-text-danger"></i> Explicit</small>"
button at the top of the page, or check the box below to start with it enabled.
</p>
<div class="field">
@ -519,7 +528,8 @@
'is-danger': webcam.nsfw}"
@click.prevent="webcam.nsfw = !webcam.nsfw; sendMe()"
title="Toggle the NSFW setting for your camera broadcast">
<i class="fa fa-fire mr-1"></i> Explicit
<i class="fa fa-fire mr-1"
:class="{'has-text-danger': !webcam.nsfw}"></i> Explicit
</button>
</div>
<div class="column is-narrow pl-1">