@webrtc-remote-control/core


Imagine you could simply control a web page opened in a browser (master) from an other page in an other browser (remote), just like you would with a TV and a remote.

webrtc-remote-control lets you do that (based on PeerJS) and handles the disconnections / reconnections, providing a simple API.

Installation

``sh
npm install peerjs @webrtc-remote-control/core
`

This package is the core one. Implementations for popular frameworks such as react or vue are available here.

Usage

Add the peerjs library as a script tag in your html page. You'll have access to Peer constructor.

`html

`

Direct link to the demo source code: master.js / remote.js

$3

`js
import prepare, { prepareUtils } from "@webrtc-remote-control/core/master";

async function init() {
const { bindConnection, getPeerId, humanizeError } = prepare(prepareUtils());
const peer = new Peer(getPeerId());
peer.on("open", (peerId) => {
// do something with this master peerId - create some url to open the browser based on it
});

const api = await bindConnection(peer);
api.on("remote.connect", ({ id }) => {
console.log(Yay, remote ${id} just connected to master!);
});
api.on("remote.disconnect", ({ id }) => {
console.log(Boo, remote ${id} just disconnected from master!);
});
api.on("data", ({ id }, data) => {
console.log(Remote ${id} just sent the message, data);
});

// send some data to the remotes
api.sendAll({ msg: "Hello world to all remotes" });
// api.sendTo(remoteId, { msg: "Hello world to a specific remote" });
}
`

$3

`js
import prepare, { prepareUtils } from "@webrtc-remote-control/core/remote";

async function init() {
const { bindConnection, getPeerId, humanizeError } = prepare(prepareUtils());
const peer = new Peer(getPeerId());

// connect to master with masterPeerId (passed via QRCode, url, email ...)
const api = await bindConnection(peer, masterPeerId);
api.on("remote.disconnect", ({ id }) => {
console.log(Boo, remote ${id} just disconnected from master!);
});
api.on("remote.reconnect", ({ id }) => {
console.log(Yay, remote ${id} just reconnected to master!);
});
api.on("data", (_, data) => {
console.log("Master just sent this message", data);
});

// send some data
api.send({ msg: "Hello master page" });
}
`

TypeScript

TypeScript types are shipped with the package.

UMD build

Don't want to use a bundler ? You can simply use the UMD (Universal Module Definition) build and drop it with a script tag from your favorite js cdn, you'll have access to a webrtcRemoteControl object on the window`.

- Development build: https://unpkg.com/@webrtc-remote-control/core/dist/webrtc-remote-control.umd.dev.js
- Production build: https://unpkg.com/@webrtc-remote-control/core/dist/webrtc-remote-control.umd.prod.js