index.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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. </script>
  33. <h2 id="ran">
  34. Random text
  35. </h2>
  36. <script>
  37. let el = document.querySelector("h2#ran");
  38. let randomnumber = Math.random() * 1000000;
  39. randomnumber = randomnumber.toString();
  40. el.textContent = "Random Number: " + randomnumber;
  41. </script>
  42. <script>
  43. function parseCommand(cmdObject){
  44. switch(cmdObject.cmd){
  45. case "reload":
  46. location.reload();
  47. break;
  48. case "stop":
  49. video.pause();
  50. break;
  51. case "start":
  52. video.play();
  53. break;
  54. case "vol":
  55. if(cmdObject.volume)
  56. video.volume = Number.parseFloat(cmdObject.volume)
  57. break;
  58. case "src":
  59. if(cmdObject.src){
  60. video.src=cmdObject.src
  61. }
  62. break;
  63. }
  64. }
  65. let ws = new WebSocket("ws://localhost:8045");
  66. ws.onmessage = (msg)=>{
  67. let data = msg.data;
  68. let commandArray = JSON.parse(msg.data)
  69. if(commandArray instanceof Array){
  70. for(let it of commandArray){
  71. parseCommand(it);
  72. }
  73. }
  74. };
  75. video.addEventListener("ended", ()=>{
  76. video.src = "";
  77. ws.send('{action:"end"}');
  78. })
  79. </script>
  80. <script>
  81. setInterval(()=>{
  82. if(!ws || ws.readyState != 1){
  83. location.reload();
  84. }
  85. }, 5000);
  86. </script>
  87. </body>
  88. </html>