18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer

ieski / deskreen
forked from pavlobu/deskreen

Deskreen turns any device with a web browser to a second screen for your computer

www.deskreen.com

AGPL-3.0 License

0
stars

507
forks

Star
Notifications

Code Pull requests Actions Projects Wiki Security Insights

master
Go to file

This branch is 92 commits behind pavlobu:master.

Contribute

Fetch upstream

pavlobu … on 24 Jan

View code

Deskreen

Website: https://www.deskreen.com
https://github.com/ieski/deskreen 1/7
18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer

build and test passing

codecov passing

codecov 64%

Deskreen turns any device with a web browser to a second

screen for your computer
Deskreen is an electron.js based application that uses WebRTC to make a live stream of
your
desktop to a web browser on any device.
It is built on top of Electron React Boilerplate
For better security mechanism, end-to-end encryption is implemented, which is inspired by
darkwire.io. The difference is that it is rewritten
in Typescript and transformed to use
node-forge instead of window.crypto.subtle .
Why this was made? Because a client served
with http without SSL, which makes window.crypto.subtle unavailable.

NOTE: We are looking for a solution to get rid from Dummy

Display Plugs while using Deskreen as a second screen.
Your code support is highly valuable and welcome in
Deskreen!
Display Dummy Plugs are good temporary solution, but it is not that good for everyone.
If
you are a seasoned Windows or Linux or MacOS hacker with a knowledge of low level
tweaks and triks, you can help us to make Deskreen better!
On a long run Deskreen seeks
for getting rid of Display Dummy Plugs, because most people don't like using them.
README.md
Sometimes they can't use them because all available display ports are already taken.
So we
need to have native drivers for Win / Mac / Linux that will help to enable virtual display
wihtout Dummy Display Plugs.
There are already working commercial solutions out there
with their own drivers which they don't disclose, but this task is doable with a help of entire
community.
The goal of Deskreen is to enable community power and knowledge to
overcome these technical challenges and make it a go-to second screen solution that
everyone will benefit from!

We plan on making virtual display driver support for each of three main operating systems
and place all OS related codes in ./drivers subdirectory of this project.
You can find brief
requirements for driver API in ./drivers/README.md .

Thank you in advance!

Get Started for Developers

Prerequisites
You will need to have node npm and yarn installed
globally on your machine.

1. git clone this repo

https://github.com/ieski/deskreen 2/7
18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer

2. yarn install
3. yarn dev -- run in dev mode with live updates

Useful yarn commands

yarn start -- run in production mode to test, without packaging
yarn package -- to
package an app and make executables available in release folder

for more yarn commands look at package.json

How to run tests

yarn test -- run all unit tests
yarn build-ux && yarn test-ux -- run User Experience tests
(no tests for app/client yet)

TODO: add e2e tests with host + client app interaction

run tests of host app

yarn test-watch-not-silent -- run tests in watch mode with console logs only for host
app, excluding app/client
yarn test -- -u -- update snapshots

run tests for app/client

yarn test -- run client tests in watch mode

test:nowatch -- run client tests a single time
yarn test -- -u -- update snapshots

Generate test coverage results

yarn coverage -- when run from project root, generates a coverage report for host and
app/client

Instruction for running a local Sonar Qube, community

edition

Prerequisites
You need to install Sonar Qube community edition for your machine.
And sonar-scanner.
Then add sonar scanner to your PATH.

You need to run sonar-scanner separately on root directory

and on app/client directory.

https://github.com/ieski/deskreen 3/7
18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer

Luckily for you sonar scanner is automatically triggered after husky checks.
So you only
need to install and configure SonarCube locally and
create two separate projects in
SonarCube panel.
First project for host app, and second project for client viewer app.
TODO:
add how to get started with local SonarCube for Deskreen in details.

Documentation

High level architecture design

https://www.deskreen.com
Deskreen | High level design by Pavlo (Paul) Buidenkov 21 Jan 2021

Windows / MacOs / Linux machine

Deskreen App (electron.js) ./app

Electron main
Any device with a web browser that
UI (react.js) process (deskreen supports WebRTC
web browser window)
Web browser that supports
Signaling Server (port 3131) ./app/server WebRTC

HTTP server (sends web page files to Browser tab with Deskreen client web
client) at moment Koa, can be any page ./app/client

WebSocket socket.io-server.
Responsible client and host app
e2e encrypted
UI (react.js)
WS based communication. signal exchange
unique roomID for each
connection
WiFi or socket.io-client (connect to

LAN or server by roomID ex. 623456)

