2017年5月20日 星期六

自製 Mac 版本的 OBS Datetime 插件

除了用 OBS 來進行 Facebook Live 錄影之外,我也會用它來拍下 USB 鏡頭畫面,就像閉路電視一樣,用來監察家中的情況。

用了一段時間,認為在畫面中加入時間會記錄得更好。在網上找到一個 Datetime 插件,它只有 Windows 版本;我這個 Mac 人沒有份兒,只好自行開發。看過網上的文件,要搞一大輪才做到簡單的 Datetime 插件,而且 Mac 版 OBS 真的不支援;本想放棄,但看到可以載入網頁作為訊號源,靈機一觸,要是用 Javascript 開發 Datetime 插件倒是十分容易,於是寫出了以下程式:
<!-- ----------------------------------------------------- -->
<!--  OBS Datetime Overlay                                 -->
<!-- ----------------------------------------------------- -->
<!--  Platform: Javascript + OBS                           -->
<!--  Copyright 2017 Pacess Studio.  All rights reserved.  -->
<!-- ----------------------------------------------------- -->
<html>
   <head>
      <title>OBS Datetime Overlay</title>

      <style>
         html  {
            margin: 0px;
            background-color: #000000;
         }
         body  {
            margin: 2px 0px 0px 10px;
         }

         #datetime  {
            color: #ffffff;
            font-family: "Serif", "Arial";
            font-size: 10px;
         }
      </style>
   </head>
   <body>
      <div id="datetime"></div>

      <script>
         function updateTimestamp()  {
            var currentDate = new Date(); 
            var year = currentDate.getFullYear();
            var month = currentDate.getMonth()+1;
            var day = currentDate.getDate();
            var hour = currentDate.getHours()
            var minute = currentDate.getMinutes()
            var second = currentDate.getSeconds()

            if (month < 10)  {month = "0"+month;}
            if (day < 10)  {day = "0"+day;}
            if (hour < 10)  {hour = "0"+hour;}
            if (minute < 10)  {minute = "0"+minute;}
            if (second < 10)  {second = "0"+second;}

            var datetime = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
            document.getElementById("datetime").innerHTML = datetime;
         }

         updateTimestamp();
         setInterval(updateTimestamp, 1000);
      </script>
   </body>
</html>

沒有留言: