環境変数を整理する

.env.template

@@ -1,4 +1,6 @@
 # 設定については README.md を参照してください
 VITE_SORA_SIGNALING_URL=
+VITE_SORA_CHANNEL_ID=
 VITE_SORA_CHANNEL_ID_PREFIX=
+VITE_SORA_CHANNEL_ID_SUFFIX=
 VITE_SECRET_KEY=

README.md

@@ -31,38 +31,45 @@ $ pnpm install
 $ pnpm dev
 ```
 
+### Sora を利用する場合の .env.local の設定
+
+```bash
+# Sora の Signaling URL を指定してください
+VITE_SORA_SIGNALING_URL=wss://sora.example.com/signaling
+# 好きな文字列を指定してください
+VITE_SORA_CHANNEL_ID=example
+# VITE_SORA_CHANNEL_ID_PREFIX=
+# VITE_SORA_CHANNEL_ID_SUFFIX=
+# VITE_SECRET_KEY=
+```
+
 ### Sora Labo を利用する場合の .env.local の設定
 
 ```bash
 # Sora Labo の Signaling URL を指定してください
 VITE_SORA_SIGNALING_URL=wss://sora.sora-labo.shiguredo.app/signaling
+# 好きな文字列を指定してください
+VITE_SORA_CHANNEL_ID=example
 # Sora Labo にログインした GitHub ログイン名と GitHub ID を指定してください
 # {GitHubLoginName}_{GitHubID}_ の用に指定してください
-VITE_SORA_CHANNEL_ID_PREFIX={GitHubLoginName}_{GitHubId}_
+VITE_SORA_CHANNEL_ID_PREFIX={github_login_name}_{github_id}_
+# VITE_SORA_CHANNEL_ID_SUFFIX=
 # Sora Labo の Secret Key を指定してください
-VITE_SECRET_KEY=SecretKey
+VITE_SECRET_KEY={secret_key}
 ```
 
 ### Sora Cloud を利用する場合の .env.local の設定
 
 ```bash
 # Sora Cloud の Signaling URL を指定してください
 VITE_SORA_SIGNALING_URL=wss://sora.sora-cloud.shiguredo.app/signaling
-# Sora Cloud のプロジェクト ID + @ を指定してください
-VITE_SORA_CHANNEL_ID_PREFIX={ProjectId}@
-# Sora Cloud の API Key を指定してください
-VITE_SECRET_KEY=SecretKey
-```
-
-### Sora を利用する場合の .env.local の設定
-
-```bash
-# Sora の Signaling URL を指定してください
-VITE_SORA_SIGNALING_URL=wss://sora.example.com/signaling
 # 好きな文字列を指定してください
