Timer overlay while recording a fullscreen app like Games with OBS Studio

mehediofbd

New Member
I wanted to see how long I've been recording while I'm gaming like Windows system app "Xbox Game Bar". I found a solution here.
This seems to be the only solution I've found from Google search and it's working so far.
I just wanna know, is there any other way(easy or hard) to do it ? If there is, any help is very much appreciated. Thank you.
 

mehediofbd

New Member
I wanted to see how long I've been recording while I'm gaming like Windows system app "Xbox Game Bar". I found a solution here.
This seems to be the only solution I've found from Google search and it's working so far.
I just wanna know, is there any other way(easy or hard) to do it ? If there is, any help is very much appreciated. Thank you.
Sorry, it just shows the "Timer" in the video. NOT ON THE SCREEN AS OVERLAY. So, Help is still needed...
 

.norman.

Member
Sorry, it just shows the "Timer" in the video. NOT ON THE SCREEN AS OVERLAY. So, Help is still needed...


try this, copy the following code and save as an .html file (ex: timer.html) then add that file as a browser source to your scene.

Code:
<!DOCTYPE html>
<html>
  <head>
     <style>
      #timer-container {
       width: 400px;
        margin: 10% auto;
        padding: 5px 0;
        color: #e7eafb;
        text-align: center;
        background-color: #202020;
        box-shadow: 1px 0px 4px 2px #9c9a9a;
        border-radius: 20px;
      }
      #timer {
        font-size: 100px;
        margin-bottom: 10px;
      }
    
    </style>
  </head>
  <body>
    <div id="timer-container">
     <div id="timer">
      </div>
     </div>
    <script>
    start();
   
      var timer1 = document.getElementById("timer");
      var timeoutId = null;
      var ms = 0;
      var sec = 0;
      var min = 0;
      var hour = 0;
      function start() {
         timeoutId = setTimeout(function() {
          ms = parseInt(ms);
          sec = parseInt(sec);
          min = parseInt(min);
          hour = parseInt(hour);
          ms++;
          if (ms == 100) {
            sec = sec + 1;
            ms = 0;
          }
          if (sec == 60) {
            min = min + 1;
            sec = 0;
          }
          if (min == 60) {
            hour = hour +1;
            min = 0;
          }
          if (ms < 10) {
            ms = '0' + ms;
          }
          if (sec < 10) {
            sec = '0' + sec;
          }
          if (min < 10) {
            min = '0' + min;
          }
          timer1.innerHTML =hour +":"+ min + ':' + sec;
          start();
        }
        , 10);
      }
 
    </script>
  </body>
</html>
 

.norman.

Member
as i re-read your message, it occurs to me that i may have misunderstood what you wanted. the above will add an "overlay" to the resulting video recording or stream in obs. I think you are looking for something that will sit above your game as a timer that does not display in the game. while i am sure that there is a solution for that, i am not familiar with what it would be, sorry for any confusion.
 

mehediofbd

New Member
as i re-read your message, it occurs to me that i may have misunderstood what you wanted. the above will add an "overlay" to the resulting video recording or stream in obs. I think you are looking for something that will sit above your game as a timer that does not display in the game. while i am sure that there is a solution for that, i am not familiar with what it would be, sorry for any confusion.
Sorry for late reply & Thanks for trying. Anyway, if you find any solution for this on the internet it'd be really helpful if you pass it along. I searched for it but no joy. Some of them said, "It's impossible for OBS studio to stay as overlay over any 3D Apps like Games, as those Apps take exclusive control over a whole screen." But my defense is that, XBOX Game Bar stays as overlay! Can't OBS Studio manage to do that ?
 
Top