Next.js Example App

Public React / Next.js reference app for the Alpha Camera REST API.

This example shows how to:

• start or adopt the local camera server from a Next.js route
• use the published TypeScript SDK client from @alpha-sdk/client
• handle camera discovery, connect, reconnect, and SSE updates in app code
• render live view and common camera controls in a browser UI

It is the TypeScript counterpart to the macOS Swift example app.

Requirements

• Node.js 20+
• npm
• a camera supported by the SDK
• macOS / Windows / Linux machine that can run the published camera server binary

Camera setup

For USB SDK detection, set the camera body to remote shooting / PC Remote mode.

Typical Sony menu path:

• Menu -> Setup -> USB -> USB Connection Mode -> Remote Shooting or PC Remote
• Menu -> Network -> Cnct./Remote Sht. -> Remote Shooting Function -> Remote Shooting -> On

Some models also require:

• Connect without Pairing

For network / Ethernet setup, compatibility depends on camera model. Use:

• crsdk.app

and the camera help guide for model-specific steps.

Not all camera models support SDK network connection, and not all network-capable models support both wired and wireless operation.

Install

From this folder:

npm install

This installs:

• the Next.js app dependencies
• @alpha-sdk/api for local server management
• @alpha-sdk/client for typed REST calls

Run

Development:

npm run dev

Open:

• http://localhost:3000

Production build:

npm run build
npm run start

How server startup works

The browser UI does not spawn the native camera server directly.

Instead:

1. the page calls POST /api/server
2. src/app/api/server/route.ts uses ServerManager from @alpha-sdk/api
3. the route either:
   • starts a local CameraWebApp, or
   • adopts an already-running healthy server
4. the page then creates a CameraManager against that server URL

Relevant files:

• src/app/api/server/route.ts
• src/lib/camera-manager.ts
• src/lib/event-stream.ts
• src/app/page.tsx

Lifecycle model

The app uses three layers:

1. Server route

src/app/api/server/route.ts

• starts / stops the server
• adopts an already-running server on 8080
• avoids duplicate-start races during Next.js reloads

2. Camera lifecycle layer

src/lib/camera-manager.ts

• polls GET /api/cameras
• auto-connects detected cameras
• waits for SSE connect confirmation
• handles reconnect after disconnect
• exposes a bound camera helper for actions and property access

3. Browser SSE helper

src/lib/event-stream.ts

• uses native EventSource
• reconnects automatically on stream failure
• exposes typed event listeners to the lifecycle layer and UI

Live view

The app polls live-view JPEG frames over HTTP and swaps the current image in the page.

The browser UI also supports:

• OSD toggle
• zoom in/out
• focus near/far
• AF shutter / continuous shutter
• movie record toggle
• SD card file listing and download

Key files to modify

UI layout

• src/app/page.tsx

Server lifecycle

• src/app/api/server/route.ts

Camera lifecycle

• src/lib/camera-manager.ts

SSE behavior

• src/lib/event-stream.ts

Troubleshooting

Camera is detected but will not connect

Try this in order:

1. unplug the camera
2. turn the camera off
3. turn the camera back on
4. reconnect USB

If it still fails:

1. stop other camera apps that may hold the camera
   • Imaging Edge Desktop
   • Creators’ App
2. stop any other running camera servers
3. restart the computer

Next.js route keeps failing to start the server

Check whether another server is already running on 8080. The route will usually adopt it, but stale dev processes can interfere during reloads.

Useful checks:

lsof -nP -iTCP:3000 -sTCP:LISTEN
lsof -nP -iTCP:8080 -sTCP:LISTEN

Live view or controls feel stale after code edits

Restart the Next.js dev server. Route-module and lifecycle state can survive HMR in ways that do not match a clean startup.

Related docs

• SSE events
• Server subprocess
• Discovery + reconnect
• React hook