NorskInput.browser() method
Generates a video source by rendering an HTML page
Signature:
browser(settings: BrowserInputSettings): Promise<BrowserInputNode>;
Parameters
Example [12_overlay_score.ts]
Overlay an RTMP stream with a web page and host a simple UI that updates the overlay
let browserInput: BrowserInputNode | undefined = undefined;
export async function main() {
runWebServer();
const norsk = await Norsk.connect();
const rtmpInput = await norsk.input.rtmpServer({ id: "rtmpInput" });
browserInput = 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: rtmpInput, sourceSelector: videoToPin(background.pin) },
{ source: browserInput, sourceSelector: videoToPin(overlay.pin) },
]);
output.subscribe([
{ source: compose, sourceSelector: selectVideo },
{ source: rtmpInput, 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,
compose: VideoComposeDefaults.fullscreen()
};
const overlay: ComposePart<"overlay"> = {
pin: "overlay",
opacity: 1.0,
zIndex: 1,
compose: VideoComposeDefaults.fullscreen()
};
const parts = [background, overlay];
const composeSettings: VideoComposeSettings<"background" | "overlay"> = {
id: "compose",
referenceStream: background.pin,
outputResolution: { width: 1280, height: 720 },
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
Search for examples using browser in our examples repo.