Hugging Face's logo

Spaces:
aiqtech
/
tetete
Running

App Files Community
aiqtech commited on
Commit
90696e8
Β·
verified Β·
1 Parent(s): 829b2dd

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +50 -55
index.html CHANGED
@@ -4,72 +4,67 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <style>
7
- body, html {
8
  margin:0; padding:0;
9
  width:100vw; height:100vh;
10
- background:#000;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  }
12
  </style>
13
  </head>
14
  <body>
15
 
16
- <script>
17
- (async function(){
18
- try {
19
- // ν™”λ©΄ 캑처 슀트림 μš”μ²­ (μ‚¬μš©μžμ—κ²Œ 선택창 ν‘œμ‹œ)
20
- const stream = await navigator.mediaDevices.getDisplayMedia({
21
- video: {
22
- width: { max: 1920 }, // μ΅œλŒ€ 해상도 μ„€μ • κ°€λŠ₯
23
- height: { max: 1080 },
24
- frameRate: 30
25
- },
26
- audio: false
27
- });
28
-
29
- // MediaRecorder 생성
30
- const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' });
31
- const chunks = [];
32
 
33
- // 데이터(λΈ”λ‘­) μˆ˜μ§‘
34
- recorder.ondataavailable = e => {
35
- if (e.data.size > 0) {
36
- chunks.push(e.data);
37
- }
38
- };
39
 
40
- // λ…Ήν™” μ’…λ£Œ μ‹œ 처리
41
- recorder.onstop = () => {
42
- const blob = new Blob(chunks, { type: 'video/webm' });
43
- const url = URL.createObjectURL(blob);
 
44
 
45
- // a νƒœκ·Έλ₯Ό μ΄μš©ν•΄ λ‹€μš΄λ‘œλ“œ
46
- const a = document.createElement('a');
47
- a.style.display = 'none';
48
- a.href = url;
49
- a.download = 'recorded_video.webm';
50
- document.body.appendChild(a);
51
- a.click();
52
 
53
- // URL ν•΄μ œ
54
- setTimeout(() => {
55
- URL.revokeObjectURL(url);
56
- document.body.removeChild(a);
57
- }, 100);
58
- };
59
-
60
- // λ…Ήν™” μ‹œμž‘
61
- recorder.start();
62
-
63
- // 10초 λ’€ λ…Ήν™” 쀑지
64
- setTimeout(() => {
65
- recorder.stop();
66
- }, 10000);
67
-
68
- } catch (err) {
69
- console.error("ν™”λ©΄ 캑처 κΆŒν•œ μš”μ²­ μ‹€νŒ¨ λ˜λŠ” 였λ₯˜:", err);
70
- }
71
- })();
72
- </script>
73
 
74
  </body>
75
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <style>
7
+ html, body {
8
  margin:0; padding:0;
9
  width:100vw; height:100vh;
10
+ display:flex;
11
+ justify-content:center; /* κ°€λ‘œ λ°©ν–₯ 쀑앙 μ •λ ¬ */
12
+ align-items:flex-start; /* μ„Έλ‘œ λ°©ν–₯ 상단 μ •λ ¬ */
13
+ background:#000;
14
+ overflow:hidden;
15
+ }
16
+
17
+ .grid-container {
18
+ display: grid;
19
+ width: 50vw;
20
+ height: 50vh;
21
+ grid-template-columns: 1fr 2fr 1fr 2fr;
22
+ grid-template-rows: repeat(5, 1fr);
23
+ gap: 0;
24
+ /* 상단에 λΆˆν•„μš”ν•œ μ—¬λ°± 없이 λ°”λ‘œ λΆ™μ—¬λ‘  */
25
+ }
26
+
27
+ img, video {
28
+ width: 100%;
29
+ height: 100%;
30
+ object-fit: cover;
31
+ display: block;
32
  }
33
  </style>
34
  </head>
35
  <body>
36
 
37
+ <div class="grid-container">
38
+ <!-- 1ν–‰: 1번, 2번 -->
39
+ <img src="1.webp" alt="1">
40
+ <video src="1.mp4" autoplay loop muted></video>
41
+ <img src="2.webp" alt="2">
42
+ <video src="2.mp4" autoplay loop muted></video>
 
 
 
 
 
 
 
 
 
 
43
 
44
+ <!-- 2ν–‰: 3번, 4번 -->
45
+ <img src="3.webp" alt="3">
46
+ <video src="3.mp4" autoplay loop muted></video>
47
+ <img src="4.webp" alt="4">
48
+ <video src="4.mp4" autoplay loop muted></video>
 
49
 
50
+ <!-- 3ν–‰: 5번, 6번 -->
51
+ <img src="5.webp" alt="5">
52
+ <video src="5.mp4" autoplay loop muted></video>
53
+ <img src="6.webp" alt="6">
54
+ <video src="6.mp4" autoplay loop muted></video>
55
 
56
+ <!-- 4ν–‰: 7번, 8번 -->
57
+ <img src="7.webp" alt="7">
58
+ <video src="7.mp4" autoplay loop muted></video>
59
+ <img src="8.webp" alt="8">
60
+ <video src="8.mp4" autoplay loop muted></video>
 
 
61
 
62
+ <!-- 5ν–‰: 9번, 10번 -->
63
+ <img src="9.webp" alt="9">
64
+ <video src="9.mp4" autoplay loop muted></video>
65
+ <img src="10.webp" alt="10">
66
+ <video src="10.mp4" autoplay loop muted></video>
67
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
 
69
  </body>
70
  </html>