signal exchange
e2e encrypted

Electron renderer process 127.0.0.1 send my signal receive peer signal

(a no-window web browser) simple-peer ( WebRTC API )

Screen Sharing Session
socket.io client (connect to
server by roomID ex. 623456)
receive peer signal
send my signal

simple-peer ( WebRTC API ) WebRTC video streaming

get desktop stream generated desktop stream

electron desktopCapturer

WebRTC Screen Sharing Session Initiation Step by Step

https://github.com/ieski/deskreen 4/7
18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer
https://www.deskreen.com
Deskreen | WebRTC Screen Sharing Session Initiation Step by Step by Pavlo (Paul)
Buidenkov 22 Jan 2021

Computer on private
network with Deskreen
App running WiFi or
Sinaling Server ( HTTP and Client viewing device on
Screen Sharing Session (
connected on 127.0.0.1
Websocket electron main LAN or private network
with a WebRTC compatible
electron renderer process ) process ) 127.0.0.1 WebBrowser
Generate a
public private
keypair, one for socket connect to <roomID> ex. 123456
all sessions HTTP GET <addr>/<roomID>
wait for USER_ENTER event from client,
every event below in this diagram
send static files in response Generate public
is emitted to same roomID private keypair,
one for
current session

socket connect to <roomID> ex. 123456,

every event below in this diagram
is emitted to same roomID

emit GET_MY_IP

associated socket's ID device IP sent back show my device

details in UI with
device IP

passthrough USER_ENTER event to host emit USER_ENTER event with public key in payload
keep client's public key
and encrypt further
payloads with it

emit USER_ENTER with public key to client passthrough USER_ENTER event to client
keep received
host's public key
and encrypt further
payloads with it
emit TOGGLE_LOCK_ROOM immediately to prevent other
clients to connect to this room, if someone tries to
connect, they will receive a ROOM_LOCKED

passthrough ENCRYPTED_MESSAGE event to host emit ENCRYPTED_MESSAGE with

decrypt and store client
DEVICE_DETAILS payload, that
device details, show
contains info of what client device is trying to connect
them in UI alert 'Allow to
connect' dialog box

securely getting client IP

emit GET_IP_BY_SOCKET_ID with client socketID
from 127.0.0.1
signaling server and
return client IP to display it in Partner details UI
storing it to display in
Partner Details UI

User checks details and

clicks 'Allow' to connect
button,
then selects Screen or
App window to be
shared, then clicks
Confirm

emit ENCRYPTED_MESSAGE passthrough ENCRYPTED_MESSAGE with payload

decrypt, set
with CALL_USER payload that has received peer
MY WebRTC signal for call signal to simple-
retrieved from simple-peer peer

passthrough ENCRYPTED_MESSAGE with payload emit ENCRYPTED_MESSAGE with

CALL_ACCEPTED payload, that has MY WebRTC
signal for call retrieved from simple-peer
decrypt, set received
peer signal to simple-
peer

https://github.com/ieski/deskreen 5/7
18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer
when electron
desktopCapturer
stream available,
simple-peer sends send stream with WebRTC
stream to client
when simple-
peer.on('stream',
occurs -> show
stream in web
browser UI video
DOM element

Note on versioning:
All versions git tags should start with v ex. v1.0.0
Before making a new release with git push <version-tagname> set version
to
<version-tagname> ! without v in the beginning! (ex. 1.0.0 -- not start with v ) in
these three files:
package.json -- in version key ex. 1.0.0

app/package.json -- in version key ex. 1.0.0

app/package-lock.json -- in version key ex. 1.0.0

Maintainer
Pavlo (Paul) Buidenkov

License
AGPL-3.0 License © Pavlo (Paul) Buidenkov

Copyright
Deskreen Logo PNG Image -- © Nadiia Plaunova

Apache 2.0 © blueprintjs

MIT © Electron React Boilerplate

simple-peer MIT. Copyright (c) Feross Aboukhadijeh.

Thanks
Thanks to Github workflows for enabling a robust CI pipeline for Deskreen creating needs.

Many thanks to all open source community members and maintainers of libraries used in
this project.

https://github.com/ieski/deskreen 6/7
18/06/2021 GitHub - ieski/deskreen: Deskreen turns any device with a web browser to a second screen for your computer

Donate
Click to donate on Deskreen's Patreon page: DONATE!

Releases

1
tags

Packages

No packages published

Languages

TypeScript 92.9%
JavaScript 4.3%
CSS 2.0%
HTML 0.8%

https://github.com/ieski/deskreen 7/7