kevinshen56714 / skyoffice

Immersive virtual office built with Phaser, React, Redux, PeerJS, and Colyseus.

SkyOffice

An immersive virtual office - Winner of 2021 Monte Jade Innovation Competition

• Come try it out - Official Website
• Why we built this - Concept Video
• 🙌 Get latest updates? Follow our Twitter.
• 💕 Love this project? Consider buy me a coffee.

SkyOffice works on all PC browsers (mobile browsers are currently not supported)

Built with

• Phaser3 - Game engine
• Colyseus - WebSocket-based server framework
• React/Redux - Front-end framework
• PeerJS - WebRTC for video/screen sharing
• TypeScript and ES6 - for both client and server sides

Features

• Proximity Chat
• Flexible Screen Sharing
• Multifunctional Rooms
• Text Message Chat
• Custom/Private Rooms
• Embedded Whiteboards (iframe embed of WBO)

Proximity Chat (distance-based interactive system)

Multifunctional Rooms

Flexible & Immediate Screen Sharing

Text Message Chat (with real time dialog bubbles)

Embedded Whiteboards

Custom/Private Rooms

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, npm installed.

Getting Started

Clone this repository to your local machine:

git clone https://github.com/kevinshen56714/SkyOffice.git

This will create a folder named SkyOffice. You can specify a different folder name like this:

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:

cd SkyOffice or 'my-folder-name'
yarn && yarn start

To start a client, go into the client folder and install dependencies/run start command:

cd SkyOffice/client or 'my-folder-name/client'
yarn && yarn dev

Credits 🎉

Big thanks to this great repo - ourcade/phaser3-typescript-parcel-template

Big thanks to pixel artist - LimeZu

Big thanks to open-source whiteboard project - WBO

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. Thank you :)

skyoffice's Issues

Add a basic virtual joy-stick to make the mobile version usable.

thanks in advance

When logging in, later players may not be able to see who is around them.

Hello, thanks for this useful software !

When logging in, later players may not be able to see who is around them. Still, the call can be made.
Sometimes this happens, sometimes it does not.
I am trying this on the same host, with the same browser, and multiple tabs open.

Wall glitch can see white bord stuff through another office.

Even if i am not in the same room i can still access the white-cord in other room.

A generated file dependencies chart for the Client part code

As the title, the generated chart is something like below.

with the command below using arkit inside the client folder

npx arkit -d src \
  -e \"src/services,src/stores,src/hooks.ts,src/util.ts,src/web\" \
  -o ./docs-components.png

Prompt to add the chart somewhere like the bottom of the README to show others the main file dependencies we've got here.

It could help us understand the scenes being used inside the client/src/PhaserGame.ts, and the relationship with other classes we made I guess.

Can sombody show me how to apply my own TURN server?

Thank you Kevin Shen for sharing this great app source
I am making a Metaverse contents with SkyOffice code
But I stuck on Video streamming
Client don't show video on local IPs
Solving this issue, I wanna use coturn server
Can you teach me how to apply coturn server in SkyOffice code?

create custom office maps

• does sky office supports creation of custom maps?

Add warning on landing page if webcam is not connected

MyPlayer frozen when Game scene restart or reloaded

Hi everyone~
I am really happy to know this great project

Nowdays I am making custom maps for Skyoffice
Its very easy to make new maps and load them into Skyoffice

But whenever I load new maps or restart Game scene, MyPlayer frozen.. I can't move my avatar
It caused by previous MyPlayer collider and other colliders
I tried hundreds of way to remove old colliders
unfortunately, it failed...

Bellow is my codes for restart Game scene from MyPlayer.ts

this.scene.input.keyboard.resetKeys()
this.scene.input.keyboard.shutdown()      
this.scene.physics.world.colliders.destroy()  
			
