├── .env.template ├── .github ├── renovate.json └── workflows │ ├── ci.yml │ ├── deploy.yml │ └── e2e-test.yml ├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── CHANGES.md ├── LICENSE ├── README.md ├── biome.jsonc ├── canary.py ├── devtools ├── index.html ├── package.json ├── src │ ├── App.tsx │ ├── components │ │ ├── AudioCodecMimeType.tsx │ │ ├── AudioInputDevice.tsx │ │ ├── AudioOutputDevice.tsx │ │ ├── AudioToggle.tsx │ │ ├── AyameWebSdkVersion.tsx │ │ ├── CameraPermissionState.tsx │ │ ├── ClientId.tsx │ │ ├── ConnectButton.tsx │ │ ├── ConnectionSettings.tsx │ │ ├── CopyUrlButton.tsx │ │ ├── DatasetConnectionState.tsx │ │ ├── DebugToggle.tsx │ │ ├── DisconnectButton.tsx │ │ ├── LocalVideo.tsx │ │ ├── MediaSettings.tsx │ │ ├── MicrophonePermissionState.tsx │ │ ├── RemoteVideo.tsx │ │ ├── RequestMediaPermissionButton.tsx │ │ ├── RoomId.tsx │ │ ├── SignalingKey.tsx │ │ ├── SignalingUrl.tsx │ │ ├── StandaloneToggle.tsx │ │ ├── TransceiverDirection.tsx │ │ ├── VideoCodecMimeType.tsx │ │ ├── VideoInputDevice.tsx │ │ └── VideoToggle.tsx │ ├── main.tsx │ ├── store │ │ ├── createAyameSlice.ts │ │ ├── createDeviceSlice.ts │ │ ├── createPermissionSlice.ts │ │ ├── createSettingsSlice.ts │ │ └── useStore.ts │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.mjs ├── package.json ├── playwright.config.mts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── src ├── ayame.ts ├── types.d.ts └── utils.ts ├── tests ├── codec.test.ts ├── devtools.test.ts └── version.test.ts ├── tsconfig.json ├── typedoc.json └── vite.config.mjs /.env.template: -------------------------------------------------------------------------------- 1 | VITE_AYAME_SIGNALING_URL=wss://ayame-labo.shiguredo.app/signaling 2 | VITE_AYAME_ROOM_ID_PREFIX=github-login-name@ 3 | VITE_AYAME_ROOM_NAME=ayame-devtools 4 | VITE_AYAME_SIGNALING_KEY=signaling-key 5 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ], 6 | "dependencyDashboard": false, 7 | "packageRules": [ 8 | { 9 | "matchUpdateTypes": [ 10 | "minor", 11 | "patch", 12 | "pin", 13 | "digest" 14 | ], 15 | "platformAutomerge": true, 16 | "automerge": true 17 | }, 18 | { 19 | "matchUpdateTypes": [ 20 | "minor", 21 | "patch", 22 | "pin", 23 | "digest" 24 | ], 25 | "matchPackagePatterns": [ 26 | "rollup" 27 | ], 28 | "groupName": "rollup", 29 | "platformAutomerge": true, 30 | "automerge": true 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - develop 7 | - "feature/*" 8 | - "releases/*" 9 | jobs: 10 | ci_job: 11 | runs-on: ubuntu-24.04 12 | strategy: 13 | matrix: 14 | node-version: ["20", "22", "23"] 15 | steps: 16 | - uses: actions/checkout@v4 17 | - uses: actions/setup-node@v4 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - uses: pnpm/action-setup@v4 21 | with: 22 | version: 10 23 | - run: pnpm install 24 | - run: pnpm run lint 25 | env: 26 | CI: true 27 | - run: pnpm run check 28 | env: 29 | CI: true 30 | - run: pnpm run build 31 | env: 32 | CI: true 33 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: GitHub Pages Deploy 2 | 3 | on: 4 | push: 5 | branches: ["develop"] 6 | 7 | workflow_dispatch: 8 | 9 | jobs: 10 | deploy_job: 11 | runs-on: ubuntu-24.04 12 | steps: 13 | - uses: actions/checkout@v4 14 | - uses: actions/setup-node@v4 15 | with: 16 | node-version: "22" 17 | - uses: pnpm/action-setup@v4 18 | with: 19 | version: 10 20 | - run: pnpm install 21 | - run: pnpm build 22 | - name: Build devtools 23 | run: pnpm build:devtools 24 | - name: Build typedoc 25 | run: pnpm build:typedoc 26 | - name: copy 27 | run: | 28 | mkdir -p ./output/devtools 29 | cp -r ./typedoc ./output/typedoc 30 | cp -r ./devtools/dist/* ./output/devtools 31 | cp -r ./devtools/dist/assets ./output/devtools/assets 32 | - name: Upload files 33 | uses: actions/upload-pages-artifact@v3 34 | with: 35 | path: ./output 36 | - name: Slack Notification 37 | if: failure() 38 | uses: rtCamp/action-slack-notify@v2 39 | env: 40 | SLACK_CHANNEL: media-processors 41 | SLACK_COLOR: danger 42 | SLACK_TITLE: Failure test 43 | SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} 44 | 45 | deploy: 46 | needs: deploy_job 47 | permissions: 48 | pages: write 49 | id-token: write 50 | environment: 51 | name: github-pages 52 | url: ${{ steps.deployment.outputs.page_url }} 53 | runs-on: ubuntu-24.04 54 | steps: 55 | - name: Deploy to GitHub Pages 56 | id: deployment 57 | uses: actions/deploy-pages@v4 -------------------------------------------------------------------------------- /.github/workflows/e2e-test.yml: -------------------------------------------------------------------------------- 1 | name: e2e-test 2 | 3 | on: 4 | push: 5 | paths-ignore: 6 | - "**.md" 7 | - "LICENSE" 8 | # branches-ignore: 9 | # - feature/react-zustand 10 | schedule: 11 | # UTC 時間で毎日 2:00 (JST で 11:00) に実行、月曜日から金曜日 12 | - cron: "0 2 * * 1-5" 13 | 14 | jobs: 15 | e2e_test_job: 16 | strategy: 17 | matrix: 18 | node-version: ["20", "22", "23"] 19 | # browser: ["chromium", "firefox", "webkit"] 20 | browser: ["chromium"] 21 | env: 22 | VITE_AYAME_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }} 23 | VITE_AYAME_ROOM_ID_PREFIX: ${{ secrets.TEST_ROOM_ID_PREFIX }} 24 | VITE_AYAME_SIGNALING_KEY: ${{ secrets.TEST_SIGNALING_KEY }} 25 | runs-on: ubuntu-24.04 26 | timeout-minutes: 10 27 | steps: 28 | - uses: actions/checkout@v4 29 | - uses: actions/setup-node@v4 30 | with: 31 | node-version: ${{ matrix.node-version }} 32 | - uses: pnpm/action-setup@v4 33 | with: 34 | version: 10 35 | - run: pnpm --version 36 | - run: pnpm install 37 | - run: pnpm build 38 | - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps 39 | - run: pnpm exec playwright test --project=${{ matrix.browser }} 40 | env: 41 | VITE_AYAME_ROOM_NAME: ${{ matrix.node-version }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typedoc/ 3 | apidoc/ 4 | .log/ 5 | dist/ 6 | .DS_Store 7 | 8 | # .env 9 | .env* 10 | !.env.template 11 | 12 | # playwright 13 | /test-results/ 14 | /playwright-report/ 15 | /blob-report/ 16 | /playwright/.cache/ 17 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["biomejs.biome"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "[html]": { 4 | "editor.defaultFormatter": "vscode.html-language-features" 5 | }, 6 | "[javascript]": { 7 | "editor.defaultFormatter": "biomejs.biome" 8 | }, 9 | "[javascriptreact]": { 10 | "editor.defaultFormatter": "biomejs.biome" 11 | }, 12 | "[typescript]": { 13 | "editor.defaultFormatter": "biomejs.biome" 14 | }, 15 | "[typescriptreact]": { 16 | "editor.defaultFormatter": "biomejs.biome" 17 | }, 18 | "editor.codeActionsOnSave": { 19 | "quickfix.biome": "explicit", 20 | "source.organizeImports.biome": "explicit" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /CHANGES.md: -------------------------------------------------------------------------------- 1 | # リリースノート 2 | 3 | - CHANGE 4 | - 下位互換のない変更 5 | - UPDATE 6 | - 下位互換がある変更 7 | - ADD 8 | - 下位互換がある追加 9 | - FIX 10 | - バグ修正 11 | 12 | ## develop 13 | 14 | ## 2025.1.1 15 | 16 | - [FIX] Ayame Web SDK のバージョンを取得できなかったのを修正する 17 | - @voluntas 18 | 19 | ### misc 20 | 21 | - [ADD] Ayame Web SDK のバージョンを確認する E2E テストを追加 22 | - @voluntas 23 | 24 | ## 2025.1.0 25 | 26 | - [CHANGE] `ConnectionVideoOption` の `codec` を `codecMimeType` へ変更する 27 | - @voluntas 28 | - [CHANGE] `removestream` コールバックは利用されていないため廃止する 29 | - @voluntas 30 | - [UPDATE] `setCodecPreferences` を利用してコーデックを指定できるようにする 31 | - @voluntas 32 | - [ADD] `AyameAddStreamEvent` を追加する 33 | - `addstream` コールバックのイベント型を `AyameAddStreamEvent` として追加する 34 | - @voluntas 35 | - [ADD] `standalone` モードに対応する 36 | - `options` に `standalone` を追加する 37 | - `standalone` モード時は、接続完了時に ayame に `type: connected` を送信する 38 | - `standalone` モード時は、ayame から WebSocket 接続が切断されても、ブラウザ間の接続は維持する 39 | - @Hexa 40 | - [FIX] `disconnect` の処理が正常に動作しない問題を修正する 41 | - @voluntas 42 | 43 | ### misc 44 | 45 | - [CHANGE] ConnectionBase を Connection へ変更する 46 | - @voluntas 47 | - [CHANGE] rollup から [Vite](https://vite.dev/) へ変更 48 | - @voluntas 49 | - [CHANGE] npm から [pnpm](https://pnpm.io/) に変更 50 | - @voluntas 51 | - [CHANGE] eslint から [biome](https://biomejs.dev/) へ変更 52 | - @voluntas 53 | - [CHANGE] prettier から [biome](https://biomejs.dev/) へ変更する 54 | - @voluntas 55 | - [CHANGE] GitHub Actions の node-version を 20 と 22 にする 56 | - @voluntas 57 | - [UPDATE] ubuntu-latest から ubuntu-24.04 に変更する 58 | - @voluntas 59 | - [ADD] 検証用の Ayame DevTools を追加 60 | - @voluntas 61 | - [ADD] Playwright と Ayame DevTools を利用した E2E テストを追加 62 | - @voluntas 63 | 64 | ## 2022.1 65 | 66 | - [CHANGE] packege.json の devDependencies を最新へ追従する 67 | - `rollup` を `^2.66.1` へ上げる 68 | - `rollup-plugin-terser` を `^7.0.2` へ上げる 69 | - `@rollup/plugin-node-resolve` を `^13.1.3` に変更する 70 | - `@rollup/plugin-typescript` を `^8.3.0` に変更する 71 | - `typescript` を `^4.5.5` に上げる 72 | - `@typescript-eslint/eslint-plugin` を `^5.10.` に上げる 73 | - `@typescript-eslint/parse` を `^5.10.` に上げる 74 | - `@types/node` を `^16.11.7` へ上げる 75 | - `@types/webrtc` を `^0.0.31` へ上げる 76 | - `eslint` を `^8.8.0` に上げる 77 | - `eslint-config-prettier` を `^8.3.0` に上げる 78 | - `eslint-plugin-import` を `^2.25.4` に上げる 79 | - @voluntas 80 | - [CHANGE] esdoc を削除 81 | - @voluntas 82 | - [CHANGE] yarn の利用をやめ npm に切り替える 83 | - @voluntas 84 | - [CHANGE] `.eslintrc.js` から `prettier/@typescript-eslint` を削除 85 | - @voluntas 86 | - [CHANGE] GitHub Actions の node-version を 16 固定にする 87 | - @voluntas 88 | - [CHANGE] Google STUN サーバを削除 89 | - @voluntas 90 | - [CHANGE] tsconfig.json の設定を変更 91 | - target / module を es2020 へ変更 92 | - newLine を追加 93 | - declarationDir を追加 94 | - @voluntas 95 | - [UPDATE] rollup.config.js の設定を変更 96 | - sourceMap を sourcemap へ変更 97 | - entry を削除 98 | - rollup-plugin-node-resolve を @rollup/plugin-node-resolve へ変更 99 | - rollup-plugin-typescript2 を @rollup/plugin-typescript へ変更 100 | - format: 'module' で mjs を出力する 101 | - @voluntas 102 | - [UPDATE] GitHub Actions の actions/checkout を v2 に上げる 103 | - @voluntas 104 | - [ADD] `.prettierrc.json` を追加 105 | - @voluntas 106 | - [ADD] VideoCodecOption に `AV1` と `H.265` を追加 107 | - @voluntas 108 | - [ADD] npm run doc コマンド追加 109 | - TypeDoc により apidoc/ に出力 110 | - @voluntas 111 | 112 | ## 2020.3 113 | 114 | - [ADD] TypeScript の型定義ファイルを出力するようにする 115 | - @horiuchi 116 | 117 | ## 2020.2.1 118 | 119 | - [ADD] ayame.min.js / ayame.js を 2020.2.1 にアップデート 120 | 121 | ## 2020.2 122 | 123 | **DataChannel 関連で下位互換性がなくなっていますので注意してください** 124 | 125 | - [CHANGE] addDataChannel, sendData を削除する 126 | - @Hexa 127 | - [CHANGE] on('data') コールバックを削除する 128 | - @Hexa 129 | - [ADD] createDataChannel を追加する 130 | - @Hexa 131 | - [ADD] on('datachannel') コールバックを追加する 132 | - @Hexa 133 | - [FIX] offer 側の場合のみ RTCDataChannel オブジェクトを作成するように修正する 134 | - @Hexa 135 | - [CHANGE] Ayame が isExistUser を送ってくる場合のみ接続できるようにする 136 | - @Hexa 137 | - [FIX] bye を受信した場合にも on('disconnect') コールバックが発火するように修正する 138 | - @Hexa 139 | 140 | ## 2020.1.2 141 | 142 | - [FIX] 依存ライブラリを最新にする 143 | - @voluntas 144 | 145 | ## 2020.1.1 146 | 147 | - [FIX] on('disconnect') コールバックが発火するように修正する 148 | - @Hexa 149 | 150 | ## 2020.1.0 151 | 152 | **リリース番号フォーマットを変更しました** 153 | 154 | - [FIX] 再度の接続時にオブジェクトを作成しないようにする 155 | - @Hexa 156 | - [FIX] 切断時の他方の切断処理をエラーにならないように修正する 157 | - @Hexa 158 | - [UPDATE] close 待ち間隔を 400ms に変更する 159 | - @Hexa 160 | - [UPDATE] テストの整理 161 | - @Hexa 162 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebRTC Signaling Server Ayame Web SDK 2 | 3 | [![npm version](https://badge.fury.io/js/%40open-ayame%2Fayame-web-sdk.svg)](https://badge.fury.io/js/%40open-ayame%2Fayame-web-sdk) 4 | [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) 5 | [![Actions Status](https://github.com/OpenAyame/ayame-web-sdk/workflows/Lint%20And%20Flow%20Test/badge.svg)](https://github.com/OpenAyame/ayame-web-sdk/actions) 6 | 7 | ## About Shiguredo's open source software 8 | 9 | We will not respond to PRs or issues that have not been discussed on Discord. Also, Discord is only available in Japanese. 10 | 11 | Please read before use. 12 | 13 | ## 時雨堂のオープンソースソフトウェアについて 14 | 15 | 利用前に をお読みください。 16 | 17 | ## 概要 18 | 19 | [WebRTC Signaling Server Ayame](https://github.com/OpenAyame/ayame) をブラウザから利用する SDK です。 20 | 21 | ## 使い方 22 | 23 | ### npm 24 | 25 | ```bash 26 | npm install @open-ayame/ayame-web-sdk 27 | ``` 28 | 29 | ### pnpm 30 | 31 | ```bash 32 | pnpm add @open-ayame/ayame-web-sdk 33 | ``` 34 | 35 | ## 動作環境 36 | 37 | 最新のブラウザを利用してください。 38 | 39 | - Google Chrome 40 | - Apple Safari 41 | - Mozilla Firefox 42 | - Microsoft Edge 43 | 44 | ## Ayame DevTools 45 | 46 | Ayame Web SDK を利用した、開発ツールです。 47 | 48 | - [Ayame Labo](https://ayame-labo.shiguredo.app/) を利用する例です 49 | - `GitHub ログイン名@ayame-devtools` というルーム ID にしていますが、ルーム名の `ayame-devtools` は任意の文字列に変更できます 50 | - シグナリングキーは [Ayame Labo](https://ayame-labo.shiguredo.app/) のダッシュボード上で取得してください 51 | 52 | ```bash 53 | # cp .env.template .env.local 54 | VITE_AYAME_SIGNALING_URL=wss://ayame-labo.shiguredo.app/signaling 55 | VITE_AYAME_ROOM_ID_PREFIX={GitHubログイン名}@ 56 | VITE_AYAME_ROOM_NAME=ayame-devtools 57 | VITE_AYAME_SIGNALING_KEY={シグナリングキー} 58 | ``` 59 | 60 | ```bash 61 | pnpm install 62 | pnpm build 63 | pnpm dev 64 | ``` 65 | 66 | にアクセスすると、以下のような画面が表示されます。 67 | 68 | [![Image from Gyazo](https://i.gyazo.com/69b1e9529f1a0e26bd3bcd3b74c95021.png)](https://gyazo.com/69b1e9529f1a0e26bd3bcd3b74c95021) 69 | 70 | この画面を 2 つタブで開いて、 `Connect` ボタンを押して映像が双方向に表示されたら成功です。 71 | 72 | ### オンライン Ayame DevTools 73 | 74 | 以下から利用できます。 75 | 76 | 77 | 78 | ## 最小限のサンプル 79 | 80 | [OpenAyame/ayame-web-sdk-examples](https://github.com/OpenAyame/ayame-web-sdk-examples) に最小限のサンプルコードを用意しています。 81 | 82 | ## API ドキュメント 83 | 84 | API ドキュメントは以下の URL を参照してください。 85 | 86 | 87 | 88 | ## ライセンス 89 | 90 | Apache License 2.0 91 | 92 | ```text 93 | Copyright 2019-2025, Shiguredo Inc. 94 | 95 | Licensed under the Apache License, Version 2.0 (the "License"); 96 | you may not use this file except in compliance with the License. 97 | You may obtain a copy of the License at 98 | 99 | http://www.apache.org/licenses/LICENSE-2.0 100 | 101 | Unless required by applicable law or agreed to in writing, software 102 | distributed under the License is distributed on an "AS IS" BASIS, 103 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 104 | See the License for the specific language governing permissions and 105 | limitations under the License. 106 | ``` 107 | -------------------------------------------------------------------------------- /biome.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", 3 | "files": { 4 | "ignore": [ 5 | "dist/**" 6 | ] 7 | }, 8 | "organizeImports": { 9 | "enabled": true 10 | }, 11 | "linter": { 12 | "enabled": true, 13 | "rules": { 14 | "recommended": true, 15 | "suspicious": { 16 | "noExplicitAny": "off" 17 | } 18 | } 19 | }, 20 | "formatter": { 21 | "enabled": true, 22 | "formatWithErrors": false, 23 | "ignore": [], 24 | "indentStyle": "space", 25 | "indentWidth": 2, 26 | "lineWidth": 100 27 | }, 28 | "json": { 29 | "parser": { 30 | "allowComments": true 31 | }, 32 | "formatter": { 33 | "enabled": true, 34 | "indentStyle": "space", 35 | "indentWidth": 2, 36 | "lineWidth": 100 37 | } 38 | }, 39 | "javascript": { 40 | "formatter": { 41 | "enabled": true, 42 | "quoteStyle": "single", 43 | "jsxQuoteStyle": "double", 44 | "trailingCommas": "all", 45 | "semicolons": "asNeeded", 46 | "arrowParentheses": "always", 47 | "indentStyle": "space", 48 | "indentWidth": 2, 49 | "lineWidth": 100, 50 | "quoteProperties": "asNeeded" 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /canary.py: -------------------------------------------------------------------------------- 1 | import argparse 2 | import re 3 | import subprocess 4 | from typing import Optional 5 | 6 | 7 | # ファイルを読み込み、バージョンを更新 8 | def update_version(file_path: str, dry_run: bool) -> Optional[str]: 9 | with open(file_path, "r", encoding="utf-8") as f: 10 | content: str = f.read() 11 | 12 | # 現在のバージョンを取得 13 | current_version_match = re.search(r'"version"\s*:\s*"([\d\.\w-]+)"', content) 14 | if not current_version_match: 15 | raise ValueError("Version not found or incorrect format in package.json") 16 | 17 | current_version: str = current_version_match.group(1) 18 | 19 | # バージョンが -canary.X を持っている場合の更新 20 | if "-canary." in current_version: 21 | new_content, count = re.subn( 22 | r'("version"\s*:\s*")(\d+\.\d+\.\d+-canary\.)(\d+)', 23 | lambda m: f"{m.group(1)}{m.group(2)}{int(m.group(3)) + 1}", 24 | content, 25 | ) 26 | else: 27 | # -canary.X がない場合、次のマイナーバージョンにして -canary.0 を追加 28 | new_content, count = re.subn( 29 | r'("version"\s*:\s*")(\d+)\.(\d+)\.(\d+)', 30 | lambda m: f"{m.group(1)}{m.group(2)}.{int(m.group(3)) + 1}.0-canary.0", 31 | content, 32 | ) 33 | 34 | if count == 0: 35 | raise ValueError("Version not found or incorrect format in package.json") 36 | 37 | # 新しいバージョンを確認 38 | new_version_match = re.search(r'"version"\s*:\s*"([\d\.\w-]+)"', new_content) 39 | if not new_version_match: 40 | raise ValueError("Failed to extract the new version after the update.") 41 | 42 | new_version: str = new_version_match.group(1) 43 | 44 | print(f"Current version: {current_version}") 45 | print(f"New version: {new_version}") 46 | confirmation: str = ( 47 | input("Do you want to update the version? (Y/n): ").strip().lower() 48 | ) 49 | 50 | if confirmation != "y": 51 | print("Version update canceled.") 52 | return None 53 | 54 | # Dry-run 時の動作 55 | if dry_run: 56 | print("Dry-run: Version would be updated to:") 57 | print(new_content) 58 | else: 59 | with open(file_path, "w", encoding="utf-8") as f: 60 | f.write(new_content) 61 | print(f"Version updated in package.json to {new_version}") 62 | 63 | return new_version 64 | 65 | 66 | # pnpm dist の実行 67 | def run_pnpm_operations(dry_run: bool) -> None: 68 | if dry_run: 69 | print("Dry-run: Would run 'pnpm dist'") 70 | else: 71 | subprocess.run(["pnpm", "dist"], check=True) 72 | print("pnpm dist executed") 73 | 74 | 75 | # git コミット、タグ、プッシュを実行 76 | def git_commit_version(new_version: str, dry_run: bool) -> None: 77 | if dry_run: 78 | print("Dry-run: Would run 'git add package.json'") 79 | print(f"Dry-run: Would run '[canary] Bump version to {new_version}'") 80 | else: 81 | subprocess.run(["git", "add", "package.json"], check=True) 82 | subprocess.run( 83 | ["git", "commit", "-m", f"[canary] Bump version to {new_version}"], 84 | check=True, 85 | ) 86 | print(f"Version bumped and committed: {new_version}") 87 | 88 | 89 | # git コミット、タグ、プッシュを実行 90 | def git_operations_after_build(new_version: str, dry_run: bool) -> None: 91 | if dry_run: 92 | print(f"Dry-run: Would run 'git tag {new_version}'") 93 | print("Dry-run: Would run 'git push'") 94 | print(f"Dry-run: Would run 'git push origin {new_version}'") 95 | else: 96 | subprocess.run(["git", "tag", new_version], check=True) 97 | subprocess.run(["git", "push"], check=True) 98 | subprocess.run(["git", "push", "origin", new_version], check=True) 99 | 100 | 101 | # メイン処理 102 | def main() -> None: 103 | parser = argparse.ArgumentParser( 104 | description="Update package.json version, run pnpm install, build, and commit changes." 105 | ) 106 | parser.add_argument( 107 | "--dry-run", 108 | action="store_true", 109 | help="Run in dry-run mode without making actual changes", 110 | ) 111 | args = parser.parse_args() 112 | 113 | package_json_path: str = "package.json" 114 | 115 | # バージョン更新 116 | new_version: Optional[str] = update_version(package_json_path, args.dry_run) 117 | 118 | if not new_version: 119 | return # ユーザーが確認をキャンセルした場合、処理を中断 120 | 121 | # バージョン更新後にまず git commit 122 | git_commit_version(new_version, args.dry_run) 123 | 124 | # pnpm install & build 実行 125 | run_pnpm_operations(args.dry_run) 126 | 127 | # ビルド後のファイルを git commit, タグ付け、プッシュ 128 | git_operations_after_build(new_version, args.dry_run) 129 | 130 | 131 | if __name__ == "__main__": 132 | main() 133 | -------------------------------------------------------------------------------- /devtools/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ayame DevTools 6 | 7 | 8 | 9 | 10 |
11 |

