ちまちまと

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

Hide file tree

Showing 7 changed files with 149 additions and 140 deletions.
diff --git a/example/index.html b/example/index.html
@@ -1,20 +1,23 @@
 <html lang="ja">
-    <head>
-        <meta charset="utf-8">
-        <title>Sora JavaScript SDK example</title>
-    </head>
-    <body>
-        <div class="container">
-          <ul>
-            <li><a href="sendrecv.html">配信視聴サンプル</a></li>
-            <li><a href="sendonly.html">配信サンプル</a></li>
-            <li><a href="recvonly.html">視聴サンプル</a></li>
-            <li><a href="e2ee.html">E2EE配信視聴サンプル</a></li>
-            <li><a href="spotlight_sendrecv.html">スポットライト配信視聴サンプル</a></li>
-            <li><a href="spotlight_recvonly.html">スポットライト視聴サンプル</a></li>
-            <li><a href="simulcast.html">サイマルキャスト配信/視聴サンプル</a></li>
-            <li><a href="data_channel_messaging.html">データチャネルメッセージングサンプル</a></li>
-          </ul>
-        </div>
-    </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Sora JavaScript SDK example</title>
+</head>
+
+<body>
+  <div class="container">
+    <ul>
+      <li><a href="/sendrecv/">配信視聴サンプル</a></li>
+      <li><a href="/sendonly/">配信サンプル</a></li>
+      <li><a href="/recvonly/">視聴サンプル</a></li>
+      <li><a href="/e2ee/">E2EE配信視聴サンプル</a></li>
+      <li><a href="/spotlight_sendrecv/">スポットライト配信視聴サンプル</a></li>
+      <li><a href="/spotlight_recvonly/">スポットライト視聴サンプル</a></li>
+      <li><a href="/simulcast/">サイマルキャスト配信/視聴サンプル</a></li>
+      <li><a href="/data_channel_messaging/">データチャネルメッセージングサンプル</a></li>
+    </ul>
+  </div>
+</body>
+
+</html>
diff --git a/example/sendrecv.html b/example/sendrecv.html
diff --git a/example/sendrecv/index.html b/example/sendrecv/index.html
@@ -0,0 +1,34 @@
+<html lang="ja">
+
+<head>
+  <meta charset="utf-8">
+  <title>Sendrecv test</title>
+</head>
+
+<body>
+  <div class="container">
+    <h1>Sendrecv test</h1>
+    <div style="display: flex;">
+      <div>
+        <h2>sendrecv1</h2>
+        <button id="start-sendrecv1">start</button>
+        <button id="stop-sendrecv1">stop</button><br />
+        <video id="sendrecv1-local-video" autoplay="" playsinline="" controls=""
+          style="width: 320px; height: 240px; border: 1px solid black;"></video>
+        <div id="sendrecv1-remote-videos"></div>
+      </div>
+      <div>
+        <h2>sendrecv2</h2>
+        <button id="start-sendrecv2">start</button>
+        <button id="stop-sendrecv2">stop</button><br />
+        <video id="sendrecv2-local-video" autoplay="" playsinline="" controls=""
+          style="width: 320px; height: 240px; border: 1px solid black;"></video>
+        <div id="sendrecv2-remote-videos"></div>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="./main.js"></script>
+</body>
+
+</html>
diff --git a/example/sendrecv/main.js b/example/sendrecv/main.js
@@ -0,0 +1,92 @@
+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 channelId = SORA_CHANNEL_ID
+const debug = false
+const sora = Sora.connection(SORA_SIGNALING_URL, debug)
+const metadata = { access_token: SORA_ACCESS_TOKEN }
+const options = {}
+
+const sendrecv1 = sora.sendrecv(channelId, metadata, options)
+
+sendrecv1.on('track', (event) => {
+  const stream = event.streams[0]
+  if (!stream) return
+  const remoteVideoId = `sendrecv1-remotevideo-${stream.id}`
+  const remoteVideos = document.querySelector('#sendrecv1-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 = '160'
+    remoteVideo.height = '120'
+    remoteVideo.srcObject = stream
+    remoteVideos.appendChild(remoteVideo)
+  }
+})
+
+sendrecv1.on('removetrack', (event) => {
+  const remoteVideo = document.querySelector(`#sendrecv1-remotevideo-${event.target.id}`)
+  if (remoteVideo) {
+    document.querySelector('#sendrecv1-remote-videos').removeChild(remoteVideo)
+  }
+})
+
+const sendrecv2 = sora.sendrecv(channelId, null, options)
+sendrecv2.on('track', (event) => {
+  const stream = event.streams[0]
+  if (!stream) return
+  const remoteVideoId = `sendrecv2-remotevideo-${stream.id}`
+  const remoteVideos = document.querySelector('#sendrecv2-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 = '160'
+    remoteVideo.height = '120'
+    remoteVideo.srcObject = stream
+    remoteVideos.appendChild(remoteVideo)
+  }
+})
+
+sendrecv2.on('removetrack', (event) => {
+  const remoteVideo = document.querySelector(`#sendrecv2-remotevideo-${event.target.id}`)
+  if (remoteVideo) {
+    document.querySelector('#sendrecv2-remote-videos').removeChild(remoteVideo)
+  }
+})
+
+document.querySelector('#start-sendrecv1').addEventListener('click', async () => {
+  // sendrecv1
+  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+  await sendrecv1.connect(mediaStream)
+  document.querySelector('#sendrecv1-local-video').srcObject = mediaStream
+})
+
+document.querySelector('#start-sendrecv2').addEventListener('click', async () => {
+  // sendrecv2
+  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+  await sendrecv2.connect(mediaStream)
+  document.querySelector('#sendrecv2-local-video').srcObject = mediaStream
+})
+
+document.querySelector('#stop-sendrecv1').addEventListener('click', async () => {
+  await sendrecv1.disconnect()
+  document.querySelector('#sendrecv1-local-video').srcObject = null
+  document.querySelector('#sendrecv1-remote-videos').innerHTML = null
+})
+
+document.querySelector('#stop-sendrecv2').addEventListener('click', async () => {
+  await sendrecv2.disconnect()
+  document.querySelector('#sendrecv2-local-video').srcObject = null
+  document.querySelector('#sendrecv2-remote-videos').innerHTML = null
+})
diff --git a/package.json b/package.json
@@ -6,11 +6,11 @@
   "module": "dist/sora.mjs",
   "types": "dist/sora.d.ts",
   "scripts": {
+    "dev": "vite",
     "build": "pnpm -r --filter=./packages/* build",
     "lint": "pnpm -r --filter=./packages/* lint",
     "fmt": "pnpm -r --filter=./packages/* fmt",
     "test": "pnpm -r --filter=./packages/* test",
-    "dev": "vite",
     "doc": "typedoc",
     "release:canary": "./scripts/release_canary.sh"
   },

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,2 @@
 packages:
   - "packages/*"
-  - "example"
diff --git a/vite.config.mts → vite.config.ts b/vite.config.mts → vite.config.ts