{"id":29024516,"url":"https://github.com/kcg-edu-future-lab/presence","last_synced_at":"2026-05-17T00:09:22.464Z","repository":{"id":300370673,"uuid":"990003780","full_name":"kcg-edu-future-lab/presence","owner":"kcg-edu-future-lab","description":"VideoMeeting with Collaboration Tools based on Madoi","archived":false,"fork":false,"pushed_at":"2025-10-05T07:57:11.000Z","size":3521,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T08:33:32.308Z","etag":null,"topics":["distributed-sharing","madoi","typescript","videomeeting","webrtc","websocket"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kcg-edu-future-lab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-25T09:52:16.000Z","updated_at":"2025-10-05T07:57:14.000Z","dependencies_parsed_at":"2025-06-21T10:23:43.967Z","dependency_job_id":"78c3a715-5a29-42ce-8f35-fc89ee4d1071","html_url":"https://github.com/kcg-edu-future-lab/presence","commit_stats":null,"previous_names":["kcg-edu-future-lab/presence"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kcg-edu-future-lab/presence","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcg-edu-future-lab%2Fpresence","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcg-edu-future-lab%2Fpresence/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcg-edu-future-lab%2Fpresence/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcg-edu-future-lab%2Fpresence/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kcg-edu-future-lab","download_url":"https://codeload.github.com/kcg-edu-future-lab/presence/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcg-edu-future-lab%2Fpresence/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000701,"owners_count":26082819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["distributed-sharing","madoi","typescript","videomeeting","webrtc","websocket"],"created_at":"2025-06-26T04:02:07.624Z","updated_at":"2025-10-08T20:06:08.103Z","avatar_url":"https://github.com/kcg-edu-future-lab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Presence - Video Meeting with Collaboration Tools\n\nPresenceは、[分散情報共有基盤 Madoi](https://github.com/kcg-edu-future-lab/madoi)の実証のために開発されたコレボレーションツール付きビデオ会議システムです(Chrome推奨)。\nReactとTypeScriptを使用して開発されています。\n基本的なビデオ会議機能に加えて、チャットやホワイトボードなどのコラボレーションツール、2D仮想空間と連動した音声ボリューム調整機能を備えています。\n\n画面例:\n![スクリーンショット](img/presence.jpg)\n\n# 機能\n\n以下の機能が実装されています。\n\n- ビデオ会議(画面上部) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/videomeeting/VideoMeeting.tsx)\n  - `keys.ts` の `skyWayEnabled` を `true` にし、SkyWayのIDとシークレットを設定すれば、ビデオ会議機能が有効になります。カメラや画面共有、マイクの共有には[SkyWay](https://skyway.ntt.com/ja/)を使用しています。仮想背景の実装にはGoogleの[mediapipe](https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ja)を利用しています。\n  - 利用者の入退室管理に[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。\n- 仮想オフィス(画面左下) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/virtualroom/VirtualRoom.tsx)\n  - 背景画像上に利用者を表すアバター(円に名前が描画されたもの)が描画されます。アバター同士が近ければ声が聞こえ、遠くなると声が小さくなります。\n  - アバターの位置の共有に[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。\n- チャット(画面右下のツールの一つ) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/meetingchat/Chat.tsx)\n  - 音声認識を備えたシンプルなチャットです。\n  - メッセージの共有に[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。\n- ホワイトボード(画面右下のツールの一つ) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/whiteboard/Whiteboard.tsx)\n  - シンプルな描画ツールです。\n  - 描画内容の共有に[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。\n- 付箋ボード(画面右下のツールの一つ) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/tagboard/TagBoard.tsx)\n  - 付箋を貼り付けられる共有ボードです。\n  - 付箋の位置や描画内容の共有に[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。\n- mermaid文書の共同編集(画面右下のツールの一つ) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/mermaid/Mermaid.tsx)\n  - [Yjs](https://github.com/yjs/yjs), [CodeMirror](https://codemirror.net/)を使用した [mermaid](https://mermaid.js.org/)ドキュメントの共同編集機能です。\n  - YjsはUIのみで使用し、差分の共有には[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。y-websocketを参考に通信部分をMadoiに移植し、awareness(他の人のカーソルの表示)にも対応しています。\n- 効果(画面右下のツールの一つ) [ソース](https://github.com/kcg-edu-future-lab/presence/blob/main/src/components/reaction/ReactionButtons.tsx)\n  - 画面効果や効果音の再生を行います。\n  - 効果の共有に[Madoi](https://github.com/kcg-edu-future-lab/madoi)を使用しています。\n  - ※ 効果音は[効果音ラボ](https://soundeffect-lab.info/)のものを使用しています。\n\n\n# 動作環境\n\nChromeでの動作確認を行なっています。\n\n静的ビルド(node.js v22以降が必要)に対応しているため、ビルド結果をWebサーバに設置してChromeでアクセスすれば利用できます。\n\n動作にはMadoiサーバが必要です。ローカルで一式起動(以下、`Presenceの起動`参照)するには、docker-compose が必要です。\n\n# 実行方法\n\n## Madoiの起動\n\n適当なディレクトリで以下のコマンドを実行し、Madoi の madoi-volatileserver を起動してください。詳細は、[MadoiのREADME](https://github.com/kcg-edu-future-lab/madoi)を参照してください。\n\n\n```bash\ngit clone https://github.com/kcg-edu-future-lab/madoi\ncd madoi\ndocker compose up\n```\n\nSkyWayToken発行機能を利用する(ビデオ会議機能を利用しSkyWayのトークンをmadoi-volatileserverに発行させる)場合は、\n`docker compose up`を実行する前に、madoiディレクトリ内の `.env.default` ファイルをコピーして `.env`\nファイルを作成し、アプリケーションIDとシークレットを変更してください(事前に[SkyWay](https://skyway.ntt.com/ja/)でアカウントを作成し、AppIdとSecretを取得してください)。\n\n```.env\nSKYWAY_APP_ID=YOUR_SKYWAY_APP_ID\nSKYWAY_SECRET=YOUR_SKYWAY_SECRET\n```\n\n`docker compose up`を実行すると、Madoiのビルドが行われ、volatileserverが起動します。\n\n\n## Presenceのcloneと設定変更\n\nまず、このリポジトリをcloneしてください。\n\n```bash\ngit clone https://github.com/kcg-edu-future-lab/presence\ncd presence\n```\n\n次に /src/keys.ts.sample をコピーして、 /src/keys.ts を作成し編集して、適切に設定を行なってください。\n\n```ts\n// Madoi設定\nexport const madoiUrl = \"ws://localhost:8080/madoi/rooms\";\nexport const madoiKey = \"MADOI_API_KEY\";\n\n// SkyWay設定\n// ビデオ会議を使用する際は、skyWayEnabledにtrueを設定してskyWayAppIdとskyWaySecretを書き換えてください。\nexport const skyWayEnabled = false;\nexport const skyWayAppId = \"SKYWAY_APP_ID\";\nexport const skyWaySecret = \"SKYWAY_SECRET\";\nexport const skyWayTokenUrl = \"ws://localhost:8080/madoi/skyWayToken?authToken=\" + madoiKey;\n```\n\nMadoiサーバのデフォルトのMADOI_API_KEYは、[docker-compose.yml](https://github.com/kcg-edu-future-lab/madoi/blob/master/docker-compose.yml)を参照してください。\n\n`skyWayEnabled`にtrueを設定し、`skyWayTokenUrl`にmadoi-volatileserverのSkyWayトークン発行URLを設定すれば、ビデオ会議機能が利用できます。もしくは、`skyWayAppId`と`skyWaySecret`に[SkyWay](https://skyway.ntt.com/ja/)から取得したアプリケーションIDとシークレットを設定すれば、`skyWayTokenUrl`は空文字列で構いません。ただしこの場合、SKyWayのIDとシークレットがブラウザに読み込まれるため、開発用や関係者内での利用に限定することをお勧めします。\n\n## Presenceの起動\n\n次に以下のコマンドを実行すると、コンテナ内でPresenceが起動します。\nこのコマンドは、Node.jsのバージョン22のイメージ(node:22)を使用して、Presenceを開発モードで起動(`npm run dev`)するものです。\n\n```bash\ndocker compose up\n```\n\n起動後、http://localhost:5137/ にアクセスすると、Presenceをブラウザで利用できます(ポートを変更するには、vite.config.ts.dockerファイルを編集してください)。\n\nnode.jsをローカル環境にセットアップすれば、ローカルでの開発モード起動(`npm run dev`)や静的ビルド(`npm run build`)も可能です。\nWebサーバに配備する場合は、madoi-volatileserverもサーバに配備し、そのURLとキーを `keys.ts` に設定して静的ビルドを行い、distディレクトリ内のビルド結果をWebサーバに配置してください。\n\n\n# References\n\n- 中口孝雄, \"リアルタイムコラボレーションツールのためのオブジェクト共有サービス,\" 電子情報通信学会技術研究報告; 信学技報, 120(232) pp.70-73, 2020. \n- 中口孝雄, \"分散共有機能のサービス化に向けたプログラミングモデルの設計と実装,\" 電子情報通信学会技術研究報告; 信学技報, 121(157), pp.64-68, 2021.\n- 中口孝雄, 秋山功, 三浦仁, 前納一希, 橋本昇, \"ウィズコロナ時代のコミュニケーションツールに関する考察と試み,\" NAIS journal, vol.17, pp.15-20, 2023.\n- 中口孝雄, 秋山功, 三浦仁, 前納一希, 橋本昇, 江尻秀彰, \"生成 AI を活用するコミュニケーションツールの実現に向けた考察と試み,\" NAIS journal, vol.18, pp.42-47, 2024.\n- 中口孝雄, \"分散情報共有サービスMadoiを用いたコラボレーションツールの宣言的プログラミング ,\" 電子情報通信学会技術研究報告, 2025.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkcg-edu-future-lab%2Fpresence","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkcg-edu-future-lab%2Fpresence","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkcg-edu-future-lab%2Fpresence/lists"}