Ayame DevTools

12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /devtools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@open-ayame/ayame-devtools", 3 | "scripts": { 4 | "lint": "biome lint .", 5 | "fmt": "biome format --write .", 6 | "check": "tsc --noEmit" 7 | }, 8 | "dependencies": { 9 | "@open-ayame/ayame-web-sdk": "workspace:*", 10 | "react": "19.1.0", 11 | "react-dom": "19.1.0", 12 | "zustand": "5.0.5" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "19.1.6", 16 | "@types/react-dom": "19.1.5", 17 | "@vitejs/plugin-react": "4.5.1" 18 | } 19 | } -------------------------------------------------------------------------------- /devtools/src/App.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useEffect } from 'react' 3 | import AyameVersion from './components/AyameWebSdkVersion' 4 | import ConnectButton from './components/ConnectButton' 5 | import ConnectionSettings from './components/ConnectionSettings' 6 | import CopyUrlButton from './components/CopyUrlButton' 7 | import DatasetConnectionState from './components/DatasetConnectionState' 8 | import DisconnectButton from './components/DisconnectButton' 9 | import LocalVideo from './components/LocalVideo' 10 | import MediaSettings from './components/MediaSettings' 11 | import RemoteVideo from './components/RemoteVideo' 12 | import { useStore } from './store/useStore' 13 | 14 | const App: React.FC = () => { 15 | const setSettingsFromUrl = useStore((state) => state.setSettingsFromUrl) 16 | 17 | useEffect(() => { 18 | const params = new URLSearchParams(window.location.search) 19 | setSettingsFromUrl(params) 20 | }, [setSettingsFromUrl]) 21 | 22 | return ( 23 | <> 24 |
25 | Ayame Web SDK Version: 26 |
27 |

