Add files via upload

Rostia2010 · web-flow · commit b23d28354928 · 2024-09-08T23:09:55.000+02:00
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AR с HTML</title>
+    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+    <script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.js"></script>
+    <script src="/socket.io/socket.io.js"></script>
+</head>
+<body>
+    <a-scene embedded arjs>
+        <!-- Видео -->
+        <video id="video" autoplay loop src="http://localhost:8080/video.mp4" crossorigin="anonymous"></video>
+        <a-assets>
+            <!-- Видео для текстуры -->
+            <video id="screenStream" autoplay></video>
+        </a-assets>
+
+        <!-- Маркер с кубом -->
+        <a-marker preset="hiro">
+            <a-box position="0 0.5 0" material="src: #video;"></a-box> <!-- Указываем, что видео будет текстурой -->
+        </a-marker>
+
+        <!-- Камера -->
+        <a-entity camera></a-entity>
+    </a-scene>
+
+    <script>
+        const socket = io.connect('http://localhost:3000');
+        let peerConnection;
+        const config = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
+
+        const videoElement = document.getElementById('screenStream');
+
+        peerConnection = new RTCPeerConnection(config);
+        peerConnection.ontrack = (event) => {
+            videoElement.srcObject = event.streams[0];
+        };
+
+        peerConnection.onicecandidate = (event) => {
+            if (event.candidate) {
+                socket.emit('signal', { target: 'TARGET_ID', signal: { candidate: event.candidate } });
+            }
+        };
+
+        socket.on('signal', async (data) => {
+            if (data.signal.sdp) {
+                await peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal.sdp));
+                if (data.signal.sdp.type === 'offer') {
+                    const answer = await peerConnection.createAnswer();
+                    await peerConnection.setLocalDescription(answer);
+                    socket.emit('signal', { target: data.from, signal: { sdp: answer } });
+                }
+            }
+            if (data.signal.candidate) {
+                await peerConnection.addIceCandidate(new RTCIceCandidate(data.signal.candidate));
+            }
+        });
+    </script>
+
+    <script>
+        document.querySelector('a-scene').addEventListener('click', function () {
+          const video = document.getElementById('video');
+          video.play();
+        });
+    </script>
+</body>
+</html>
