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

Popup alert to explain QR codes over webcams

Browse Source
This commit is contained in:
Noah 2025-05-13 21:29:08 -07:00
parent d08a429fb8
commit d5100bae59
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -3408,7 +3408,8 @@ export default {
@mute-video="muteMe()" @mute-video="muteMe()"
@popout="popoutVideo" @popout="popoutVideo"
@open-profile="showProfileModal" @open-profile="showProfileModal"
@set-volume="setVideoVolume"> @set-volume="setVideoVolume"
@modal-alert="modalAlert">
</VideoFeed> </VideoFeed>
<!-- Others' videos --> <!-- Others' videos -->
@ -3428,7 +3429,8 @@ export default {
@popout="popoutVideo" @popout="popoutVideo"
@close-video="expresslyCloseVideo" @close-video="expresslyCloseVideo"
@set-volume="setVideoVolume" @set-volume="setVideoVolume"
@open-profile="showProfileModal"> @open-profile="showProfileModal"
@modal-alert="modalAlert">
</VideoFeed> </VideoFeed>
<!-- Debugging - copy a lot of these to simulate more videos --> <!-- Debugging - copy a lot of these to simulate more videos -->

22
src/components/VideoFeed.vue
View File

@ -113,6 +113,21 @@ export default {
this.$emit('set-volume', this.username, this.volume); this.$emit('set-volume', this.username, this.volume);
}, 200); }, 200);
}, },
// Show info about the watermark when the corner one is clicked.
showWatermarkInfo() {
this.$emit('modal-alert', {
icon: "fa-solid fa-qrcode",
title: "What are the QR codes on webcams?",
message: "This QR code is a safety feature to deter people from wanting to screen record webcams on chat. " +
"The QR code contains the current viewer's username, the website's name, and the current date/time. The " +
"idea is that if a webcam is recorded and then leaked online, the QR code would connect it directly back to who exactly " +
"recorded it, and when.\n\n" +
"There are two QR codes on each video: the one in the bottom-right corner is intentionally made visible and obvious " +
"to everybody, and a second (subtle) copy of the code spans across the center/middle of the video and pulsates in " +
"transparency over time.",
});
}
} }
} }
</script> </script>
@ -132,8 +147,8 @@ export default {
<!-- Watermark layer --> <!-- Watermark layer -->
<div v-if="watermarkImage"> <div v-if="watermarkImage">
<img :src="watermarkImage" class="watermark"> <img :src="watermarkImage" class="watermark" oncontextmenu="return false">
<img :src="watermarkImage" class="corner-watermark seethru invert-color"> <img :src="watermarkImage" class="corner-watermark seethru invert-color" @click="showWatermarkInfo()" oncontextmenu="return false">
</div> </div>
<!-- Caption --> <!-- Caption -->
@ -236,6 +251,7 @@ video {
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
max-height: 20%; max-height: 20%;
cursor: pointer;
} }
.invert-color { .invert-color {
filter: invert(100%); filter: invert(100%);
@ -244,7 +260,7 @@ video {
/* Animate the primary watermark to pulsate in opacity */ /* Animate the primary watermark to pulsate in opacity */
@keyframes subtle-pulsate { @keyframes subtle-pulsate {
0% { opacity: 0.02; } 0% { opacity: 0.02; }
50% { opacity: 0.04; } 50% { opacity: 0.06; }
100% { opacity: 0.02; } 100% { opacity: 0.02; }
} }
</style> </style>