整理

shiguredo · Feb 20, 2024 · 839ac0d · 839ac0d
1 parent 7c60d01
commit 839ac0d
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 126 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,5 +16,6 @@
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
-  }
+  },
+  "cSpell.words": ["remotevideo"]
 }
diff --git a/env.local.example b/env.local.example
@@ -0,0 +1,3 @@
+VITE_SORA_SIGNLAING_URL=wss://sora.example.com/signaling
+VITE_SORA_CHANNEL_ID=sora-js-sdk
+VITE_ACCESS_TOKEN=secret
diff --git a/example/README.md b/example/README.md
diff --git a/example/data_channel_messaging.html → example/messaging/index.html b/example/data_channel_messaging.html → example/messaging/index.html
diff --git a/example/recvonly.html b/example/recvonly.html
diff --git a/example/recvonly/index.html b/example/recvonly/index.html
@@ -0,0 +1,22 @@
+<html lang="ja">
+
+<head>
+  <meta charset="utf-8">
+  <title>Recvonly test</title>
+</head>
+
+<body>
+  <div class="container">
+    <h1>Recvonly test</h1>
+    <button id="start-recvonly">start</button>
+    <button id="stop-recvonly">stop</button><br />
+    <div style="display: flex;">
+      <div id="remote-videos"></div>
+    </div>
+  </div>
+
+  <script type="module" src="./main.js"></script>
+  </script>
+</body>
+
+</html>
diff --git a/example/recvonly/main.js b/example/recvonly/main.js
@@ -0,0 +1,48 @@
+import Sora from '../../dist/sora.js'
+
+const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
+const SORA_CHANNEL_ID = import.meta.env.VITE_SORA_CHANNEL_ID
+const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN
+
+const channelId = SORA_CHANNEL_ID
+const debug = false
+const sora = Sora.connection(SORA_SIGNALING_URL, debug)
+const metadata = { access_token: ACCESS_TOKEN }
+const options = {}
+
+const recvonly = sora.recvonly(channelId, metadata, options)
+
+recvonly.on('track', (event) => {
+  const stream = event.streams[0]
+  if (!stream) return
+  const remoteVideoId = `remotevideo-${stream.id}`
+  const remoteVideos = document.querySelector('#remote-videos')
+  if (!remoteVideos.querySelector(`#${remoteVideoId}`)) {
+    const remoteVideo = document.createElement('video')
+    remoteVideo.id = remoteVideoId
+    remoteVideo.style.border = '1px solid red'
+    remoteVideo.autoplay = true
+    remoteVideo.playsinline = true
+    remoteVideo.controls = true
+    remoteVideo.width = '320'
+    remoteVideo.height = '240'
+    remoteVideo.srcObject = stream
+    remoteVideos.appendChild(remoteVideo)
+  }
+})
+
+recvonly.on('removetrack', (event) => {
+  const remoteVideo = document.querySelector(`#remotevideo-${event.target.id}`)
+  if (remoteVideo) {
+    document.querySelector('#remote-videos').removeChild(remoteVideo)
+  }
+})
+
+document.querySelector('#start-recvonly').addEventListener('click', async () => {
+  await recvonly.connect()
+})
+
+document.querySelector('#stop-recvonly').addEventListener('click', async () => {
+  await recvonly.disconnect()
+  document.querySelector('#remote-videos').innerHTML = null
+})
diff --git a/example/sendonly.html b/example/sendonly.html
diff --git a/example/sendonly/index.html b/example/sendonly/index.html
@@ -0,0 +1,21 @@
+<html lang="ja">
+    <head>
+        <meta charset="utf-8">
+        <title>Sendonly test</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Sendonly test</h1>
+            <div>
+                <h2>sendonly1</h2>
+                <button id="start-sendonly">start</button>
+                <button id="stop-sendonly">stop</button><br />
+                <video id="sendonly-local-video" autoplay="" playsinline="" controls="" style="width: 320px; height: 240px; border: 1px solid black;"></video>
+            </div>
+        </div>
+
+        <script src="./sora.js"></script>
+        <script type="text/javascript">
+    </script>
+  </body>
+</html>
diff --git a/example/sendonly/main.js b/example/sendonly/main.js
@@ -0,0 +1,24 @@
+import Sora from '../../dist/sora.js'
+
+const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
+const SORA_CHANNEL_ID = import.meta.env.VITE_SORA_CHANNEL_ID
+const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN
+
+const channelId = SORA_CHANNEL_ID
+const debug = false
+const sora = Sora.connection(SORA_SIGNALING_URL, debug)
+const metadata = { access_token: ACCESS_TOKEN }
+const options = {}
+
+const sendonly = sora.sendonly(channelId, metadata, options)
+
+document.querySelector('#start-sendonly').addEventListener('click', async () => {
+  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+  await sendonly.connect(mediaStream)
+  document.querySelector('#sendonly-local-video').srcObject = mediaStream
+})
+
+document.querySelector('#stop-sendonly').addEventListener('click', async () => {
+  await sendonly.disconnect()
+  document.querySelector('#sendonly-local-video').srcObject = null
+})
diff --git a/example/sendrecv/main.js b/example/sendrecv/main.js
@@ -2,7 +2,7 @@ import Sora from '../../dist/sora.js'
 
 const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
 const SORA_CHANNEL_ID = import.meta.env.VITE_SORA_CHANNEL_ID
-const SORA_ACCESS_TOKEN = import.meta.env.VITE_SORA_ACCESS_TOKEN
+const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN
 
 const channelId = SORA_CHANNEL_ID
 const debug = false

diff --git a/example/simulcast.html → example/simulcast_sendonly.html/index.html b/example/simulcast.html → example/simulcast_sendonly.html/index.html
diff --git a/example/sora.js b/example/sora.js
diff --git a/example/spotlight_recvonly.html → example/spotlight_recvonly/index.html b/example/spotlight_recvonly.html → example/spotlight_recvonly/index.html
diff --git a/example/spotlight_sendrecv.html → example/spotlight_sedrecv/index.html b/example/spotlight_sendrecv.html → example/spotlight_sedrecv/index.html