Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kevinshen56714/SkyOffice
Immersive virtual office built with Phaser, React, Redux, PeerJS, and Colyseus.
https://github.com/kevinshen56714/SkyOffice
colyseus metaverse metaverse-tool metaverse-workplace nodejs peerjs phaser phaser3 pixel-art proximity-chat react redux remote-working team-platform typescript video video-chat video-conferencing virtual-office webrtc
Last synced: 3 months ago
JSON representation
Immersive virtual office built with Phaser, React, Redux, PeerJS, and Colyseus.
- Host: GitHub
- URL: https://github.com/kevinshen56714/SkyOffice
- Owner: kevinshen56714
- License: mit
- Created: 2021-07-07T19:38:10.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-18T19:38:59.000Z (6 months ago)
- Last Synced: 2024-11-11T15:22:18.708Z (3 months ago)
- Topics: colyseus, metaverse, metaverse-tool, metaverse-workplace, nodejs, peerjs, phaser, phaser3, pixel-art, proximity-chat, react, redux, remote-working, team-platform, typescript, video, video-chat, video-conferencing, virtual-office, webrtc
- Language: TypeScript
- Homepage: https://sky-office.co/
- Size: 1.85 MB
- Stars: 995
- Watchers: 22
- Forks: 310
- Open Issues: 20
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# SkyOffice ![License](https://img.shields.io/badge/license-MIT-blue) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)
An immersive virtual office - Winner of [2021 Monte Jade Innovation Competition](https://www.montejadese.org/innovation-competition)
- Come try it out - [Official Website](https://sky-office.co/)
- Why we built this - [Concept Video](https://www.youtube.com/watch?v=BpDqGTPh8pc)
- 🙌 Get latest updates? Follow our [Twitter](https://twitter.com/SkyOfficeApp).
- 💕 Love this project? Consider [buy me a coffee](https://www.buymeacoffee.com/skyoffice).SkyOffice works on all PC browsers (mobile browsers are currently not supported)
## Built with
- [Phaser3](https://github.com/photonstorm/phaser) - Game engine
- [Colyseus](https://github.com/colyseus/colyseus) - WebSocket-based server framework
- [React/Redux](https://github.com/facebook/react) - Front-end framework
- [PeerJS](https://github.com/peers/peerjs) - WebRTC for video/screen sharing
- [TypeScript](https://github.com/microsoft/TypeScript) and [ES6](https://github.com/eslint/eslint) - for both client and server sides## Features
- [Proximity Chat](#proximity-chat-distance-based-interactive-system)
- [Flexible Screen Sharing](#flexible--immediate-screen-sharing)
- [Multifunctional Rooms](#multifunctional-rooms)
- [Text Message Chat](#text-message-chat-with-real-time-dialog-bubbles)
- [Custom/Private Rooms](#customprivate-rooms)
- [Embedded Whiteboards](#embedded-whiteboards) (iframe embed of [WBO](https://github.com/lovasoa/whitebophir))### Proximity Chat (distance-based interactive system)
![image](https://user-images.githubusercontent.com/11501902/139960852-cf0e0883-8fbe-459d-bb11-3707d0ae1360.png)
### Multifunctional Rooms
![image](https://user-images.githubusercontent.com/11501902/139961091-1801bd4d-fbd6-4400-8503-85ece744e979.png)
### Flexible & Immediate Screen Sharing
![image](https://user-images.githubusercontent.com/11501902/139961155-44a85cd9-ac25-4563-9d82-6537ed7435f6.png)
### Text Message Chat (with real time dialog bubbles)
![image](https://user-images.githubusercontent.com/11501902/145925423-3b5b9026-d3b9-429d-920b-98b0bcd6300a.png)
### Embedded Whiteboards
![image](https://user-images.githubusercontent.com/11501902/147785323-19dbf0e6-056d-44c5-8efe-e969297bbe52.png)
### Custom/Private Rooms
![image](https://user-images.githubusercontent.com/11501902/147784118-15ef50bf-0f67-4704-89d7-81b2fa7f8ceb.png)
## Controls
- `W, A, S, D, or arrow keys` to move (video chat will start if you are close to someone else)
- `E` to sit down
- `R` to use computer (for screen sharing)
- `Enter` to open chat
- `ESC` to close chat## Prerequisites
You'll need [Node.js](https://nodejs.org/en/), [npm](https://www.npmjs.com/) installed.
## Getting Started
Clone this repository to your local machine:
```bash
git clone https://github.com/kevinshen56714/SkyOffice.git
```This will create a folder named `SkyOffice`. You can specify a different folder name like this:
```bash
git clone https://github.com/kevinshen56714/SkyOffice.git my-folder-name
```To start a server, go into the project folder and install dependencies/run start command:
```bash
cd SkyOffice or 'my-folder-name'
yarn && yarn start
```To start a client, go into the client folder and install dependencies/run start command:
```bash
cd SkyOffice/client or 'my-folder-name/client'
yarn && yarn dev
```## Credits 🎉
Big thanks to this great repo - [ourcade/phaser3-typescript-parcel-template](https://github.com/ourcade/phaser3-typescript-parcel-template)
Big thanks to pixel artist - [LimeZu](https://limezu.itch.io/)
Big thanks to open-source whiteboard project - [WBO](https://github.com/lovasoa/whitebophir)
## License
This project is licensed under MIT.
If you're using SkyOffice to power your virtual office or using our code in other projects, please consider [buy me a coffee](https://www.buymeacoffee.com/skyoffice). Thank you :)