-VITE_SORA_CHANNEL_ID_PREFIX=example
-# 設定不要です
-VITE_SECRET_KEY=
+VITE_SORA_CHANNEL_ID=example
+# VITE_SORA_CHANNEL_ID_PREFIX=
+# Sora Cloud の @ + プロジェクト ID を指定してください
+VITE_SORA_CHANNEL_ID_SUFFIX=@{project_id}
+# Sora Cloud の API Key を指定してください
+VITE_SECRET_KEY={api_key}
 ```
 
 ## ライセンス

check_stereo/main.ts

@@ -5,19 +5,14 @@ import Sora, {
   type ConnectionSubscriber,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   // 環境変数の読み込み
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX;
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX;
   const secretKey = import.meta.env.VITE_SECRET_KEY;
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const sendonly = new SendonlyClient(signalingUrl, channelId, secretKey);
   const recvonly = new RecvonlyClient(signalingUrl, channelId, secretKey);

check_stereo_multi/main.ts

@@ -5,18 +5,13 @@ import Sora, {
   type ConnectionSubscriber,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX;
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX;
   const secretKey = import.meta.env.VITE_SECRET_KEY;
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const sendonly1 = new SendonlyClient(signalingUrl, channelId, secretKey, {
     clientId: "1",

messaging/main.ts

@@ -5,18 +5,13 @@ import Sora, {
   type DataChannelMessageEvent,
   type DataChannelEvent,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const client = new SoraClient(signalingUrl, channelId, secretKey);
 

recvonly/main.ts

@@ -4,19 +4,14 @@ import Sora, {
   type ConnectionSubscriber,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", () => {
   // 環境変数の読み込み
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // パラメータから channelName を取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const client = new SoraClient(signalingUrl, channelId, secretKey);
 

replace_track/main.ts

@@ -5,18 +5,13 @@ import Sora, {
   type VideoCodecType,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const client = new SoraClient(signalingUrl, channelId, secretKey);
 

sendonly/main.ts

@@ -5,18 +5,13 @@ import Sora, {
   type SoraConnection,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const client = new SoraClient(signalingUrl, channelId, secretKey);
 

sendrecv/main.ts

@@ -4,18 +4,13 @@ import Sora, {
   type ConnectionPublisher,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // パラメータから channelName を取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const client = new SoraClient(signalingUrl, channelId, secretKey);
 

simulcast/main.ts

@@ -3,21 +3,15 @@ import Sora, {
   type ConnectionPublisher,
   type SignalingNotifyMessage,
   type ConnectionSubscriber,
-  type SimulcastRid,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const sendonly = new SimulcastSendonlySoraClient(signalingUrl, channelId, secretKey, {
     audio: false,

spotlight_sendrecv/main.ts

@@ -4,18 +4,13 @@ import Sora, {
   type SignalingNotifyMessage,
   type ConnectionOptions,
 } from "sora-js-sdk";
-import { generateJwt } from "../src/misc";
+import { generateChannelId, generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
-  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
   const secretKey = import.meta.env.VITE_SECRET_KEY || "";
 
-  // URL から channelName パラメータを取得
-  const urlParams = new URLSearchParams(window.location.search);
-  const channelName = urlParams.get("channelName") || "";
-  const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;
+  const channelId = generateChannelId();
 
   const sendrecv = new SoraClient(signalingUrl, channelId, secretKey);
 

src/misc.ts

@@ -1,9 +1,9 @@
-import * as jose from "jose";
+import { SignJWT } from "jose";
 
 export const generateJwt = async (channelId: string, secretKey: string): Promise<string> => {
   const header = { alg: "HS256", typ: "JWT" };
   return (
-    new jose.SignJWT({
+    new SignJWT({
       channel_id: channelId,
     })
       .setProtectedHeader(header)
@@ -12,3 +12,39 @@ export const generateJwt = async (channelId: string, secretKey: string): Promise
       .sign(new TextEncoder().encode(secretKey))
   );
 };
+
+export const generateChannelId = (): string => {
+  // qs で channelId が指定されている場合はそれを利用する
+  const urlParams = new URLSearchParams(window.location.search);
+  const qsChannelId = urlParams.get("channelId") || "";
+  if (qsChannelId) {
+    return qsChannelId;
+  }
+
+  // qs が指定されていない場合は環境変数を利用する
+  const channelId = import.meta.env.VITE_SORA_CHANNEL_ID;
+  const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX;
+  const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX;
+
+  // 環境変数の channelId が指定されていない場合はエラー
+  if (!channelId) {
+    throw new Error("VITE_SORA_CHANNEL_ID is not set");
+  }
+
+  // channelIdPrefix と channelIdSuffix が指定されている場合はそれを利用する
+  if (channelIdPrefix && channelIdSuffix) {
+    return `${channelIdPrefix}${channelId}${channelIdSuffix}`;
+  }
+
+  // channelIdPrefix が指定されている場合はそれを利用する
+  if (channelIdPrefix) {
+    return `${channelIdPrefix}${channelId}`;
+  }
+
+  // channelIdSuffix が指定されている場合はそれを利用する
+  if (channelIdSuffix) {
+    return `${channelId}${channelIdSuffix}`;
+  }
+
+  return channelId;
+};