index.html

<!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>