index.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  6. <title>OBS Twitch Points Alerts</title>
  7. <meta name='viewport' content='width=device-width, initial-scale=1'>
  8. <!-- <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  9. <script src='main.js'></script> -->
  10. <style>
  11. * {
  12. color: white;
  13. }
  14. video {
  15. background-color: rgba(0, 0, 0, 0);
  16. height: 100vh;
  17. z-index: -100;
  18. }
  19. h2 {
  20. position: absolute;
  21. top: 5em;
  22. left: 5em;
  23. z-index: 100;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <video>
  29. <script>
  30. let video = document.querySelector("video");
  31. video.volume = 0.2;
  32. // setTimeout(()=>{
  33. // video.play()
  34. // }, 1500)
  35. video.addEventListener("ended", ()=>{
  36. video.src = "";
  37. })
  38. </script>
  39. <h2 id="ran">
  40. Random text
  41. </h2>
  42. <script>
  43. let el = document.querySelector("h2#ran");
  44. let randomnumber = Math.random() * 1000000;
  45. randomnumber = randomnumber.toString();
  46. el.textContent = "Random Number: " + randomnumber;
  47. </script>
  48. <script>
  49. function parseCommand(cmdObject){
  50. switch(cmdObject.cmd){
  51. case "reload":
  52. location.reload();
  53. break;
  54. case "stop":
  55. video.pause();
  56. break;
  57. case "start":
  58. video.play();
  59. break;
  60. case "vol":
  61. if(cmdObject.volume)
  62. video.volume = Number.parseFloat(cmdObject.volume)
  63. break;
  64. case "src":
  65. if(cmdObject.src){
  66. video.src=cmdObject.src
  67. }
  68. break;
  69. }
  70. }
  71. let ws = new WebSocket("ws://localhost:8045");
  72. ws.onmessage = (msg)=>{
  73. let data = msg.data;
  74. let commandArray = JSON.parse(msg.data)
  75. if(commandArray instanceof Array){
  76. for(let it of commandArray){
  77. parseCommand(it);
  78. }
  79. }
  80. };
  81. </script>
  82. <script>
  83. setInterval(()=>{
  84. if(!ws || ws.readyState != 1){
  85. location.reload();
  86. }
  87. }, 5000);
  88. </script>
  89. </body>
  90. </html>