@mobile-next/device-view

React component for remote device streaming, interaction, and control. Renders a live view of an iOS or Android device (WebRTC, AVC, or MJPEG streams) with touch/gesture forwarding, hardware buttons, and a device frame skin.

Install

npm install github:mobile-next/react-device-view

Requires react and react-dom >= 18 as peer dependencies.

Usage

import { DeviceView } from '@mobile-next/device-view';

<DeviceView
  serverUrl="wss://app.mobilenext.ai/ws"
  token="mob_XXXX..."
  deviceId="your-device-id"
  onConnected={() => console.log('connected')}
  onDisconnected={() => console.log('disconnected')}
  onError={(err) => console.error(err)}
/>

The component fills its container, so give the parent element a size.

For advanced usage (custom compositions, raw streams, RPC), see the exports in src/index.ts — DeviceInstance, DeviceViewport, DeviceControls, WebRtcStream, JsonRpcClient, and friends.

Device skins

The frame is selected from the device's reported model. The Pixel 9 has a pixel-exact frame; every iOS device gets a stretchable 9-patch iPhone frame and every other Android device a stretchable 9-patch Pixel-style frame (NinePatchSkinView), each adapting to any screen aspect ratio — from iPhone SE to iPad Pro, from a budget 720p phone to a Galaxy Ultra. To eyeball the 9-patch at arbitrary sizes, run npm run example and open /ninepatch.html. Skins are embedded in the bundle, so there is no skinsUrl to configure (it was removed — this is a breaking change from earlier 0.x if you relied on hosted skins).

Running locally

npm install
npm run example

This starts a Vite dev server with the example app from example/. Open the printed URL, enter your server URL and API token (mob_...), pick an online device, and you'll get a live device view.

Other scripts:

npm run build       # build the library into dist/ (tsup)
npm run dev         # rebuild on change
npm test            # run tests (vitest)

License

Apache-2.0