28 | 29 |

30 | 31 | 32 |

33 | 34 | 35 |

36 |
37 | 38 |
39 |
40 | 41 |
42 | 43 | 44 | ) 45 | } 46 | 47 | export default App 48 | -------------------------------------------------------------------------------- /devtools/src/components/AudioCodecMimeType.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useEffect, useState } from 'react' 3 | import { useStore } from '../store/useStore' 4 | 5 | import { getAvailableCodecs } from '@open-ayame/ayame-web-sdk' 6 | 7 | const VideoCodecMimeType: React.FC = () => { 8 | const [codecs, setCodecs] = useState([]) 9 | const setAudioCodecMimeType = useStore((state) => state.setAudioCodecMimeType) 10 | const audioCodecMimeType = useStore((state) => state.settings.audio.codecMimeType) 11 | const audioDirection = useStore((state) => state.settings.audio.direction) 12 | 13 | useEffect(() => { 14 | const mimeTypes = getAvailableCodecs( 15 | 'audio', 16 | audioDirection === 'sendrecv' || audioDirection === 'sendonly' ? 'sender' : 'receiver', 17 | ) 18 | setCodecs(mimeTypes) 19 | }, [audioDirection]) 20 | 21 | const handleChange = (e: React.ChangeEvent) => { 22 | setAudioCodecMimeType(e.target.value) 23 | } 24 | 25 | return ( 26 | 34 | ) 35 | } 36 | 37 | export default VideoCodecMimeType 38 | -------------------------------------------------------------------------------- /devtools/src/components/AudioInputDevice.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useEffect, useState } from 'react' 3 | import { useStore } from '../store/useStore' 4 | 5 | const AudioInputDevice: React.FC = () => { 6 | const [devices, setDevices] = useState([]) 7 | const setAudioInputDeviceId = useStore((state) => state.setAudioInputDeviceId) 8 | const audioInputDeviceId = useStore((state) => state.mediaDevice.audioInputDeviceId) 9 | 10 | useEffect(() => { 11 | const getDevices = async () => { 12 | const permissionStatus = await navigator.permissions.query({ 13 | name: 'microphone' as PermissionName, 14 | }) 15 | 16 | const handlePermissionChange = async () => { 17 | if (permissionStatus.state === 'granted') { 18 | const devices = await navigator.mediaDevices.enumerateDevices() 19 | const audioInputDevices = devices.filter((device) => device.kind === 'audioinput') 20 | setDevices(audioInputDevices) 21 | } else { 22 | setDevices([]) 23 | } 24 | } 25 | 26 | // 初期状態の処理 27 | handlePermissionChange() 28 | 29 | // 権限変更の監視 30 | permissionStatus.onchange = handlePermissionChange 31 | 32 | return () => { 33 | // ククリーンアップ 34 | permissionStatus.onchange = null 35 | } 36 | } 37 | getDevices() 38 | }, []) 39 | 40 | const handleChange = (e: React.ChangeEvent) => { 41 | setAudioInputDeviceId(e.target.value) 42 | } 43 | 44 | return ( 45 | 52 | ) 53 | } 54 | 55 | export default AudioInputDevice 56 | -------------------------------------------------------------------------------- /devtools/src/components/AudioOutputDevice.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useEffect, useState } from 'react' 3 | import { useStore } from '../store/useStore' 4 | 5 | const AudioOutputDevice: React.FC = () => { 6 | const [devices, setDevices] = useState([]) 7 | const setAudioOutputDeviceId = useStore((state) => state.setAudioOutputDeviceId) 8 | const audioOutputDeviceId = useStore((state) => state.mediaDevice.audioOutputDeviceId) 9 | 10 | useEffect(() => { 11 | const getDevices = async () => { 12 | const permissionStatus = await navigator.permissions.query({ 13 | name: 'microphone' as PermissionName, 14 | }) 15 | 16 | const handlePermissionChange = async () => { 17 | if (permissionStatus.state === 'granted') { 18 | const devices = await navigator.mediaDevices.enumerateDevices() 19 | const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput') 20 | setDevices(audioOutputDevices) 21 | } else { 22 | setDevices([]) 23 | } 24 | } 25 | 26 | // 初期状態の処理 27 | handlePermissionChange() 28 | 29 | // 権限変更の監視 30 | permissionStatus.onchange = handlePermissionChange 31 | 32 | return () => { 33 | // ククリーンアップ 34 | permissionStatus.onchange = null 35 | } 36 | } 37 | getDevices() 38 | }, []) 39 | 40 | const handleChange = (e: React.ChangeEvent) => { 41 | setAudioOutputDeviceId(e.target.value) 42 | } 43 | 44 | return ( 45 | 52 | ) 53 | } 54 | 55 | export default AudioOutputDevice 56 | -------------------------------------------------------------------------------- /devtools/src/components/AudioToggle.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useStore } from '../store/useStore' 3 | 4 | const AudioToggle: React.FC = () => { 5 | const isEnable = useStore((state) => state.settings.audio.isEnable) 6 | const toggleAudio = useStore((state) => state.toggleAudio) 7 | 8 | return ( 9 | toggleAudio(e.target.checked)} /> 10 | ) 11 | } 12 | 13 | export default AudioToggle 14 | -------------------------------------------------------------------------------- /devtools/src/components/AyameWebSdkVersion.tsx: -------------------------------------------------------------------------------- 1 | import { version } from '@open-ayame/ayame-web-sdk' 2 | import { useEffect } from 'react' 3 | import { useStore } from '../store/useStore' 4 | const AyameVersion = () => { 5 | const ayameVersion = useStore((state) => state.ayame.version) 6 | const setAyameVersion = useStore((state) => state.setAyameVersion) 7 | 8 | useEffect(() => { 9 | setAyameVersion(version()) 10 | }, [setAyameVersion]) 11 | 12 | return {version()} 13 | } 14 | 15 | export default AyameVersion 16 | -------------------------------------------------------------------------------- /devtools/src/components/CameraPermissionState.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useEffect } from 'react' 3 | import { useStore } from '../store/useStore' 4 | 5 | const CameraPermissionState: React.FC = () => { 6 | const cameraPermissionState = useStore((state) => state.permissionState.cameraState) 7 | const setCameraPermissionState = useStore((state) => state.setCameraPermissionState) 8 | 9 | useEffect(() => { 10 | setCameraPermissionState() 11 | }, [setCameraPermissionState]) 12 | 13 | return <>{cameraPermissionState} 14 | } 15 | 16 | export default CameraPermissionState 17 | -------------------------------------------------------------------------------- /devtools/src/components/ClientId.tsx: -------------------------------------------------------------------------------- 1 | import { useStore } from '../store/useStore' 2 | 3 | const ClientId = () => { 4 | const clientId = useStore((state) => state.settings.clientId) 5 | const setClientId = useStore((state) => state.setClientId) 6 | 7 | const handleChange = (e: React.ChangeEvent) => { 8 | setClientId(e.target.value) 9 | } 10 | 11 | return 12 | } 13 | 14 | export default ClientId 15 | -------------------------------------------------------------------------------- /devtools/src/components/ConnectButton.tsx: -------------------------------------------------------------------------------- 1 | import { createConnection, defaultOptions } from '@open-ayame/ayame-web-sdk' 2 | import type { AyameAddStreamEvent } from '@open-ayame/ayame-web-sdk' 3 | import { useStore } from '../store/useStore' 4 | 5 | import type React from 'react' 6 | const ConnectButton: React.FC = () => { 7 | const audioEnabled = useStore((state) => state.settings.audio.isEnable) 8 | const audioDirection = useStore((state) => state.settings.audio.direction) 9 | const audioCodecMimeType = useStore((state) => state.settings.audio.codecMimeType) 10 | const videoEnabled = useStore((state) => state.settings.video.isEnable) 11 | const videoDirection = useStore((state) => state.settings.video.direction) 12 | const videoCodecMimeType = useStore((state) => state.settings.video.codecMimeType) 13 | 14 | const signalingUrl = useStore((state) => state.settings.signalingUrl) 15 | const roomId = useStore((state) => state.settings.roomId) 16 | const debug = useStore((state) => state.settings.debug) 17 | const signalingKey = useStore((state) => state.settings.signalingKey) 18 | 19 | const setAyameConnection = useStore((state) => state.setAyameConnection) 20 | const setLocalMediaStream = useStore((state) => state.setLocalMediaStream) 21 | const setRemoteMediaStream = useStore((state) => state.setRemoteMediaStream) 22 | const setAyameConnectionState = useStore((state) => state.setAyameConnectionState) 23 | 24 | const handleClick = async () => { 25 | const options = defaultOptions 26 | options.audio.enabled = audioEnabled 27 | options.audio.direction = audioDirection 28 | options.audio.codecMimeType = audioCodecMimeType 29 | options.video.enabled = videoEnabled 30 | options.video.direction = videoDirection 31 | options.video.codecMimeType = videoCodecMimeType 32 | options.signalingKey = signalingKey 33 | 34 | const conn = createConnection(signalingUrl, roomId, options, debug) 35 | 36 | let localStream: MediaStream | null = null 37 | 38 | if ( 39 | (audioEnabled && audioDirection !== 'recvonly') || 40 | (videoEnabled && videoDirection !== 'recvonly') 41 | ) { 42 | localStream = await navigator.mediaDevices.getUserMedia({ 43 | audio: audioEnabled, 44 | video: videoEnabled, 45 | }) 46 | setLocalMediaStream(localStream) 47 | } 48 | 49 | conn.on('addstream', (event: AyameAddStreamEvent) => { 50 | setRemoteMediaStream(event.stream) 51 | }) 52 | 53 | conn.on('open', () => { 54 | const pc = conn.peerConnection 55 | if (!pc) { 56 | return 57 | } 58 | pc.onconnectionstatechange = (event) => { 59 | setAyameConnectionState(pc.connectionState) 60 | } 61 | }) 62 | 63 | // 切断時にローカルとリモートのメディアストリームを停止する 64 | conn.on('disconnect', () => { 65 | // この関数内で取得した localStream を停止する 66 | // store を経由しないようにする 67 | if (localStream) { 68 | for (const track of localStream.getTracks()) { 69 | track.stop() 70 | } 71 | } 72 | 73 | setLocalMediaStream(null) 74 | setRemoteMediaStream(null) 75 | setAyameConnection(null) 76 | }) 77 | 78 | await conn.connect(localStream) 79 | 80 | setAyameConnection(conn) 81 | } 82 | 83 | return ( 84 | 87 | ) 88 | } 89 | 90 | export default ConnectButton 91 | -------------------------------------------------------------------------------- /devtools/src/components/ConnectionSettings.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import ClientId from './ClientId' 3 | import DebugToggle from './DebugToggle' 4 | import RoomId from './RoomId' 5 | import SignalingKey from './SignalingKey' 6 | import SignalingUrl from './SignalingUrl' 7 | import StandaloneToggle from './StandaloneToggle' 8 | 9 | const ConnectionSettings: React.FC = () => { 10 | return ( 11 |
12 | Connection settings 13 |

14 | Signaling URL: 15 | 16 |

17 |

18 | Room ID: 19 | 20 |

21 |

22 | Client ID: 23 | 24 |

25 |

26 | Signaling Key: 27 | 28 |

29 |

30 | Debug: 31 | 32 |

33 |

34 | Standalone: 35 | 36 |

37 |
38 | ) 39 | } 40 | 41 | export default ConnectionSettings 42 | -------------------------------------------------------------------------------- /devtools/src/components/CopyUrlButton.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useStore } from '../store/useStore' 3 | 4 | const CopyUrlButton: React.FC = () => { 5 | const generateUrlParams = useStore((state) => state.generateUrlParams) 6 | 7 | const handleClick = () => { 8 | const urlParams = generateUrlParams() 9 | window.history.replaceState(null, '', `?${urlParams}`) 10 | navigator.clipboard.writeText(window.location.href) 11 | } 12 | 13 | return ( 14 | 17 | ) 18 | } 19 | 20 | export default CopyUrlButton 21 | -------------------------------------------------------------------------------- /devtools/src/components/DatasetConnectionState.tsx: -------------------------------------------------------------------------------- 1 | import { useStore } from '../store/useStore' 2 | 3 | const DatasetConnectionState: React.FC = () => { 4 | const ayameConnectionState = useStore((state) => state.ayame.connectionState) 5 | 6 | // playwright の E2E テスト用 7 | return
8 | } 9 | 10 | export default DatasetConnectionState 11 | -------------------------------------------------------------------------------- /devtools/src/components/DebugToggle.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useStore } from '../store/useStore' 3 | 4 | const DebugToggle: React.FC = () => { 5 | const isEnable = useStore((state) => state.settings.debug) 6 | const toggleDebug = useStore((state) => state.toggleDebug) 7 | 8 | return ( 9 | toggleDebug(e.target.checked)} /> 10 | ) 11 | } 12 | 13 | export default DebugToggle 14 | -------------------------------------------------------------------------------- /devtools/src/components/DisconnectButton.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useStore } from '../store/useStore' 3 | 4 | const DisconnectButton: React.FC = () => { 5 | const ayameConnection = useStore((state) => state.ayame.connection) 6 | 7 | const localMediaStream = useStore((state) => state.mediaStream.local) 8 | 9 | const setAyameConnection = useStore((state) => state.setAyameConnection) 10 | const setLocalMediaStream = useStore((state) => state.setLocalMediaStream) 11 | const setRemoteMediaStream = useStore((state) => state.setRemoteMediaStream) 12 | 13 | const handleClick = async () => { 14 | if (!ayameConnection) { 15 | return 16 | } 17 | 18 | if (localMediaStream) { 19 | for (const track of localMediaStream.getTracks()) { 20 | track.stop() 21 | } 22 | } 23 | 24 | await ayameConnection.disconnect() 25 | 26 | setLocalMediaStream(null) 27 | setRemoteMediaStream(null) 28 | 29 | // ayameConnection を null にする 30 | setAyameConnection(null) 31 | } 32 | 33 | return ( 34 | 37 | ) 38 | } 39 | 40 | export default DisconnectButton 41 | -------------------------------------------------------------------------------- /devtools/src/components/LocalVideo.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react' 2 | import { useEffect, useRef } from 'react' 3 | import { useStore } from '../store/useStore' 4 | 5 | const LocalVideo: React.FC = () => { 6 | const localMediaStream = useStore((state) => state.mediaStream.local) 7 | const videoRef = useRef(null) 8 | 9 | useEffect(() => { 10 | if (videoRef.current) { 11 | videoRef.current.srcObject = localMediaStream 12 | } 13 | }, [localMediaStream]) 14 | 15 | return ( 16 |