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
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
Search for examples using browser in our examples repo.