-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #576 from shiguredo/feature/add-e2e-test-signaling…
…-message-type-close type: close の E2E テストを追加する
- Loading branch information
Showing
12 changed files
with
382 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <html lang="ja"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Sendonly test</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <h1>Sendonly test</h1> | ||
| <h3 id="sdk-version"></h3> | ||
| <button id="connect">connect</button> | ||
| <button id="disconnect">disconnect</button> | ||
| <button id="disconnect-api">disconnect-api</button> | ||
| <button id="get-stats">getStats</button><br /> | ||
| <div id="connection-id"></div> | ||
| <video id="local-video" autoplay="" playsinline="" controls="" muted="" | ||
| style="width: 320px; height: 240px; border: 1px solid black;"></video> | ||
| <div id="stats-report" style="white-space: pre-wrap; font-family: monospace;"></div> | ||
| <div id="stats-report-json"></div> | ||
| </div> | ||
|
|
||
| <script type="module" src="./main.mts"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import Sora, { | ||
| type SignalingNotifyMessage, | ||
| type SignalingEvent, | ||
| type ConnectionPublisher, | ||
| type SoraConnection, | ||
| type ConnectionOptions, | ||
| } from 'sora-js-sdk' | ||
|
|
||
| document.addEventListener('DOMContentLoaded', async () => { | ||
| const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL | ||
| const SORA_CHANNEL_ID_PREFIX = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || '' | ||
| const SORA_CHANNEL_ID_SUFFIX = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || '' | ||
| const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || '' | ||
|
|
||
| const client = new SoraClient( | ||
| SORA_SIGNALING_URL, | ||
| SORA_CHANNEL_ID_PREFIX, | ||
| SORA_CHANNEL_ID_SUFFIX, | ||
| ACCESS_TOKEN, | ||
| ) | ||
|
|
||
| // SDK バージョンの表示 | ||
| const sdkVersionElement = document.querySelector('#sdk-version') | ||
| if (sdkVersionElement) { | ||
| sdkVersionElement.textContent = `${Sora.version()}` | ||
| } | ||
|
|
||
| document.querySelector('#connect')?.addEventListener('click', async () => { | ||
| const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) | ||
| await client.connect(stream) | ||
| }) | ||
|
|
||
| document.querySelector('#disconnect')?.addEventListener('click', async () => { | ||
| await client.disconnect() | ||
| }) | ||
|
|
||
| document.querySelector('#disconnect-api')?.addEventListener('click', async () => { | ||
| await client.apiDisconnect() | ||
| }) | ||
|
|
||
| document.querySelector('#get-stats')?.addEventListener('click', async () => { | ||
| const statsReport = await client.getStats() | ||
| const statsDiv = document.querySelector('#stats-report') as HTMLElement | ||
| const statsReportJsonDiv = document.querySelector('#stats-report-json') | ||
| if (statsDiv && statsReportJsonDiv) { | ||
| let statsHtml = '' | ||
| const statsReportJson: Record<string, unknown>[] = [] | ||
| for (const report of statsReport.values()) { | ||
| statsHtml += `<h3>Type: ${report.type}</h3><ul>` | ||
| const reportJson: Record<string, unknown> = { id: report.id, type: report.type } | ||
| for (const [key, value] of Object.entries(report)) { | ||
| if (key !== 'type' && key !== 'id') { | ||
| statsHtml += `<li><strong>${key}:</strong> ${value}</li>` | ||
| reportJson[key] = value | ||
| } | ||
| } | ||
| statsHtml += '</ul>' | ||
| statsReportJson.push(reportJson) | ||
| } | ||
| statsDiv.innerHTML = statsHtml | ||
| // データ属性としても保存（オプション） | ||
| statsDiv.dataset.statsReportJson = JSON.stringify(statsReportJson) | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| class SoraClient { | ||
| private debug = false | ||
| private channelId: string | ||
| private metadata: { access_token: string } | ||
| private options: ConnectionOptions = { | ||
| dataChannelSignaling: true, | ||
| ignoreDisconnectWebSocket: true, | ||
| } | ||
|
|
||
| private sora: SoraConnection | ||
| private connection: ConnectionPublisher | ||
|
|
||
| constructor( | ||
| signaling_url: string, | ||
| channel_id_prefix: string, | ||
| channel_id_suffix: string, | ||
| access_token: string, | ||
| ) { | ||
| this.sora = Sora.connection(signaling_url, this.debug) | ||
|
|
||
| // channel_id の生成 | ||
| this.channelId = `${channel_id_prefix}sendonly_recvonly${channel_id_suffix}` | ||
| // access_token を指定する metadata の生成 | ||
| this.metadata = { access_token: access_token } | ||
|
|
||
| this.connection = this.sora.sendonly(this.channelId, this.metadata, this.options) | ||
| this.connection.on('notify', this.onNotify.bind(this)) | ||
|
|
||
| // E2E テスト用のコード | ||
| this.connection.on('signaling', this.onSignaling.bind(this)) | ||
| } | ||
|
|
||
| async connect(stream: MediaStream): Promise<void> { | ||
| await this.connection.connect(stream) | ||
|
|
||
| const videoElement = document.querySelector<HTMLVideoElement>('#local-video') | ||
| if (videoElement !== null) { | ||
| videoElement.srcObject = stream | ||
| } | ||
| } | ||
|
|
||
| async disconnect(): Promise<void> { | ||
| await this.connection.disconnect() | ||
|
|
||
| const videoElement = document.querySelector<HTMLVideoElement>('#local-video') | ||
| if (videoElement !== null) { | ||
| videoElement.srcObject = null | ||
| } | ||
| } | ||
|
|
||
| getStats(): Promise<RTCStatsReport> { | ||
| if (this.connection.pc === null) { | ||
| return Promise.reject(new Error('PeerConnection is not ready')) | ||
| } | ||
| return this.connection.pc.getStats() | ||
| } | ||
|
|
||
| private onNotify(event: SignalingNotifyMessage): void { | ||
| if ( | ||
| event.event_type === 'connection.created' && | ||
| this.connection.connectionId === event.connection_id | ||
| ) { | ||
| const connectionIdElement = document.querySelector('#connection-id') | ||
| if (connectionIdElement) { | ||
| connectionIdElement.textContent = event.connection_id | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // E2E テスト用のコード | ||
| private onSignaling(event: SignalingEvent): void { | ||
| if (event.type === 'onmessage-switched') { | ||
| console.log('[signaling]', event.type, event.transportType) | ||
| } | ||
| if (event.type === 'onmessage-close') { | ||
| console.log('[signaling]', event.type, event.transportType) | ||
| } | ||
| } | ||
|
|
||
| // E2E テスト側で実行した方が良い気がする | ||
| async apiDisconnect(): Promise<void> { | ||
| const apiUrl = import.meta.env.VITE_SORA_API_URL | ||
| if (apiUrl === '') { | ||
| console.error('VITE_SORA_API_URL is not set') | ||
| } | ||
| const response = await fetch(apiUrl, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| 'X-Sora-Target': 'Sora_20151104.DisconnectConnection', | ||
| }, | ||
| body: JSON.stringify({ | ||
| channel_id: this.channelId, | ||
| connection_id: this.connection.connectionId, | ||
| }), | ||
| }) | ||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! status: ${response.status}`) | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.