NorskInput.browser() method

Generates a video source by rendering an HTML page

Signature:

browser(settings: BrowserInputSettings): Promise<BrowserInputNode>;

Parameters

Parameter Type Description

settings

BrowserInputSettings

Settings for the web page

Returns:

Promise<BrowserInputNode>

Example [12_overlay_score.ts]

Overlay an RTMP stream with a web page and host a simple UI that updates the overlay

export async function main() {
  runWebServer();
  const norsk = await Norsk.connect();

  const input1 = await norsk.input.rtmpServer({ id: "rtmpInput" });
  const input2 = await norsk.input.browser(browserSettings);
  const compose = await norsk.processor.transform.videoCompose(composeSettings);
  const output = await norsk.output.whep({ id: "webrtc", ...webRtcServerConfig});

  compose.subscribeToPins([
    { source: input1, sourceSelector: videoToPin(background.pin) },
    { source: input2, sourceSelector: videoToPin(overlay.pin) },
  ]);

  output.subscribe([
    { source: compose, sourceSelector: selectVideo },
    { source: input1, sourceSelector: selectAudio },
  ]);

  console.log(`WebRTC Player URL: ${output.playerUrl}`);
}

const browserSettings: BrowserInputSettings = {
  id: "browser",
  url: `http://${clientHostInternal()}:${port}/static/overlay-score.html`,
  resolution: { width: 1280, height: 720 },
  sourceName: "browserOverlay",
  frameRate: { frames: 25, seconds: 1 },
};
const background: ComposePart<"background"> = {
  pin: "background",
  opacity: 1.0,
  zIndex: 0,
  sourceRect: { x: 0, y: 0, width: 100, height: 100 },
  destRect: { x: 0, y: 0, width: 100, height: 100 },
};
const overlay: ComposePart<"overlay"> = {
  pin: "overlay",
  opacity: 1.0,
  zIndex: 1,
  sourceRect: { x: 0, y: 0, width: 100, height: 100 },
  destRect: { x: 0, y: 0, width: 100, height: 100 },
};

const parts = [background, overlay];
const composeSettings: VideoComposeSettings<"background" | "overlay"> = {
  id: "compose",
  referenceStream: background.pin,
  outputResolution: { width: 1280, height: 720 },
  referenceResolution: { width: 100, height: 100 },
  outputPixelFormat: "bgra",
  parts,
};

Run the following command to generate example input at url rtmp://127.0.0.1:1935/acme/high:

ffmpeg -v error -re -stream_loop -1 -i data/InkDrop.ts  -vcodec copy -codec copy -f flv 'rtmp://127.0.0.1:1935/acme/high'

Find Examples