init

2023-04-20 12:05:32 +02:00
commit 9975bbb42c
30 changed files with 11480 additions and 0 deletions
--- a/archive/webrtc.html
+++ b/archive/webrtc.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>go2rtc - WebRTC</title>
+    <style>
+      body {
+        background-color: black;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body,
+      video {
+        height: 100%;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        object-fit: fill;
+      }
+      div {
+        display: flex;
+      }
+      .column {
+        flex-direction: column;
+      }
+      .row {
+        flex-direction: row;
+        flex: 1;
+      }
+      .videoContainer {
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="column">
+      <div class="row">
+        <div class="videoContainer">
+          <video id="video" autoplay controls playsinline muted></video>
+        </div>
+        <div class="videoContainer"><video id="video2" autoplay controls playsinline muted></video></div>
+        <div class="videoContainer"><video id="video3" autoplay controls playsinline muted></video></div>
+      </div>
+      <div class="row">
+        <div class="videoContainer">
+          <video id="video4" autoplay controls playsinline muted></video>
+        </div>
+        <div class="videoContainer"><video id="video5" autoplay controls playsinline muted></video></div>
+        <div class="videoContainer"><video id="video6" autoplay controls playsinline muted></video></div>
+      </div>
+    </div>
+
+    <script>
+      async function PeerConnection(media) {
+        const pc = new RTCPeerConnection({
+          iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+        })
+
+        const localTracks = []
+
+        if (/camera|microphone/.test(media)) {
+          const tracks = await getMediaTracks('user', {
+            video: media.indexOf('camera') >= 0,
+            audio: media.indexOf('microphone') >= 0,
+          })
+          tracks.forEach((track) => {
+            pc.addTransceiver(track, { direction: 'sendonly' })
+            if (track.kind === 'video') localTracks.push(track)
+          })
+        }
+
+        if (media.indexOf('display') >= 0) {
+          const tracks = await getMediaTracks('display', {
+            video: true,
+            audio: media.indexOf('speaker') >= 0,
+          })
+          tracks.forEach((track) => {
+            pc.addTransceiver(track, { direction: 'sendonly' })
+            if (track.kind === 'video') localTracks.push(track)
+          })
+        }
+
+        if (/video|audio/.test(media)) {
+          const tracks = ['video', 'audio']
+            .filter((kind) => media.indexOf(kind) >= 0)
+            .map((kind) => pc.addTransceiver(kind, { direction: 'recvonly' }).receiver.track)
+          localTracks.push(...tracks)
+        }
+
+        return { pc, localTracks }
+      }
+
+      async function getMediaTracks(media, constraints) {
+        try {
+          const stream =
+            media === 'user'
+              ? await navigator.mediaDevices.getUserMedia(constraints)
+              : await navigator.mediaDevices.getDisplayMedia(constraints)
+          return stream.getTracks()
+        } catch (e) {
+          console.warn(e)
+          return []
+        }
+      }
+
+      async function connect(url, media, videoId) {
+        const { pc, localTracks } = await PeerConnection(media)
+        // const url = new URL('api/ws' + location.search, location.href)
+
+        document.getElementById(videoId).srcObject = new MediaStream(localTracks)
+
+        const ws = new WebSocket('ws' + url.toString().substring(4))
+
+        ws.addEventListener('open', () => {
+          pc.addEventListener('icecandidate', (ev) => {
+            if (!ev.candidate) return
+            const msg = { type: 'webrtc/candidate', value: ev.candidate.candidate }
+            ws.send(JSON.stringify(msg))
+          })
+
+          pc.createOffer()
+            .then((offer) => pc.setLocalDescription(offer))
+            .then(() => {
+              const msg = { type: 'webrtc/offer', value: pc.localDescription.sdp }
+              ws.send(JSON.stringify(msg))
+            })
+        })
+
+        ws.addEventListener('message', (ev) => {
+          const msg = JSON.parse(ev.data)
+          if (msg.type === 'webrtc/candidate') {
+            pc.addIceCandidate({ candidate: msg.value, sdpMid: '0' })
+          } else if (msg.type === 'webrtc/answer') {
+            pc.setRemoteDescription({ type: 'answer', sdp: msg.value })
+          }
+        })
+      }
+
+      const media = new URLSearchParams(location.search).get('media')
+
+      const start = () => {
+        const url = new URL('http://10.10.0.64:1984/api/ws?src=unifi_einfahrt&media=video')
+        const url2 = new URL('http://10.10.0.64:1984/api/ws?src=unifi_haustuer&media=video')
+        const url3 = new URL('http://10.10.0.64:1984/api/ws?src=unifi_garage&media=video')
+        const url4 = new URL('http://10.10.0.64:1984/api/ws?src=unifi_garten&media=video')
+        const url5 = new URL('http://10.10.0.64:1984/api/ws?src=unifi_wintergarten&media=video')
+
+        connect(url, media || 'video+audio', 'video')
+        connect(url2, media || 'video+audio', 'video2')
+        connect(url3, media || 'video+audio', 'video3')
+        connect(url4, media || 'video+audio', 'video4')
+        connect(url5, media || 'video+audio', 'video5')
+      }
+
+      start()
+    </script>
+  </body>
+</html>