cam-recorder-js/index.html at main · thiagotmoura/cam-recorder-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
  <head>
    <title>Media Recorder in Javascript</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
    href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
    rel="stylesheet">
  </head>
  <body>

    <main data-cam="cam-recorder">
      <!-- <video src=""></video> -->
      <video id="gum" playsinline autoplay muted></video>
      <section class="area area__safe">Segura</section>
      <section class="area area__public">Pública</section>

      <section class="actions">
        <!-- flash -->
        <svg
          id="flash"
          class="flash"
          width="40"
          height="40"
          viewBox="0 0 40 40"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M26.418 6.29753C26.5607 5.83986 26.3584 5.34536 25.936 5.11877C25.5136 4.89217 24.9897 4.99724 24.6874 5.36921L12.224 20.7008C11.9807 21.0002 11.9312 21.4129 12.097 21.7613C12.2628 22.1097 12.6142 22.3316 13 22.3316H17.1256L13.5819 33.7025C13.4393 34.1601 13.6415 34.6546 14.064 34.8812C14.4864 35.1078 15.0102 35.0028 15.3126 34.6308L27.776 19.2988C28.0193 18.9994 28.0688 18.5867 27.903 18.2383C27.7372 17.8899 27.3858 17.668 27 17.668H22.8745L26.418 6.29753Z"
            stroke="white"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>

        <!-- botão gravar -->
        <svg
          class="record"
          id="start"
          width="88"
          height="88"
          viewBox="0 0 88 88"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M44 88C68.3005 88 88 68.3005 88 44C88 19.6995 68.3005 0 44 0C19.6995 0 0 19.6995 0 44C0 68.3005 19.6995 88 44 88Z"
            fill="white"
          />
          <path
            d="M44 85C66.6437 85 85 66.6437 85 44C85 21.3563 66.6437 3 44 3C21.3563 3 3 21.3563 3 44C3 66.6437 21.3563 85 44 85Z"
            fill="white"
            stroke="black"
            stroke-width="2"
          />
          <path
            d="M20.1805 43.946H22.2525V47.922C21.7205 48.3233 21.1045 48.6313 20.4045 48.846C19.7045 49.0607 18.9998 49.168 18.2905 49.168C17.2731 49.168 16.3585 48.9533 15.5465 48.524C14.7345 48.0853 14.0951 47.4833 13.6285 46.718C13.1711 45.9433 12.9425 45.0707 12.9425 44.1C12.9425 43.1293 13.1711 42.2613 13.6285 41.496C14.0951 40.7213 14.7391 40.1193 15.5605 39.69C16.3818 39.2513 17.3058 39.032 18.3325 39.032C19.1911 39.032 19.9705 39.1767 20.6705 39.466C21.3705 39.7553 21.9585 40.1753 22.4345 40.726L20.9785 42.07C20.2785 41.3327 19.4338 40.964 18.4445 40.964C17.8191 40.964 17.2638 41.0947 16.7785 41.356C16.2931 41.6173 15.9151 41.986 15.6445 42.462C15.3738 42.938 15.2385 43.484 15.2385 44.1C15.2385 44.7067 15.3738 45.248 15.6445 45.724C15.9151 46.2 16.2885 46.5733 16.7645 46.844C17.2498 47.1053 17.8005 47.236 18.4165 47.236C19.0698 47.236 19.6578 47.096 20.1805 46.816V43.946ZM30.6033 49L28.7133 46.27H28.6013H26.6273V49H24.3593V39.2H28.6013C29.4693 39.2 30.2206 39.3447 30.8553 39.634C31.4993 39.9233 31.9939 40.334 32.3393 40.866C32.6846 41.398 32.8573 42.028 32.8573 42.756C32.8573 43.484 32.6799 44.114 32.3253 44.646C31.9799 45.1687 31.4853 45.57 30.8413 45.85L33.0393 49H30.6033ZM30.5613 42.756C30.5613 42.2053 30.3839 41.7853 30.0293 41.496C29.6746 41.1973 29.1566 41.048 28.4753 41.048H26.6273V44.464H28.4753C29.1566 44.464 29.6746 44.3147 30.0293 44.016C30.3839 43.7173 30.5613 43.2973 30.5613 42.756ZM41.1082 46.9H36.5582L35.6902 49H33.3662L37.7342 39.2H39.9742L44.3562 49H41.9762L41.1082 46.9ZM40.3942 45.178L38.8402 41.426L37.2862 45.178H40.3942ZM54.2617 39.2L50.0197 49H47.7797L43.5517 39.2H46.0017L48.9837 46.2L52.0077 39.2H54.2617ZM61.2058 46.9H56.6558L55.7878 49H53.4638L57.8318 39.2H60.0718L64.4538 49H62.0738L61.2058 46.9ZM60.4918 45.178L58.9378 41.426L57.3838 45.178H60.4918ZM71.7146 49L69.8246 46.27H69.7126H67.7386V49H65.4706V39.2H69.7126C70.5806 39.2 71.3319 39.3447 71.9666 39.634C72.6106 39.9233 73.1053 40.334 73.4506 40.866C73.7959 41.398 73.9686 42.028 73.9686 42.756C73.9686 43.484 73.7913 44.114 73.4366 44.646C73.0913 45.1687 72.5966 45.57 71.9526 45.85L74.1506 49H71.7146ZM71.6726 42.756C71.6726 42.2053 71.4953 41.7853 71.1406 41.496C70.7859 41.1973 70.2679 41.048 69.5866 41.048H67.7386V44.464H69.5866C70.2679 44.464 70.7859 44.3147 71.1406 44.016C71.4953 43.7173 71.6726 43.2973 71.6726 42.756Z"
            fill="#ED3A3B"
          />
        </svg>

        <!-- virar câmera -->
        <svg
          id="rotate"
          class="rotate"
          width="40"
          height="40"
          viewBox="0 0 40 40"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M31.6221 4.62309C31.3012 4.62309 31.0187 4.45682 30.8669 4.20918L29.9652 2.73781C28.9175 1.02832 27.0592 0 25.0723 0H19.6275C17.4836 0 15.5026 1.19628 14.5174 3.12536L13.9923 4.15336C13.8512 4.42963 13.5528 4.62309 13.2058 4.62309H10.7361C7.53423 4.62309 5 7.28997 5 10.4185V21.3532C5.65744 20.7939 6.50509 20.4532 7.43056 20.4439V10.4185C7.43056 8.60629 8.9105 7.06874 10.7361 7.06874H13.2058C14.4513 7.06874 15.591 6.37387 16.1542 5.2712L16.6792 4.2432C17.2423 3.14052 18.3821 2.44565 19.6275 2.44565H25.0723C26.2262 2.44565 27.2966 3.04295 27.8963 4.02151L28.7981 5.49288C29.3978 6.47144 30.4682 7.06874 31.6221 7.06874H34.2639C36.0895 7.06874 37.5694 8.60629 37.5694 10.4185V28.0272C37.5694 29.8394 36.0895 31.3043 34.2639 31.3043H13.8404V31.8072C13.8423 31.8566 13.8432 31.9062 13.8432 31.9561C13.8432 32.6037 13.6826 33.2144 13.3993 33.75H34.2639C37.3967 33.75 40 31.2252 40 28.0272V10.4185C40 7.28997 37.4658 4.62309 34.2639 4.62309H31.6221ZM20.8654 27.2379C21.3949 27.3386 21.9413 27.3913 22.5 27.3913C27.3325 27.3913 31.25 23.4495 31.25 18.587C31.25 13.7244 27.3325 9.78261 22.5 9.78261C17.7794 9.78261 13.9319 13.544 13.7563 18.2507C14.4486 17.6794 15.3657 17.3975 16.2668 17.534C16.7654 14.5233 19.3664 12.2283 22.5 12.2283C25.9901 12.2283 28.8194 15.0751 28.8194 18.587C28.8194 22.0988 25.9901 24.9456 22.5 24.9456C22.4766 24.9456 22.4533 24.9455 22.4299 24.9453C22.3048 25.5342 22.0118 26.0951 21.5481 26.5504L20.8654 27.2379Z"
            fill="white"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M3.11811 27.356L0.152038 30.1263C-0.0506792 30.3249 -0.0506792 30.6327 0.152038 30.8313L3.11811 33.6017C3.44885 33.9194 4.025 33.691 4.025 33.2541V31.4668H10.4373C11.0241 31.4668 11.5042 31.02 11.5042 30.4739C11.5042 29.9278 11.0241 29.4809 10.4373 29.4809H4.025V27.7036C4.025 27.2567 3.44885 27.0383 3.11811 27.356ZM18.5993 24.1687L15.6332 21.3983C15.3025 21.0806 14.7263 21.309 14.7263 21.7459V23.5232H8.30339C7.71658 23.5232 7.23646 23.9701 7.23646 24.5162C7.23646 25.0623 7.71658 25.5091 8.30339 25.5091H14.7156V27.2865C14.7156 27.7333 15.2918 27.9518 15.6225 27.634L18.5886 24.8637C18.802 24.6751 18.802 24.3573 18.5993 24.1687Z"
            fill="white"
          />
        </svg>
      </section>
    </main>

    <!-- <script src="cam-recorder-top.js"></script> -->
    <script src="cam-recorder.js"></script>
  </body>
  <!-- <script src="cam-recorder.js"></script> -->
</html>