44 | Loading ...
45 |
46 |
47 |
55 | 48 | Direct link to source code 52 |
53 | 54 |3 | 👆Snap the the QR code or 4 | 11 | click here 13 | to open an 14 | other window from where you will control the counters on 15 | this page (like with a remote). 16 |
17 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /packages/react/src/hooks.d.ts: -------------------------------------------------------------------------------- 1 | import { 2 | MasterBindConnectionApiResolved, 3 | RemoteBindConnectionApiResolved, 4 | HumanizeErrorType, 5 | IsConnectionFromRemoteType, 6 | } from "@webrtc-remote-control/core"; 7 | 8 | export function usePeer3 | Direct link to source code: 4 | 7 | {{ target }}.vue 8 | 9 | / 10 | 13 | App.vue 14 | 15 |
16 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /demo/shared/js/common-peerjs.js: -------------------------------------------------------------------------------- 1 | export function getPeerjsConfig() { 2 | // when using the local signaling server 3 | if (import.meta.env.VITE_USE_LOCAL_PEER_SERVER) { 4 | return { 5 | host: "localhost", 6 | port: 9000, 7 | path: "/myapp", 8 | }; 9 | } 10 | // default case, we use the alternate server since on some mobile carriers (orange - France) 11 | // the default host 0.peerjs.com hangs on forever - see https://github.com/peers/peerjs/issues/948#issuecomment-1107437915 12 | // todo what if this fix triggers the same kind of problem on other carriers ? implement some kind of balancing ? 13 | return { 14 | host: "0.peerjs.com", 15 | port: 443, 16 | path: "/", 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /demo/counter-vue/js/RemoteCountControl.vue: -------------------------------------------------------------------------------- 1 | 2 |
3 |
12 |
21 |
22 |
23 |
24 |
33 |
--------------------------------------------------------------------------------
/packages/vue/src/hooks.d.ts:
--------------------------------------------------------------------------------
1 | import { ToRefs, UnwrapNestedRefs } from "vue";
2 |
3 | import {
4 | MasterBindConnectionApiResolved,
5 | RemoteBindConnectionApiResolved,
6 | HumanizeErrorType,
7 | IsConnectionFromRemoteType,
8 | } from "@webrtc-remote-control/core";
9 |
10 | export function usePeer7 | 👆Snap the the QR code or{" "} 8 | 17 | click here 18 | {" "} 19 | to open an{" "} 20 | other window from where you will control this page (like 21 | with a remote). 22 |
23 | ); 24 | } 25 | 26 | OpenRemote.propTypes = { 27 | peerId: PropTypes.string, 28 | }; 29 | -------------------------------------------------------------------------------- /demo/counter-react/js/DirectLinkToSource.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export default function DirectLinkToSourceCode({ mode }) { 5 | const target = mode.at(0).toUpperCase() + mode.slice(1); 6 | return ( 7 |8 | Direct link to source code:{" "} 9 | 12 | {target}.jsx 13 | 14 | {" / "} 15 | 16 | App.jsx 17 | 18 |
19 | ); 20 | } 21 | 22 | DirectLinkToSourceCode.propTypes = { 23 | mode: PropTypes.oneOf(["master", "remote"]), 24 | }; 25 | -------------------------------------------------------------------------------- /demo/accelerometer-3d/js/DirectLinkToSource.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export default function DirectLinkToSourceCode({ mode }) { 5 | const target = mode.at(0).toUpperCase() + mode.slice(1); 6 | return ( 7 |8 | Direct link to source code:{" "} 9 | 12 | {target}.jsx 13 | 14 | {" / "} 15 | 16 | App.jsx 17 | 18 |
19 | ); 20 | } 21 | 22 | DirectLinkToSourceCode.propTypes = { 23 | mode: PropTypes.oneOf(["master", "remote"]), 24 | }; 25 | -------------------------------------------------------------------------------- /demo/counter-react/js/OpenRemote.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export default function OpenRemote({ peerId }) { 5 | return ( 6 |7 | 👆Snap the the QR code or{" "} 8 | 17 | click here 18 | {" "} 19 | to open an{" "} 20 | other window from where you will control the counters on{" "} 21 | this page (like with a remote). 22 |
23 | ); 24 | } 25 | 26 | OpenRemote.propTypes = { 27 | peerId: PropTypes.string, 28 | }; 29 | -------------------------------------------------------------------------------- /demo/shared/js/counter.master.persistance.js: -------------------------------------------------------------------------------- 1 | const MASTER_PERSISTANCE_COUNTERS_SESSION_STORAGE_KEY = 2 | "master-persist-counters"; 3 | 4 | export function persistCountersToStorage(counters) { 5 | let payload; 6 | try { 7 | payload = JSON.stringify( 8 | counters.reduce((acc, cur) => { 9 | acc[cur.peerId] = cur.counter; 10 | return acc; 11 | }, {}) 12 | ); 13 | } catch { 14 | payload = JSON.stringify({}); 15 | } 16 | sessionStorage.setItem( 17 | MASTER_PERSISTANCE_COUNTERS_SESSION_STORAGE_KEY, 18 | payload 19 | ); 20 | } 21 | 22 | export function getCountersFromStorage() { 23 | try { 24 | return JSON.parse( 25 | sessionStorage.getItem(MASTER_PERSISTANCE_COUNTERS_SESSION_STORAGE_KEY) 26 | ); 27 | } catch { 28 | return {}; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/core/remote/src/core.remote.d.ts: -------------------------------------------------------------------------------- 1 | import EventEmitter from "eventemitter3"; 2 | 3 | import { 4 | HumanizeErrorType, 5 | GetPeerIdType, 6 | SetPeerIdToSessionStorageType, 7 | } from "../../shared/common"; 8 | 9 | export { prepareUtils } from "../../shared/common"; 10 | 11 | export default function ({ 12 | humanizeError, 13 | getPeerId, 14 | setPeerIdToSessionStorage, 15 | }: { 16 | humanizeError: HumanizeErrorType; 17 | getPeerId: GetPeerIdType; 18 | setPeerIdToSessionStorage: SetPeerIdToSessionStorageType; 19 | }): { 20 | humanizeError: HumanizeErrorType; 21 | getPeerId: GetPeerIdType; 22 | bindConnection(peer: any): Promise<{ 23 | send(payload: any): any; 24 | on: InstanceType
11 |
20 |
29 |
30 | );
31 | }
32 |
33 | RemoteCountControl.propTypes = {
34 | onIncrement: PropTypes.func,
35 | onDecrement: PropTypes.func,
36 | disabled: PropTypes.bool,
37 | };
38 |
--------------------------------------------------------------------------------
/packages/core/master/src/core.master.d.ts:
--------------------------------------------------------------------------------
1 | import EventEmitter from "eventemitter3";
2 |
3 | import {
4 | HumanizeErrorType,
5 | IsConnectionFromRemoteType,
6 | GetPeerIdType,
7 | SetPeerIdToSessionStorageType,
8 | } from "../../shared/common";
9 |
10 | export { prepareUtils } from "../../shared/common";
11 |
12 | export default function ({
13 | humanizeError,
14 | isConnectionFromRemote,
15 | getPeerId,
16 | setPeerIdToSessionStorage,
17 | }: {
18 | humanizeError: HumanizeErrorType;
19 | isConnectionFromRemote: IsConnectionFromRemoteType;
20 | getPeerId: GetPeerIdType;
21 | setPeerIdToSessionStorage: SetPeerIdToSessionStorageType;
22 | }): {
23 | humanizeError: HumanizeErrorType;
24 | getPeerId: GetPeerIdType;
25 | bindConnection(peer: any): Promise<{
26 | sendTo(id: string, payload: any): any;
27 | sendAll(payload: any): any;
28 | on: InstanceType
3 |
7 |
8 |
9 |
49 |
--------------------------------------------------------------------------------
/demo/shared/css/counter-remote.css:
--------------------------------------------------------------------------------
1 | body {
2 | /* prevent zoom when double tap: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Syntax */
3 | touch-action: manipulation;
4 | }
5 | .counter-control {
6 | text-align: center;
7 | }
8 | .counter-control button {
9 | width: 100px;
10 | height: 100px;
11 | font-size: 400%;
12 | padding: 0;
13 | color: #900000;
14 | border: 1px solid #900000;
15 | /* prevent user to trigger a selection (mostly on mobile) */
16 | -webkit-touch-callout: none;
17 | -webkit-user-select: none;
18 | -khtml-user-select: none;
19 | -moz-user-select: none;
20 | -ms-user-select: none;
21 | user-select: none;
22 | }
23 | .counter-control button:disabled {
24 | color: #ffc2c2;
25 | }
26 | console-display {
27 | display: block;
28 | margin-top: 20px;
29 | }
30 | .form-set-name label {
31 | margin-top: 15px;
32 | text-align: center;
33 | display: block;
34 | /* border: 1px solid red; */
35 | }
36 | .form-set-name label input,
37 | .form-set-name label button {
38 | border-radius: 0;
39 | font-size: 150%;
40 | display: inline-block;
41 | padding: 5px;
42 | margin: 0px;
43 | border: 1px solid #900000;
44 | }
45 | .form-set-name label input {
46 | vertical-align: top;
47 | width: 220px;
48 | }
49 | .form-set-name label input:disabled {
50 | color: #ffc2c2;
51 | }
52 | .form-set-name label button {
53 | color: white;
54 | background: #900000;
55 | }
56 | .form-set-name label button:disabled {
57 | color: #ffc2c2;
58 | }
59 |
--------------------------------------------------------------------------------
/demo/counter-react/js/App.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-nested-ternary */
2 | import React, { useState, useEffect } from "react";
3 |
4 | import { WebRTCRemoteControlProvider } from "@webrtc-remote-control/react";
5 |
6 | import { getPeerjsConfig } from "../../shared/js/common-peerjs";
7 |
8 | import Master from "./Master";
9 | import Remote from "./Remote";
10 | import FooterDisplay from "../../shared/js/components/Footer";
11 |
12 | export default function App() {
13 | console.log("App render");
14 | const [mode, setMode] = useState(null);
15 | useEffect(() => {
16 | setMode(window.location.hash ? "remote" : "master");
17 | }, []);
18 | return (
19 | <>
20 | {mode ? (
21 | 43 | ©${fromTo} - labs.topheman.com - Christophe Rosset 44 |
45 |
46 |
-
12 | {list.map(({ peerId, alpha, beta, gamma, scale, color }) => (
13 |
-
14 | {peerId}
15 | 16 |}> 17 |
Loading 3D model ... 25 | 26 | -
27 |
- alpha: {alpha} 28 |
- beta: {beta} 29 |
- gamma: {gamma} 30 |
33 | ))}
34 |
54 |
79 |
80 | );
81 | }
82 |
83 | Phone3D.defaultProps = {
84 | width: 150,
85 | height: 150,
86 | };
87 |
88 | Phone3D.propTypes = {
89 | width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
90 | height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
91 | rotation: PropTypes.arrayOf(PropTypes.number),
92 | peerId: PropTypes.string,
93 | colorHover: PropTypes.string,
94 | scale: PropTypes.number,
95 | onPointerEnter: PropTypes.func,
96 | onPointerLeave: PropTypes.func,
97 | onPointerDown: PropTypes.func,
98 | onPointerUp: PropTypes.func,
99 | };
100 |
--------------------------------------------------------------------------------
/packages/core/remote/src/core.remote.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-relative-packages,import/no-extraneous-dependencies */
2 | import EventEmitter from "eventemitter3";
3 |
4 | import { makeConnectionFilterUtilities } from "../../shared/common";
5 |
6 | export { prepareUtils } from "../../shared/common";
7 |
8 | function makePeerConnection(peer, masterPeerId, ee, onConnectionOpened) {
9 | const { connMetadata } = makeConnectionFilterUtilities();
10 | // to ensure connections with iOs, must use json serialization
11 | const conn = peer.connect(masterPeerId, {
12 | serialization: "json",
13 | metadata: connMetadata, // will let us identify which connections are managed by the package / by the user
14 | });
15 | conn.on("open", () => {
16 | if (typeof onConnectionOpened === "function") {
17 | onConnectionOpened();
18 | }
19 | });
20 | conn.on("data", (data) => {
21 | ee.emit("data", { from: "master" }, data);
22 | });
23 | return conn;
24 | }
25 |
26 | export default function prepare({
27 | humanizeError,
28 | getPeerId,
29 | setPeerIdToSessionStorage,
30 | }) {
31 | return {
32 | humanizeError,
33 | getPeerId,
34 | bindConnection(peer, masterPeerId) {
35 | return new Promise((res) => {
36 | let conn = null;
37 | const ee = new EventEmitter();
38 | const wrcRemote = {
39 | send(payload) {
40 | if (conn) {
41 | conn.send(payload);
42 | } else {
43 | // eslint-disable-next-line no-console
44 | console.warning("You called `send` with no connection");
45 | }
46 | },
47 | on: ee.on.bind(ee),
48 | off: ee.off.bind(ee),
49 | };
50 | const createPeerConnectionWithReconnectOnClose = (
51 | onConnectionOpened
52 | ) => {
53 | conn = null;
54 | conn = makePeerConnection(peer, masterPeerId, ee, onConnectionOpened);
55 | conn.on("close", () => {
56 | ee.emit("remote.disconnect", { id: peer.id });
57 | createPeerConnectionWithReconnectOnClose(() => {
58 | ee.emit("remote.reconnect", { id: peer.id });
59 | });
60 | });
61 | };
62 | peer.on("open", (peerId) => {
63 | setPeerIdToSessionStorage(peerId);
64 | createPeerConnectionWithReconnectOnClose(() => res(wrcRemote));
65 | conn.on("error", (e) => {
66 | // todo emit some error ? same on master ?
67 | console.log("conn.error", e);
68 | });
69 | // ensure to disconnect remote when the page is closed
70 | const onBeforeUnloadPeerDisconnect = () => {
71 | if (conn && conn.disconnect) {
72 | conn.disconnect();
73 | }
74 | };
75 | window.addEventListener("beforeunload", onBeforeUnloadPeerDisconnect);
76 | });
77 | });
78 | },
79 | };
80 | }
81 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webrtc-remote-control
2 |
3 | [](https://github.com/topheman/webrtc-remote-control/actions/workflows/ci.yml)
4 | [](https://www.conventionalcommits.org)
5 | [](http://webrtc-remote-control.vercel.app/)
6 |
7 | Implementations
8 |
9 | | Package | Version |
10 | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
11 | | [@webrtc-remote-control/core](./packages/core#readme) | [](https://www.npmjs.com/package/@webrtc-remote-control/core) |
12 | | [@webrtc-remote-control/react](./packages/react#readme) | [](https://www.npmjs.com/package/@webrtc-remote-control/react) |
13 | | [@webrtc-remote-control/vue](./packages/vue#readme) | [](https://www.npmjs.com/package/@webrtc-remote-control/vue) |
14 |
15 | - [Demo](./demo#readme)
16 | - [CONTRIBUTING](CONTRIBUTING.md)
17 |
18 | ## The problem
19 |
20 | [PeerJS](https://peerjs.com) is a great layer of abstraction above WebRTC with a simple API, though, you still need to:
21 |
22 | - track your connections
23 | - handle reconnects of peers when your page reloads
24 |
25 | You don't want to think about this kind of networking problems, you want to focus on your app logic.
26 |
27 | **webrtc-remote-control** handles all of that.
28 |
29 | ## The use case
30 |
31 | **webrtc-remote-control** was made to handle star topology network:
32 |
33 | 
-
17 |
- 18 | 19 | 20 | Twitter 21 | 22 | 23 |
- 24 | 28 | 29 | Github 30 | 31 | 32 |
34 | webrtc-remote-control / demo / counter / vanilla 37 | 40 |
41 |
43 |
56 |
57 |
58 | Loading ...
59 |
60 |
62 |
63 |
64 |
65 |
72 | 73 | Check the counter updating in real-time on the original page, thanks to 74 | WebRTC. 75 |
76 |111 | Check the counter updating in real-time on the original page, thanks to 112 | WebRTC. 113 |
114 |-
74 |
- 75 | 76 | 77 | Twitter 78 | 79 | 80 |
- 81 | 85 | 86 | Github 87 | 88 | 89 |
91 | webrtc-remote-control / demo / accelerometer-3d 94 |
95 |
97 |
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webrtc-remote-control",
3 | "version": "0.0.1",
4 | "description": "",
5 | "private": true,
6 | "main": "src/index.js",
7 | "scripts": {
8 | "bootstrap": "lerna bootstrap",
9 | "build": "npm run build:core && npm run build:react && npm run build:vue && npm run build:demo",
10 | "build:core": "lerna run --stream --scope @webrtc-remote-control/core build",
11 | "build:react": "lerna run --stream --scope @webrtc-remote-control/react build",
12 | "build:vue": "lerna run --stream --scope @webrtc-remote-control/vue build",
13 | "build:demo": "lerna run --stream --scope @webrtc-remote-control/demo build",
14 | "build:peer-server": "VITE_USE_LOCAL_PEER_SERVER=true npm run build",
15 | "dev": "lerna run --parallel --scope @webrtc-remote-control/core --scope @webrtc-remote-control/react --scope @webrtc-remote-control/vue --scope @webrtc-remote-control/demo dev",
16 | "dev:peer-server": "VITE_USE_LOCAL_PEER_SERVER=true npm-run-all --parallel dev peer-server",
17 | "dev:forward": "npm-run-all --parallel dev demo:forward",
18 | "dev:core": "lerna run --stream --scope @webrtc-remote-control/core dev",
19 | "dev:react": "lerna run --stream --scope @webrtc-remote-control/react dev",
20 | "dev:vue": "lerna run --stream --scope @webrtc-remote-control/vue dev",
21 | "dev:demo": "lerna run --stream --scope @webrtc-remote-control/demo dev",
22 | "demo:forward": "npm run --prefix demo forward",
23 | "diff": "lerna diff",
24 | "lint": "eslint --ext .js,.jsx .",
25 | "peer-server": "npx peerjs --port 9000 --key peerjs --path /myapp",
26 | "preview": "lerna run --stream --scope @webrtc-remote-control/demo preview",
27 | "preview:peer-server": "npm-run-all --parallel preview peer-server",
28 | "preview:forward": "npm-run-all --parallel preview demo:forward",
29 | "test": "npm run test:core && npm run test:demo",
30 | "test:core": "npm run --prefix packages/core test",
31 | "test:core:precommit": "npm run --prefix packages/core test:precommit",
32 | "test:core:watch": "npm run --prefix packages/core test:watch",
33 | "test:demo": "npm run --prefix demo test",
34 | "test:demo:precommit": "npm run --prefix demo test:precommit",
35 | "test:demo:watch": "npm run --prefix demo test:watch",
36 | "test:e2e": "npm run --prefix demo test:e2e",
37 | "test:e2e:watch": "npm run --prefix demo test:e2e:watch",
38 | "test:e2e:start-server-and-test": "npm run --prefix demo test:e2e:start-server-and-test",
39 | "test:e2e:start-server-and-test:peer-server": "npm-run-all --parallel --race peer-server test:e2e:start-server-and-test",
40 | "prepare": "husky install; npm run bootstrap",
41 | "check:dotenv": "dotenv -c -- node -e 'console.log(process.env.FOO_BAR)'",
42 | "lerna:diff": "lerna diff",
43 | "lerna:version": "HUSKY=0 lerna version --conventional-commits",
44 | "lerna:version:yes": "HUSKY=0 lerna version --conventional-commits --yes",
45 | "lerna:changed": "lerna changed",
46 | "lerna:publish": "HUSKY=0 lerna publish --conventional-commits",
47 | "lerna:publish:yes": "HUSKY=0 lerna publish --conventional-commits --yes",
48 | "clean:install": "find . -name \"node_modules\" -exec rm -rf '{}' +"
49 | },
50 | "keywords": [
51 | "webrtc",
52 | "remote"
53 | ],
54 | "author": "Christophe Rosset
98 | Loading ...
99 |
100 |
101 |
102 |
103 | You are running the app in development on a local ip (${location.hostname}) (without https) which leads to disconnections.
Use tools such as localtunnel.me or ngrock.io to test with mobile devices.
Features such as WebRTC need https in production.` 114 | // : "", 115 | // ...state.common.signalErrors, 116 | // ].filter(Boolean); 117 | // consoleDisplay.data = [...state.logs].reverse(); 118 | // }); 119 | // return content; 120 | } 121 | -------------------------------------------------------------------------------- /demo/counter-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-
75 |
- 76 | 77 | 78 | Twitter 79 | 80 | 81 |
- 82 | 86 | 87 | Github 88 | 89 | 90 |
92 | webrtc-remote-control / demo / counter / vue 95 | 98 |
99 |
101 |
108 |
109 |
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/demo/counter-react/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
102 | Loading ...
103 |
104 |
105 |
106 |
107 | -
75 |
- 76 | 77 | 78 | Twitter 79 | 80 | 81 |
- 82 | 86 | 87 | Github 88 | 89 | 90 |
92 | webrtc-remote-control / demo / counter / react 95 | 98 |
99 |
101 |
108 |
109 |
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/demo/counter-react/js/Master.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { usePeer } from "@webrtc-remote-control/react";
3 |
4 | import ErrorsDisplay from "../../shared/js/components/ErrorsDisplay";
5 | import QrcodeDisplay from "../../shared/js/components/QrcodeDisplay";
6 | import OpenRemote from "./OpenRemote";
7 | import CounterDisplay from "../../shared/js/components/CounterDisplay";
8 | import RemotesList from "./RemotesList";
9 | import ConsoleDisplay from "../../shared/js/components/ConsoleDisplay";
10 | import DirectLinkToSourceCode from "./DirectLinkToSource";
11 |
12 | import {
13 | persistCountersToStorage,
14 | getCountersFromStorage,
15 | } from "../../shared/js/counter.master.persistance";
16 | import {
17 | counterReducer,
18 | globalCount,
19 | } from "../../shared/js/counter.master.logic";
20 | import { useLogger } from "../../shared/js/react-common";
21 |
22 | function makeRemotePeerUrl(peerId) {
23 | return `${
24 | window.location.origin +
25 | window.location.pathname
26 | .replace(/\/$/, "")
27 | .split("/")
28 | .slice(0, -1)
29 | .join("/")
30 | }/index.html#${peerId}`;
31 | }
32 |
33 | export default function Master() {
34 | const { logs, logger } = useLogger([]);
35 | const [peerId, setPeerId] = useState(null);
36 | const [remotesList, setRemotesList] = useState([]);
37 | const [errors, setErrors] = useState(null);
38 |
39 | const { ready, api, peer, humanizeError } = usePeer();
40 |
41 | const onRemoteConnect = ({ id }) => {
42 | const countersFromStorage = getCountersFromStorage();
43 | logger.log({ event: "remote.connect", payload: { id } });
44 | setRemotesList((counters) => [
45 | ...counters,
46 | { counter: countersFromStorage?.[id] ?? 0, peerId: id },
47 | ]);
48 | };
49 | const onRemoteDisconnect = ({ id }) => {
50 | logger.log({ event: "remote.disconnect", payload: { id } });
51 | setRemotesList((counters) =>
52 | // eslint-disable-next-line no-shadow
53 | counters.filter(({ peerId }) => peerId !== id)
54 | );
55 | };
56 | const onData = ({ id }, data) => {
57 | logger.log({ event: "data", data, id });
58 | setRemotesList((counters) => {
59 | const state = counterReducer(counters, { data, id });
60 | persistCountersToStorage(state);
61 | return state;
62 | });
63 | };
64 | const onPeerError = (error) => {
65 | setPeerId(null);
66 | logger.error({ event: "error", error });
67 | setErrors([humanizeError(error)]);
68 | };
69 |
70 | useEffect(() => {
71 | if (peer) {
72 | peer.on("error", onPeerError);
73 | }
74 | return () => {
75 | if (peer) {
76 | peer.off("error", onPeerError);
77 | }
78 | };
79 | // eslint-disable-next-line react-hooks/exhaustive-deps
80 | }, [peer]);
81 |
82 | useEffect(() => {
83 | if (ready) {
84 | setPeerId(peer.id);
85 | logger.log({
86 | event: "open",
87 | comment: "Master connected",
88 | payload: { id: peer.id },
89 | });
90 | api.on("remote.connect", onRemoteConnect);
91 | api.on("remote.disconnect", onRemoteDisconnect);
92 | api.on("data", onData);
93 | }
94 | return () => {
95 | console.log("Master.jsx.cleanup");
96 | if (ready) {
97 | api.off("remote.connect", onRemoteConnect);
98 | api.off("remote.disconnect", onRemoteDisconnect);
99 | api.off("data", onData);
100 | }
101 | };
102 | // eslint-disable-next-line react-hooks/exhaustive-deps
103 | }, [ready]);
104 | return (
105 | <>
106 |
102 | Loading ...
103 |
104 |
105 |
106 |
107 |
110 | Global counter:
3 |
22 |
23 |
24 |
140 |
--------------------------------------------------------------------------------
/demo/shared/js/components/remotes-list.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-underscore-dangle */
2 | import "./counter-display";
3 |
4 | class RemotesList extends HTMLElement {
5 | constructor() {
6 | super();
7 | const shadow = this.attachShadow({ mode: "open" });
8 | const style = document.createElement("style");
9 | const div = document.createElement("div");
10 | style.textContent = `
11 | ul {
12 | list-style: none;
13 | padding-left: 0;
14 | }
15 | li::before {
16 | padding-left: 5px;
17 | content: "📱";
18 | }
19 | .remote-peerId {
20 | font-size: 80%;
21 | }
22 | .ping-button {
23 | border: 0;
24 | padding: 3px;
25 | vertical-align: bottom;
26 | cursor: pointer;
27 | }
28 | .ping-button::after {
29 | content: " 🔔"
30 | }
31 | counter-display {
32 | font-weight: bold;
33 | font-size: 120%;
34 | }
35 | `;
36 | shadow.appendChild(style);
37 | shadow.appendChild(div);
38 | this.render();
39 | }
40 |
41 | static get observedAttributes() {
42 | return ["data"];
43 | }
44 |
45 | /**
46 | * Accept a `data` attribute with a serialized object
47 | * `data` attribute is not kept in sync with `data` property
48 | * for performance reasons (to avoid large object serialization)
49 | */
50 |
51 | attributeChangedCallback(attrName, oldVal, newVal) {
52 | if (oldVal !== newVal) {
53 | if (attrName === "data") {
54 | try {
55 | const data = JSON.parse(newVal);
56 | this._data = data;
57 | } catch (e) {
58 | // eslint-disable-next-line no-console
59 | console.error(
60 | "Failed to parse `data` attribute in `remotes-list` element",
61 | e
62 | );
63 | }
64 | }
65 | this.render();
66 | }
67 | }
68 |
69 | get data() {
70 | return this._data;
71 | }
72 |
73 | set data(newVal) {
74 | this._data = newVal;
75 | this.render();
76 | }
77 |
78 | render() {
79 | let content;
80 | if (!this._data) {
81 | content = "16 | Check the counter updating in real-time on the original page, thanks to 17 | WebRTC. 18 |
19 |No connected remotes
"; 82 | } else { 83 | const div = document.createElement("div"); // used for remote.name sanitizing 84 | content = `${this._data.length} connected remote${ 85 | this._data.length > 1 ? "s" : "" 86 | }
- ${this.data
87 | .slice()
88 | .sort((a, b) => (a.peerId > b.peerId ? 1 : -1))
89 | .map((remote) => {
90 | if (remote.name) {
91 | div.textContent = remote.name;
92 | }
93 | return `
- ${
94 | remote.peerId
95 | } counter:
${ 98 | remote.name ? ` ${div.innerHTML}` : "" 99 | } `;
102 | })
103 | .join("")}
128 | 134 |
135 | ) : null} 136 | {permissionState === "denied" ? ( 137 |138 | Request to access the device orientation was rejected, please grant it 139 | by clicking yes on the prompt. 140 |
141 | ) : null} 142 | {orientation ? ( 143 |-
144 |
- alpha: {orientation.alpha} 145 |
- beta: {orientation.beta} 146 |
- gamma: {orientation.gamma} 147 |
-
74 |
- 75 | 76 | 77 | Twitter 78 | 79 | 80 |
- 81 | 85 | 86 | Github 87 | 88 | 89 |
91 | webrtc-remote-control / demo / counter / vanilla 94 | 97 |
98 |
100 |
113 |
114 |
101 | Loading ...
102 |
103 |
104 |
112 | 105 | Direct link to source code 109 |
110 | 111 |
115 | Loading ...
116 |
117 | 120 | 👆Snap the the QR code or 121 | click here to open an 122 | other window from where you will control the counters 123 | on this page (like with a remote). 124 |
125 |
126 | Global counter:
127 |
3 |
22 |
23 |
24 |
188 |
--------------------------------------------------------------------------------
12 | Global counter:
13 |