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

const browserSettings: BrowserInputSettings = {
  id: "browser",
  url: "http://127.0.0.1:3000/static/overlay-score.html",
  resolution: { width: 1280, height: 720 },
  sourceName: "browserOverlay",
  frameRate: { frames: 25, seconds: 1 },
};
let browserInput = await norsk.input.browser(browserSettings);

const backgroundPart: 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 overlayPart: 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 = [backgroundPart, overlayPart];

const composeSettings: VideoComposeSettings<"background" | "overlay"> = {
  id: "compose",
  referenceStream: backgroundPart.pin,
  outputResolution: { width: 1280, height: 720 },
  referenceResolution: { width: 100, height: 100 },
  outputPixelFormat: "bgra",
  parts,
};
let overlay = await norsk.processor.transform.videoCompose(composeSettings);

overlay.subscribeToPins([
  {
    source: input,
    sourceSelector: videoToPin("background"),
  },
  {
    source: browserInput,
    sourceSelector: videoToPin("overlay"),
  },
]);

let output = await norsk.duplex.webRtcBrowser({ id: "webrtc" });

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

console.log(`Local player: ${output.playerUrl}`);

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

ffmpeg -v error -re -f lavfi -i "sine=frequency=220:sample_rate=48000" -loop 1 -i data/test-src-still.png -vf drawtext=fontfile=Arial.ttf:text="%{frame_num}":start_number=1:x=980:y=330:fontcolor=black:fontsize=40:box=1:boxcolor=white:boxborderw=5,scale=1280:720 -vcodec h264 -b:v 150000 -b:a 20000 -aspect 1280:720 -x264opts "keyint=25:min-keyint=25:no-scenecut:bframes=0" -bluray-compat true -tune stillimage -preset fast -pix_fmt yuv420p -acodec aac -metadata language=en -f flv 'rtmp://127.0.0.1:5001/acme/high'

Find Examples