//this.physics.world.removeCollider([this.myPlayer, this.myPlayer.playerContainer])
//this.physics.world.removeCollider([this.myPlayer, this.myPlayer.playerContainer], groundLayer2)
//this.physics.world.removeCollider([this.myPlayer, this.myPlayer.playerContainer], vendingMachines)
//this.physics.world.removeCollider([this.myPlayer, this.myPlayer.playerContainer], gameMachines)
//this.physics.world.removeCollider([this.myPlayer, this.myPlayer.playerContainer], doors)
			
this.scene.scene.stop('game')
this.scene.scene.restart( {
	network: network
})

How can I make my Avatart works after restart or start again?

Front end not responding

HI,

The project looks great. When I try to start the server using "npm run start" , I do not see any screen launching..

It is just stuck at this screen.

How do I change the Client ip address... it's fixed 127.0.0.1

I love you Kevin...

Problem solved!!!!

It is awesome metaverse...

I have a question that web cam doensn't work on my aws hosting server.

I guess It is caused https... right??

Cannot connect microphone/camera nor share screen when exposing service

Hi,

I managed to deploy SkyOffice on a server in an internal network. When I do port forwarding and connect to localhost:[port], I am able to connect the webcam and microphone. Instead, when I expose the service with --host and try to connect my camera, this does not work. I get the following error in Firefox when inspecting the page

Uncaught (in promise) TypeError: 'microphone' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
checkPreviousPermission WebRTC.ts:58
launchGame Bootstrap.ts:96
handleConnect RoomSelectionDialog.tsx:115

Have you experienced this error? Could you help me? The same happens on Chrome and Edge.

Thanks!

Bcrypt error

Trying to start Server with this command

Cd Skyoffice: yarn && yarn start
On Bcrypt getting error. Please help me out I' did reinstall npm and nodejs a lot time but same error keep coming. Kevin. Help or anyone else . Please
Client side its working

I did before was working but now not

Benefit over 3d environments

Apologies for opening this as an issue!!

How is this solution better than the existing 3D virtual office solutions?

Is there documentation somewhere

I'd like to use this project but the documentation seems to be missing. The readme gives a bit of help, but not much.

• How do I deploy an instance for productive use?
• How do I customize the map or create my own?
• Is video-chat between a large number of people supported, i.e. conference rooms?
• How do I integrate things in the "functional rooms" as shown in the video, e.g. a whiteboard?

This project looks great and I would love to use it, but the lack of documentation is making it quite hard.

Can't connect webcam or microphone

Nevermind. Was a stupid mistake.

[Q] Streams working on 4G but not behind some firewalls

Hey, thanks for making this.
It has made our virtual office environment much, much easier to work in.

However - I've had a few problems I haven't had time to debug.
One of them is that some of my employees can't see/stream their video or sound on their home wifi's.
But on 4G or at the office (well, local network) it works perfectly.

Have you encountered anything like this and if yes, do you have a solution for it?

Change arrow control to wasd

I would like to keep the arrow control and add WASD control but failed. I change the code in Game.ts file in line 42
this.cursors = this.input.keyboard.createCursorKeys() to

this.cursors = this.input.keyboard.addKeys(
      {up:Phaser.Input.Keyboard.KeyCodes.W,
      down:Phaser.Input.Keyboard.KeyCodes.S,
      left:Phaser.Input.Keyboard.KeyCodes.A,
      right:Phaser.Input.Keyboard.KeyCodes.D,
      space:Phaser.Input.Keyboard.KeyCodes.SPACE,
      shift:Phaser.Input.Keyboard.KeyCodes.SHIFT
    });

Then I got error Type {} is missing the following properties from type 'CursorKeys': up, down, left, right, and 2 more.ts(2740)
I have no idea why I got this error, can someone pls help out?

BUG: High cpu usage

Me and my friends entered a private skyoffice room. And the computer worked like crazy.
After closing the tab the computer worked normally.
The image is from an ubuntu system. It also happened on mac big sur.

Custom rooms

Hello,

Couple of questions:

1. Can I import my own room and avatars created in Unity?
2. Is there a feature where whatever I am speaking in the physical world, also appears in the virtual world?

Create isolated zone and highlight it when entering

Create isolated zone for meeting rooms or individual office areas and add a BitmapMask for that area when entering.

[BUG] Walking glitch

Discription

This bug happens when you are walking and suddenly you open chat. For a few seconds the avatar keeps on walking in that direction only and the opposite direction button does not work

how to copy

1. keep walking in a single direction/ axis.
2. open chat without stopping to walk.
3. close chat.
4. see bug.

expected behaviour

The avatar stops to walk as soon as the chat opens.

Do you use any media server? if you use mesh architecture, it is difficult to scale to many people in the room. You can try livekit or pion/ion-sfu, they provide full sfu model, SDK... so you can easily deploy.

Error with npm start

index.js:1 Error: Class constructor Room cannot be invoked without 'new'
at new MatchMakeError (Client.ts:12:1)
at Client. (Client.ts:105:1)
at step (tslib.es6.js:102:1)
at Object.next (tslib.es6.js:83:1)
at fulfilled (tslib.es6.js:73:1)
Unable to connect to room when using npm start. npm run build works fine

Production deployment keeps at "connecting to server"

Good days,

Thank you very much for this project and your contribution to the open source!

I've just deployed the project on netlify, and have this:
https://starlit-treacle-42d97a.netlify.app

Currently it keeps the "connecting to server" message and private/public room functionality is not ready yet.
Is there any other required steps we need to take to make it work?

Seems like there's no command issued @ server folder @ netlify.toml, are we missing the backend here? :)

Unable to deploy on Azure App Service

HI,

I am trying to deploy the app on Azure. But when trying to do the same, I get the below error when deploying for the client:

 Invalid start-up command "react-app-rewired start" in package.json. Please use the format "node <script relative path>".\r
 Missing server.js/app.js files, web.config is not generated

Getting the below error for server:

2:47:07 PM : Invalid start-up command "cd server && ts-node-dev --project tsconfig.server.json --respawn --transpile-only index.ts" in package.json. Please use the format "node <script relative path>".
2:47:07 PM : Looking for app.js/server.js under site root.
2:47:07 PM : Missing server.js/app.js files, web.config is not generated

I am new to nodeJS and tyescript. Could you plese help me with corresponding node commands to be added in package.json
Any help would be highly appreciated. Thanks!

Not start

Following the readme on devuan stable.

npm install && npm start
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@colyseus/[email protected]',
npm WARN EBADENGINE   required: { node: '>= 14.x' },
npm WARN EBADENGINE   current: { node: 'v12.22.5', npm: '7.5.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>= 14.x' },
npm WARN EBADENGINE   current: { node: 'v12.22.5', npm: '7.5.2' }
npm WARN EBADENGINE }

added 391 packages, and audited 392 packages in 22s

30 packages are looking for funding
  run `npm fund` for details

14 vulnerabilities (1 low, 12 moderate, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> [email protected] start
> cd server && ts-node-dev --project tsconfig.server.json --respawn --transpile-only index.ts

[INFO] 12:02:20 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 3.9.10)
/home/skyoffice/SkyOffice/node_modules/@colyseus/core/build/Server.js:80
            this.transport.server?.on('error', (err) => reject(err));
                                  ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Module._compile (/home/skyoffice/SkyOffice/node_modules/source-map-support/source-map-support.js:568:25)
    at Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at require.extensions..jsx.require.extensions..js (/tmp/ts-node-dev-hook-8008399677996612.js:114:20)
    at Object.nodeDevHook [as .js] (/home/skyoffice/SkyOffice/node_modules/ts-node-dev/lib/hook.js:63:13)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
[ERROR] 12:02:20 SyntaxError: Unexpected token '.'

How do you think abt adding Virtual Joystick??

I play Skyoffice on my mobile

It works But the problem is unable to move my avatar.

Now I'm adding Phaser Joystick... I'm not sure I can do.. cuz It's hard for a student like me

I guess It will make Skyoffice better. :-)