dai-shi / remote-faces Goto Github PK

View Code? Open in Web Editor NEW

95.0 5.0 10.0 102.91 MB

A tool for Working From Home: Share your webcam images with your colleagues

Home Page: https://remote-faces.js.org

License: MIT License

JavaScript 66.66% HTML 0.93% CSS 1.73% TypeScript 30.50% Makefile 0.17%

peerjs webrtc electron

remote-faces's Introduction

Remote Faces

A small app to share webcam still images periodically

Motivation

Working from home is a working style that has existed and is usual nowadays. Tools such as instant messaging and video conferencing allow working from home. Those tools are useful and mandatory, but it turns out that it would also be nice to have another tool to feel connected.

"Remote Faces" is a small app to share a webcam still image. The image will be updated only periodically. The size of the image is small enough to keep your privacy to some extent. It doesn't involve a server to transfer image data, but it's done in a peer-to-peer manner.

Goal

The goal of this project is to provide a tool for people working from home. The tool will be kept running during working and used occasionally. It would fill the gap between working in office and working from home. It would be complementary to more active tools like email, messaging, phone and scheduled video calls.

Although not a primary goal, as we take privacy seriously, our technology focus is for peer-to-peer network.

How to use

Just visit the following link to jump to the latest tool.

https://remote-faces.js.org

Google Chrome on PC is recommended. It may work on other browsers including some on mobile.

You may also Select Remote Faces Versions in case the latest version has some issues.

To create a new room, click the button and the app starts immediately. Copy the URL and share it with your colleagues. It will take your face image with webcam every two minuites. At first, you will only see your face, but once your colleagues enter the room, face images are broacasted within the room. Note this app is based on peer-to-peer technology, and the images are only transferred in the participants of the room.

If you are trying this app for the first time, you can open the app in multiple tabs in Chrome. You can open it as many as you want and simulate the app behavior with many participants.

If you have a question, don't hesitate to open an issue for it.

How to contribute

This is an open source project and your contribution is important. The web app is built with React and IPFS PubSub with WebRTC, alternatively PeerJS.

We welcome your contribution at any level; from coding, issue reporting, bug fixing, discussing features, documentation and to promotion!

For more information, check out CONTRIBUTING.md.

Screenshots (Legacy Version)

Downloads

Once you are used the tool, you might want a standalone app. Technically, it's just a wrapper and features are basically the same. If you are not familiar, you can continue using Chrome to use the app.

https://github.com/dai-shi/remote-faces/releases

Blogs

Remote Faces: Share webcam still images with PeerJS/WebRTC

remote-faces's People

Contributors

Stargazers

Watchers

Forkers

jedsada-gh monisoi kobatastu t6adev molmoit lvhkhanh madatonline akio62 k-tkm icodein

remote-faces's Issues

[tweak] overflow texts on images

It's no noticeable when the text color is white, but if it's red, it overflows like this:

[UI] Height of White Board gets bigger if Momentary Chat gets bigger

unable to detect network disconnection and auto reconnect

how can we do it in peer-to-peer?

hide or move down very old face images

Currently, if an image is obsolete, we set opacity. If last received is like 30min ago, we'd want hide it or move it down.

[feature] passive chat

The current status message is too limited. We want to chat, but somewhat passively.

Ideas:

one big chat area instead of one field per user
a user can send messages many times
messages will be disappear in a certain period
[nice to have] reaction to a messaage

We could leave the status message feature, but as people start using "Your Name" as status, so it would be better to have another feature to show a message on an image. So, once this passive chat lands, we will revisit it.

Dragging text field leads to dragging electron app window

This bug occurs in the electron app, but the fix is in the web app (css).

[web] fix initial flow for electron app

copy-able room link
room link paste field in the entrance

[feature] broadcast short voice message

It might be nice to send one-way voice message for small talk like "I'm tired" "It's raining" "I did it" and so on. The message will be played by clicking something.

[doc] Rewrite README.md

We need to describe our goal and scope.

[web] Local development environment

Google Chrome configuration

It requires to configure flags on Chrome. Open chrome://flags/ and configure like the below.

MacOS Firewall

You need to configure MacOS Firewall allow external access.

In the case of Google Chorme, it should look like this:

[UI] Network status message overflow

It should wrap lines. It doesn't require padding-left anymore.

[doc] Write CONTRIBUTING.md

We want to support CodeSandbox development.

[electron] Local development environment

allow to take a new photo manually

you might want to re-take your face immediately

[web] Rewrite app with React + TypeScript

Embed Excalidraw collaboration

Reusing roomId.

[web] [bug] Unhandled Rejection (TypeError): Cannot read property 'split' of null

room.ts:8 Uncaught (in promise) TypeError: Cannot read property 'split' of null
    at guessSeed (room.ts:8)
    at reInitMyPeer (room.ts:167)
    at s.<anonymous> (room.ts:139)
    at s.i.emit (peerjs.min.js:46)
    at s.close (peerjs.min.js:62)
    at RTCDataChannel.dataChannel.onclose (peerjs.min.js:62)

[Network] Error: Network Error: Failed to execute 'addIceCandidate' on 'RTCPeerConnection': Error processing ICE candidate

Not sure what's the root cause.

[feature] video conferencing (video only)

We wouldn't try to replace any existing video conferencing tools, but it might be sometimes useful if we could do video with small 72x72 images.

remember camera device selection

implementation notes:

store device id in localStorage
fallback to default (= undefined) if stored device id no longer exists

[UI] Clear button of the status field doesn't clear text field

It does clear emoji & message on a face image.

[electron] Open App from browser doesn't work if the electron app is already running.

We'd like to update version of web app in the electron app by clicking Open App in the browser.

[electron] Allow selecting web versions

[web] use localStorage for configuration

required for #15 and storing nickname

[feature] video conferencing (plus screen sharing)

depends on #44

Internationalization

[UI] Not easy to know how to use "status message"

Some examples might help.

Slack example:

[UI] Momentary Chat doesn't show date inline if nickname is long

We don't solve this completely, but moving reaction button panel at the right bottom might help.

[feature] multiple rooms in one app

[electron] show version is broken

It should show d/2020-04-19 or so from the URL.

Current result of Show Version:

Current result of About Remote Faces:

video indicator and auto reconnect issues in the network module

#62 was pretty good with a new method without peer.call.
However that are some remaining issues.

video+audio -> video only doesn't change the indicator (there are no remove events...)
going offline still shows available indicator (for two minutes at most)
can't auto re-connect in live mode when underlying peer reconnects (after two minutes, it works)

Overall, I'm still not sure what's the best way to use MediaStream and MediaStreamTrack.

[feature] share another camera in high resolution

Like screen share, it shares another camera (user media) video. It can be same as face image/video.

show images in tile instead of in row

Would be nice if it's configurable.

[feature] broadcast poke (simple counter)

Add a "poke" button, that increments a tiny counting number on the face image of the user. It should broadcast the updated count immediately (without taking another photo).