From e1cd8a7538ade9a175fefddad12da0ac331971b9 Mon Sep 17 00:00:00 2001 From: voluntas Date: Thu, 16 Jan 2025 11:26:01 +0900 Subject: [PATCH] =?UTF-8?q?=E7=92=B0=E5=A2=83=E5=A4=89=E6=95=B0=E3=82=92?= =?UTF-8?q?=E6=95=B4=E7=90=86=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.template | 2 ++ README.md | 39 ++++++++++++++++++++++--------------- check_stereo/main.ts | 9 ++------- check_stereo_multi/main.ts | 9 ++------- messaging/main.ts | 9 ++------- recvonly/main.ts | 9 ++------- replace_track/main.ts | 9 ++------- sendonly/main.ts | 9 ++------- sendrecv/main.ts | 9 ++------- simulcast/main.ts | 10 ++-------- spotlight_sendrecv/main.ts | 9 ++------- src/misc.ts | 40 ++++++++++++++++++++++++++++++++++++-- 12 files changed, 81 insertions(+), 82 deletions(-) diff --git a/.env.template b/.env.template index 7225945..57bd430 100644 --- a/.env.template +++ b/.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= \ No newline at end of file diff --git a/README.md b/README.md index 923cb28..4b7431a 100644 --- a/README.md +++ b/README.md @@ -31,16 +31,31 @@ $ 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 の設定 @@ -48,21 +63,13 @@ VITE_SECRET_KEY=SecretKey ```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} ``` ## ライセンス diff --git a/check_stereo/main.ts b/check_stereo/main.ts index d26807a..8ec3f88 100644 --- a/check_stereo/main.ts +++ b/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); diff --git a/check_stereo_multi/main.ts b/check_stereo_multi/main.ts index 64ff1b9..e00888c 100644 --- a/check_stereo_multi/main.ts +++ b/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", diff --git a/messaging/main.ts b/messaging/main.ts index d1b5e06..f1253e2 100644 --- a/messaging/main.ts +++ b/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); diff --git a/recvonly/main.ts b/recvonly/main.ts index 898eb5e..5f3ee47 100644 --- a/recvonly/main.ts +++ b/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); diff --git a/replace_track/main.ts b/replace_track/main.ts index 6bd1493..7473ddc 100644 --- a/replace_track/main.ts +++ b/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); diff --git a/sendonly/main.ts b/sendonly/main.ts index 81ed3b8..ac571bc 100644 --- a/sendonly/main.ts +++ b/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); diff --git a/sendrecv/main.ts b/sendrecv/main.ts index b4b4771..9959aa9 100644 --- a/sendrecv/main.ts +++ b/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); diff --git a/simulcast/main.ts b/simulcast/main.ts index c5521d6..1864416 100644 --- a/simulcast/main.ts +++ b/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, diff --git a/spotlight_sendrecv/main.ts b/spotlight_sendrecv/main.ts index 47ea06b..685a19b 100644 --- a/spotlight_sendrecv/main.ts +++ b/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); diff --git a/src/misc.ts b/src/misc.ts index a14cb95..98ccde9 100644 --- a/src/misc.ts +++ b/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 => { 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; +};