Skip to content

Instantly share code, notes, and snippets.

@M1XZG

M1XZG/OBS Widget.html

Last active January 3, 2024 18:57
Show Gist options
  • Save M1XZG/5eb7abca494ae421ae3b134c97f30e43 to your computer and use it in GitHub Desktop.
Save M1XZG/5eb7abca494ae421ae3b134c97f30e43 to your computer and use it in GitHub Desktop.
Download ZIP
My setup for VRCDN with OBS
Raw
my-obs-vrcdn-config.md

My OBS Configuration

How I have OBS configured to use VRCDN.

Basic stream conifguration:

Settings -> Stream

My stream service config

Settings -> Output -> Streaming

While you can run the Encoder bitrate at a max of 6000kbs, the general recommendation seems to be 3500kbs is good for large VRC lobbies, or for smaller ones you could use 4500kbs. Save 6000kbs for streaming to twitch/kick/etc.

My stream settings

Settings -> Output -> Audio

  • Set everything to 320kbs

My audio settings

Set up everything else as set out in the VRCDN Getting Started Guide.

OBS viewer count widget

I've made this simple viewer count widget to display on your stream if you like.

Download and save OBS Widget.html Somewhere on your PC, edit this and in the script section replace [YOUR STREAM NAME] with your actual stream name. And that's it, it'll work now.

The default is to load the number of viewers/listeners then update every 30 seconds. I wouldn't update any quicker as this could impact the API more then it's worth.

You can see how the counter looks in my stream view

Raw
OBS Widget.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
margin: 5;
padding: 5;
}
#container {
width: 90vw;
position: relative;
background: #000000;
animation: slide-in 3s forwards;
transform: translateX(-100%);
overflow: visible;
padding: 10vh 0;
border-bottom-right-radius: 10vh;
border-top-right-radius: 10vh;
}
#content {
background: #000000;
text-align: center;
margin-right: 10vh;
border-bottom-right-radius: 10vh;
border-top-right-radius: 10vh;
padding-top:5vh;
padding-bottom:5vh;
}
#text {
text-shadow: 1vh 1vh #c0392b;
color: white;
font-weight: bold;
font-family: 'Roboto', sans-serif;
font-size: 40vh;
white-space: nowrap;
}
.fa-headphones {
color: #c0392b;
margin-right: 0.25em;
}
@keyframes slide-in {
100% { transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<span id="text">
<a class="fa fa-headphones"></a>= <a id="output"></a>
</span>
</div>
</div>
<script>
function fetchData() {
fetch('https://api.vrcdn.live/v1/viewers/[YOUR STREAM NAME]')
.then(response => response.json())
.then(data => {
var total = data.viewers.reduce((ac, cv) => ac + cv.total, 0);
document.getElementById('output').innerHTML = total;
})
.catch(error => console.error(error))
}
window.onload = function() {
fetchData(); // Call initially to populate data immediately
setInterval(fetchData, 30000); // Call every 30 seconds
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment