Advertisement
r3dglov3

WebCam Frame - Overlay

May 12th, 2021
943
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.17 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>OBS OVERLAY - WebCam Frame</title>
  6. <style>
  7. body{width:100vw;height:100vh;overflow:hidden;}
  8.  
  9. #camera{display:block;width:450px;height:253.13px;resize: both;min-height:150px;min-width:200px;max-width:80%;max-height:80%;overflow: auto;position:absolute;bottom:15%;right:12%;z-index: 5; text-align: center;}
  10. #camera img{display:block;width:100%;height:100%;margin:0 auto;}
  11. #camera{
  12. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 48' width='640' height='48'%3E%3Cstyle%3E tspan %7B white-space:pre %7D .shp0 %7B fill: %23de0a6e %7D %3C/style%3E%3Cpath id='midb' class='shp0' d='M278.34 28L615 28L615 34L278.34 34L278.34 28Z' /%3E%3Cpath id='br2midb' class='shp0' d='M296 29.44L280.22 14.56L247.34 14.56L247.34 28.87L281.53 28.87L296 29.44Z' /%3E%3Cpath id='br3midb' class='shp0' d='M591 28.44L606.78 13.56L639.66 13.56L639.66 27.87L605.47 27.87L591 28.44Z' /%3E%3Cpath id='br4midb' class='shp0' d='M0.07 0.66L11.69 4.59L16.59 23.84L7.68 28.95L2.58 8.93L0.07 0.66Z' /%3E%3Cpath id='midlfb' class='shp0' d='M8.34 19L251 19L251 29L8.34 29L8.34 19Z' /%3E%3Cpath id='sqmid1b' class='shp0' d='M124.66 35L134 35L134 48L124.66 48L124.66 35Z' /%3E%3Cpath id='sqmid2b' class='shp0' d='M111.66 35L121 35L121 48L111.66 48L111.66 35Z' /%3E%3Cpath id='sqmid3b' class='shp0' d='M98.66 35L108 35L108 48L98.66 48L98.66 35Z' /%3E%3Cpath id='sqmid0b' class='shp0' d='M85.66 35L95 35L95 48L85.66 48L85.66 35Z' /%3E%3C/svg%3E"),
  13.  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 510' width='32' height='510'%3E%3Cdefs%3E%3ClinearGradient id='grd1' gradientUnits='userSpaceOnUse' x1='4.656' y1='258.705' x2='27.344' y2='254.295'%3E%3Cstop offset='0' stop-color='%23de0a6e' /%3E%3Cstop offset='0.418' stop-color='%23de0a6e' /%3E%3Cstop offset='0.53' stop-color='%23de0a6e' /%3E%3Cstop offset='0.614' stop-color='%23de0a6e' /%3E%3Cstop offset='1' stop-color='%23de0a6e' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cstyle%3E tspan %7B white-space:pre %7D .shp0 %7B fill: %23de0a6e %7D .shp1 %7B fill: url(%23grd1);stroke: %23725454 %7D .shp2 %7B fill: %23b90a5c %7D %3C/style%3E%3Cpath id='r1' class='shp0' d='M4.34 0L15 0L15 89L4.34 89L4.34 0Z' /%3E%3Cpath id='r2' class='shp0' d='M10.37 71.51L20.29 95.18L20.29 144.5L10.75 144.5L10.75 93.21L10.37 71.51Z' /%3E%3Cpath id='br1' class='shp0' d='M4.34 421L15 421L15 510L4.34 510L4.34 421Z' /%3E%3Cpath id='br2' class='shp0' d='M10.37 438.49L20.29 414.82L20.29 365.5L10.75 365.5L10.75 416.79L10.37 438.49Z' /%3E%3Cpath id='rom' class='shp1' d='M15.66 174L16.34 174C22.42 174 27.34 178.92 27.34 185L27.34 328C27.34 334.08 22.42 339 16.34 339L15.66 339C9.58 339 4.66 334.08 4.66 328L4.66 185C4.66 178.92 9.58 174 15.66 174Z' /%3E%3Cpath id='romsmall' class='shp2' d='M15.99 182.25L16.01 182.25C21.65 182.25 26.22 186.82 26.22 192.46L26.22 320.54C26.22 326.18 21.65 330.75 16.01 330.75L15.99 330.75C10.35 330.75 5.78 326.18 5.78 320.54L5.78 192.46C5.78 186.82 10.35 182.25 15.99 182.25Z' /%3E%3Cpath id='up' class='shp0' d='M16.12 165.67C21.09 165.67 25.29 168.9 28.74 175.35L31.41 170.9C27.29 162.75 22.09 158.68 15.82 158.68C9.78 158.68 4.62 162.79 0.34 171.01L3.11 175.68C6.88 169.01 11.22 165.67 16.12 165.67L16.12 165.67Z' /%3E%3Cpath id='down' class='shp0' d='M16.12 346.33C21.09 346.33 25.29 343.1 28.74 336.65L31.41 341.1C27.29 349.25 22.09 353.32 15.82 353.32C9.78 353.32 4.62 349.21 0.34 340.99L3.11 336.32C6.88 342.99 11.22 346.33 16.12 346.33L16.12 346.33Z' /%3E%3C/svg%3E"),
  14.  url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 510' width='32' height='510'%3E%3Cdefs%3E%3ClinearGradient id='grd1' gradientUnits='userSpaceOnUse' x1='4.656' y1='255.705' x2='27.344' y2='251.295'%3E%3Cstop offset='0' stop-color='%23de0a6e' /%3E%3Cstop offset='0.418' stop-color='%23de0a6e' /%3E%3Cstop offset='0.53' stop-color='%23de0a6e' /%3E%3Cstop offset='0.614' stop-color='%23de0a6e' /%3E%3Cstop offset='1' stop-color='%23de0a6e' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cstyle%3E tspan %7B white-space:pre %7D .shp0 %7B fill: %23de0a6e %7D .shp1 %7B fill: url(%23grd1);stroke: %23725454 %7D .shp2 %7B fill: %23b90a5c %7D %3C/style%3E%3Cpath id='r1' class='shp0' d='M4.34 421L15 421L15 510L4.34 510L4.34 421Z' /%3E%3Cpath id='r2' class='shp0' d='M10.37 438.49L20.29 414.82L20.29 365.5L10.75 365.5L10.75 416.79L10.37 438.49Z' /%3E%3Cpath id='br1' class='shp0' d='M4.34 0L15 0L15 89L4.34 89L4.34 0Z' /%3E%3Cpath id='br2' class='shp0' d='M10.37 71.51L20.29 95.18L20.29 144.5L10.75 144.5L10.75 93.21L10.37 71.51Z' /%3E%3Cpath id='rom' class='shp1' d='M15.66 171L16.34 171C22.42 171 27.34 175.92 27.34 182L27.34 325C27.34 331.08 22.42 336 16.34 336L15.66 336C9.58 336 4.66 331.08 4.66 325L4.66 182C4.66 175.92 9.58 171 15.66 171Z' /%3E%3Cpath id='romsmall' class='shp2' d='M15.99 179.25L16.01 179.25C21.65 179.25 26.22 183.82 26.22 189.46L26.22 317.54C26.22 323.18 21.65 327.75 16.01 327.75L15.99 327.75C10.35 327.75 5.78 323.18 5.78 317.54L5.78 189.46C5.78 183.82 10.35 179.25 15.99 179.25Z' /%3E%3Cpath id='up' class='shp0' d='M16.12 344.33C21.09 344.33 25.29 341.1 28.74 334.65L31.41 339.1C27.29 347.25 22.09 351.32 15.82 351.32C9.78 351.32 4.62 347.21 0.34 338.99L3.11 334.32C6.88 340.99 11.22 344.33 16.12 344.33L16.12 344.33Z' /%3E%3Cpath id='down' class='shp0' d='M16.12 163.67C21.09 163.67 25.29 166.9 28.74 173.35L31.41 168.9C27.29 160.75 22.09 156.68 15.82 156.68C9.78 156.68 4.62 160.79 0.34 169.01L3.11 173.68C6.88 167.01 11.22 163.67 16.12 163.67L16.12 163.67Z' /%3E%3C/svg%3E"),
  15.  url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 93' width='620' height='93'%3E%3Cstyle%3E tspan %7B white-space:pre %7D .shp0 %7B fill: %23de0a6e %7D %3C/style%3E%3Cpath id='mid' class='shp0' d='M0 14L336.66 14L336.66 20L0 20L0 14Z' /%3E%3Cpath id='br2mid' class='shp0' d='M319 15.44L334.78 0.56L367.66 0.56L367.66 14.87L333.47 14.87L319 15.44Z' /%3E%3Cpath id='midlftop' class='shp0' d='M364 5L606.66 5L606.66 15L364 15L364 5Z' /%3E%3Cpath id='stripe01' class='shp0' d='M564.66 21L620 21L620 27L564.66 27L564.66 21Z' /%3E%3Cpath id='stripe02' class='shp0' d='M564.66 31L620 31L620 37L564.66 37L564.66 31Z' /%3E%3Cpath id='stripe03' class='shp0' d='M564.66 41L620 41L620 47L564.66 47L564.66 41Z' /%3E%3Cpath id='filtermid' class='shp0' d='M618.61 51.01L591.36 51.01C590.77 51.01 590.35 51.39 590.11 52.17C589.87 52.98 589.96 53.68 590.4 54.26L600.9 68.97L600.9 83.47C600.9 83.99 601.03 84.44 601.3 84.81L606.75 92.45C607.01 92.83 607.33 93.02 607.71 93.02C607.88 93.02 608.06 92.97 608.24 92.87C608.8 92.53 609.07 91.95 609.07 91.11L609.07 68.97L619.57 54.26C620.01 53.68 620.11 52.98 619.87 52.17C619.62 51.39 619.21 51.01 618.61 51.01L618.61 51.01Z' /%3E%3Cpath id='sqmid1' class='shp0' d='M481 21L490.34 21L490.34 34L481 34L481 21Z' /%3E%3Cpath id='sqmid2' class='shp0' d='M494 21L503.34 21L503.34 34L494 34L494 21Z' /%3E%3Cpath id='sqmid3' class='shp0' d='M507 21L516.34 21L516.34 34L507 34L507 21Z' /%3E%3C/svg%3E");background-repeat:no-repeat;background-size:97% auto,auto 90%, auto 90%, 98% auto;background-position:bottom left,left, right, top right;}
  16.  
  17. #cameraheader {padding: 10px;cursor: move;z-index: 20;}
  18. #cameraheader span.cam{text-align:center;padding:.4em;transform:translateY(-10px);float:right;background-color:#F06;color:#fff;font-family:Tahoma, Geneva, sans-serif;}
  19. #cameraheader a span.ratio-16{text-align:center;padding:.4em;transform:translate(-5px, -10px);float:left;background-color:#F06;color:#fff;font-family:Tahoma, Geneva, sans-serif;}
  20. #cameraheader a span.ratio-16:hover{background-color:#F6C;}
  21.  
  22. .tab #camera:target{display:block;width:680px;height:382.50px;resize: both;overflow: auto;z-index: 5; text-align: center;}
  23.  
  24. #camera.cam2:target{display:block;width:680px;height:510px;resize: both;overflow: auto;z-index: 5; text-align: center;}
  25. .tab span{opacity:0;}
  26. .tab:hover span{opacity:1;}
  27. #camera{overflow:hidden;}
  28.  
  29.  
  30.  
  31. .svg-icon-refresh {width: 2em;height: 2em;}
  32. .svg-icon-refresh path,
  33. .svg-icon-refresh polygon,
  34. .svg-icon-refresh rect {fill: #ffffff;}
  35. .svg-icon-refresh circle {stroke: #ffffff;stroke-width: 1;}
  36.  
  37. .svg-icon-bigger {width: 2em;height: 2em;}
  38. .svg-icon-bigger path,
  39. .svg-icon-bigger polygon,
  40. .svg-icon-bigger rect {fill: #ffffff;}
  41. .svg-icon-bigger circle {stroke: #ffffff;stroke-width: 1;}
  42.  
  43. .svg-icon-smaller {width: 1.5em;height: 1.5em;padding:.2700em;}
  44. .svg-icon-smaller path,
  45. .svg-icon-smaller polygon,
  46. .svg-icon-smaller rect {fill: #ffffff;}
  47. .svg-icon-smaller circle {stroke: #ffffff;stroke-width: 1;}
  48.  
  49. .svg-icon-camera {width: 2em;height: 2em;}
  50. .svg-icon-camera path,
  51. .svg-icon-camera polygon,
  52. .svg-icon-camera rect {fill: #ffffff;}
  53. .svg-icon-camera circle {stroke: #ffffff;stroke-width: 1;}
  54.  
  55. #q{display:block;width:30px;height:30px;bottom:10px;left:20px;margin-bottom:-5px;background-color:rgb(222 10 110);position:absolute;z-index:30;}
  56. #q div.star{display:block;width:30px;height:30px;text-align:center;margin:0 auto;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath d='M15.94,10.179l-2.437-0.325l1.62-7.379c0.047-0.235-0.132-0.458-0.372-0.458H5.25c-0.241,0-0.42,0.223-0.373,0.458l1.634,7.376L4.06,10.179c-0.312,0.041-0.446,0.425-0.214,0.649l2.864,2.759l-0.724,3.947c-0.058,0.315,0.277,0.554,0.559,0.401l3.457-1.916l3.456,1.916c-0.419-0.238,0.56,0.439,0.56-0.401l-0.725-3.947l2.863-2.759C16.388,10.604,16.254,10.22,15.94,10.179M10.381,2.778h3.902l-1.536,6.977L12.036,9.66l-1.655-3.546V2.778z M5.717,2.778h3.903v3.335L7.965,9.66L7.268,9.753L5.717,2.778zM12.618,13.182c-0.092,0.088-0.134,0.217-0.11,0.343l0.615,3.356l-2.938-1.629c-0.057-0.03-0.122-0.048-0.184-0.048c-0.063,0-0.128,0.018-0.185,0.048l-2.938,1.629l0.616-3.356c0.022-0.126-0.019-0.255-0.11-0.343l-2.441-2.354l3.329-0.441c0.128-0.017,0.24-0.099,0.295-0.215l1.435-3.073l1.435,3.073c0.055,0.116,0.167,0.198,0.294,0.215l3.329,0.441L12.618,13.182z'%3E%3C/path%3E%3C/svg%3E");animation: Shine 3s infinite}
  57. #q:hover{background-color:#222;}
  58. .tab #q .info{display:block;width:50%;height:0px;padding:0;text-align:center;background-color:rgb(222 10 110);position:fixed;bottom:10px;left:60px;z-index:100;transition: .4s ease-in-out;opacity:0;overflow:hidden;border-radius:5px;}
  59. .tab  #q:hover .info{display:block;width:40%;height:auto;padding:.5em 2.3em .5em;text-align:left;background-color:rgb(222 10 110);position:fixed;bottom:10px;left:60px;opacity:1;clip-path: polygon(3% 0, 98% 0, 100% 50%, 98% 100%, 3% 100%, 0% 50%);font-size: calc(10px + 6 * ((100vw - 320px) / 680));color:#fff;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-weight:100;}
  60. .info strong{font-weight:400;}
  61.  
  62. @keyframes Shine  {
  63.     0% {transform:rotateY(0deg);}
  64.     50% {transform:rotateY(160deg);fill: #fff;stroke:#fff;}
  65.     100% {transform:rotateY(0deg);}}
  66.  
  67. </style>
  68. </head>
  69.  
  70. <body>
  71.  
  72. <div class="tab">
  73.    <div id="camera" class="cam2">
  74.    <div id="cameraheader">
  75.    <span class="cam"><svg class="svg-icon-camera" viewBox="0 0 20 20">
  76.                             <path d="M17.919,4.633l-3.833,2.48V6.371c0-1-0.815-1.815-1.816-1.815H3.191c-1.001,0-1.816,0.814-1.816,1.815v7.261c0,1.001,0.815,1.815,1.816,1.815h9.079c1.001,0,1.816-0.814,1.816-1.815v-0.739l3.833,2.478c0.428,0.226,0.706-0.157,0.706-0.377V5.01C18.625,4.787,18.374,4.378,17.919,4.633 M13.178,13.632c0,0.501-0.406,0.907-0.908,0.907H3.191c-0.501,0-0.908-0.406-0.908-0.907V6.371c0-0.501,0.407-0.907,0.908-0.907h9.079c0.502,0,0.908,0.406,0.908,0.907V13.632zM17.717,14.158l-3.631-2.348V8.193l3.631-2.348V14.158z"></path>
  77.                         </svg></span>
  78.    <a href="#camera"><span class="ratio-16"><svg class="svg-icon-bigger" viewBox="0 0 20 20">
  79.                             <path fill="none" d="M3.015,4.779h1.164V3.615H3.015V4.779z M18.73,1.869H1.269c-0.322,0-0.582,0.26-0.582,0.582v15.133
  80.                                 c0,0.322,0.26,0.582,0.582,0.582H18.73c0.321,0,0.582-0.26,0.582-0.582V2.451C19.312,2.129,19.052,1.869,18.73,1.869z
  81.                                  M18.148,16.42c0,0.322-0.261,0.582-0.582,0.582H2.433c-0.322,0-0.582-0.26-0.582-0.582V6.525h16.297V16.42z M18.148,5.361H1.851
  82.                                 V3.615c0-0.322,0.26-0.582,0.582-0.582h15.133c0.321,0,0.582,0.26,0.582,0.582V5.361z M7.671,4.779h1.165V3.615H7.671V4.779z
  83.                                  M5.344,4.779h1.164V3.615H5.344V4.779z"></path>
  84.                         </svg></span></a>
  85.    <a href="#camera.cam2"><span class="ratio-16"><svg class="svg-icon-smaller" viewBox="0 0 20 20">
  86.                             <path fill="none" d="M3.015,4.779h1.164V3.615H3.015V4.779z M18.73,1.869H1.269c-0.322,0-0.582,0.26-0.582,0.582v15.133
  87.                                 c0,0.322,0.26,0.582,0.582,0.582H18.73c0.321,0,0.582-0.26,0.582-0.582V2.451C19.312,2.129,19.052,1.869,18.73,1.869z
  88.                                  M18.148,16.42c0,0.322-0.261,0.582-0.582,0.582H2.433c-0.322,0-0.582-0.26-0.582-0.582V6.525h16.297V16.42z M18.148,5.361H1.851
  89.                                 V3.615c0-0.322,0.26-0.582,0.582-0.582h15.133c0.321,0,0.582,0.26,0.582,0.582V5.361z M7.671,4.779h1.165V3.615H7.671V4.779z
  90.                                  M5.344,4.779h1.164V3.615H5.344V4.779z"></path>
  91.                         </svg></span></a>
  92.    <a href="javascript:window.location.reload(true)"><span class="ratio-16"><svg class="svg-icon-refresh" viewBox="0 0 20 20">
  93.                             <path d="M12.319,5.792L8.836,2.328C8.589,2.08,8.269,2.295,8.269,2.573v1.534C8.115,4.091,7.937,4.084,7.783,4.084c-2.592,0-4.7,2.097-4.7,4.676c0,1.749,0.968,3.337,2.528,4.146c0.352,0.194,0.651-0.257,0.424-0.529c-0.415-0.492-0.643-1.118-0.643-1.762c0-1.514,1.261-2.747,2.787-2.747c0.029,0,0.06,0,0.09,0.002v1.632c0,0.335,0.378,0.435,0.568,0.245l3.483-3.464C12.455,6.147,12.455,5.928,12.319,5.792 M8.938,8.67V7.554c0-0.411-0.528-0.377-0.781-0.377c-1.906,0-3.457,1.542-3.457,3.438c0,0.271,0.033,0.542,0.097,0.805C4.149,10.7,3.775,9.762,3.775,8.76c0-2.197,1.798-3.985,4.008-3.985c0.251,0,0.501,0.023,0.744,0.069c0.212,0.039,0.412-0.124,0.412-0.34v-1.1l2.646,2.633L8.938,8.67z M14.389,7.107c-0.34-0.18-0.662,0.244-0.424,0.529c0.416,0.493,0.644,1.118,0.644,1.762c0,1.515-1.272,2.747-2.798,2.747c-0.029,0-0.061,0-0.089-0.002v-1.631c0-0.354-0.382-0.419-0.558-0.246l-3.482,3.465c-0.136,0.136-0.136,0.355,0,0.49l3.482,3.465c0.189,0.186,0.568,0.096,0.568-0.245v-1.533c0.153,0.016,0.331,0.022,0.484,0.022c2.592,0,4.7-2.098,4.7-4.677C16.917,9.506,15.948,7.917,14.389,7.107 M12.217,15.238c-0.251,0-0.501-0.022-0.743-0.069c-0.212-0.039-0.411,0.125-0.411,0.341v1.101l-2.646-2.634l2.646-2.633v1.116c0,0.174,0.126,0.318,0.295,0.343c0.158,0.024,0.318,0.034,0.486,0.034c1.905,0,3.456-1.542,3.456-3.438c0-0.271-0.032-0.541-0.097-0.804c0.648,0.719,1.022,1.659,1.022,2.66C16.226,13.451,14.428,15.238,12.217,15.238"></path>
  94.                         </svg></span></a>
  95.    </div>
  96.    
  97.    
  98.    <div id="q">
  99.    <div class="star"></div>
  100.   <div class="info">
  101. <strong>Icons:</strong> - window make frame bigger, small window makes frame smaller, arrows, refresh position and revert to default<br>
  102. <strong>Manually resize frame:</strong> - Hold Click & Drag the bottom right corner<br>
  103. <strong>Move the frame:</strong> - Hold Click & Drag the camera icon. Will drag the frame on screen
  104.  </div>
  105.  </div>
  106.      
  107.   </div>
  108.  
  109.  
  110. </div>
  111.  
  112.  
  113.  
  114.  
  115.   <script>
  116. //Make the DIV element draggagle:
  117. dragElement(document.getElementById("camera"));
  118.  
  119. function dragElement(elmnt) {
  120.   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  121.   if (document.getElementById(elmnt.id + "header")) {
  122.     /* if present, the header is where you move the DIV from:*/
  123.     document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  124.   } else {
  125.     /* otherwise, move the DIV from anywhere inside the DIV:*/
  126.     elmnt.onmousedown = dragMouseDown;
  127.   }
  128.  
  129.   function dragMouseDown(e) {
  130.     e = e || window.event;
  131.     e.preventDefault();
  132.     // get the mouse cursor position at startup:
  133.     pos3 = e.clientX;
  134.     pos4 = e.clientY;
  135.     document.onmouseup = closeDragElement;
  136.     // call a function whenever the cursor moves:
  137.     document.onmousemove = elementDrag;
  138.   }
  139.  
  140.   function elementDrag(e) {
  141.     e = e || window.event;
  142.     e.preventDefault();
  143.     // calculate the new cursor position:
  144.     pos1 = pos3 - e.clientX;
  145.     pos2 = pos4 - e.clientY;
  146.     pos3 = e.clientX;
  147.     pos4 = e.clientY;
  148.     // set the element's new position:
  149.     elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  150.     elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  151.   }
  152.  
  153.   function closeDragElement() {
  154.     /* stop moving when mouse button is released:*/
  155.     document.onmouseup = null;
  156.     document.onmousemove = null;
  157.   }
  158. }
  159. </script>
  160.  
  161. </body>
  162. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement