niconicomments documentation

About

Comment rendering library that is somewhat compatible with the official Nico Nico Douga player

Document: https://xpadev-net.github.io/niconicomments/

TypeDoc: https://xpadev-net.github.io/niconicomments/type/

Repository: https://github.com/xpadev-net/niconicomments

npm: https://www.npmjs.com/package/@xpadev-net/niconicomments

Sample

sample

Install

NodeJS:

npm i @xpadev-net/niconicomments

Web:

<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>

Example

Using HTMLCanvasElement

const canvas = document.getElementById("canvas");
const video = document.getElementById("video");
const req = await fetch("sample.json");
const res = await req.json();
const niconiComments = new NiconiComments(canvas, res);
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);

Using CanvasRenderer

const canvas = document.getElementById("canvas");
const video = document.getElementById("video");
const req = await fetch("sample.json");
const res = await req.json();
const renderer = new NiconiComments.internal.renderer.CanvasRenderer(canvas);
const niconiComments = new NiconiComments(renderer, res);
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);

For users who use this library for domestic use in Japan

This library may infringe on Dwango's patents depending on how it is used

Please carefully review the following applicable patents and case law before using this library with caution.

JP,2006-333851

JP,2010-267283

JP,2018-202475

2018: Case No. Heisei 28 (wa) 38565, Patent Infringement Injunction, etc. Patent Right Civil Litigation

2022: Heisei 30 (ne) 10077 Appeal for Patent Infringement Injunction, etc. Patent Right Civil Litigation

Class

class NiconiComments(canvas:HTMLCanvasElement | IRenderer, data:inputFormat, options:InitOptions)

The main body of this library.

Parameters

canvas:HTMLCanvasElement | IRenderer

Pass a class or object conforming to IRenderer or Canvas Element for comment drawing

CanvasRender used by default can be used from NiconiComments.internal.renderer.CanvasRenderer

This library assumes that the canvas size is 1920x1080.

If the size is incorrectly set, the comment will not be drawn correctly.

data:inputFormat

Please pass comment data or undefined.

Please check the format for supported formats.

options:InitOptions

config:Config = {}

It is recommended not to change this option. It may cause drawing corruption.

You can override the magic number for internal processing

See the defaultConfig comment in src/definition/config.ts for details on each variable

debug:boolean = false

Outputs the time required for processing to the browser console

It also displays the command applied in the upper left corner of each comment.

No output by default (false)

enableLegacyPiP:boolean = false

This option is effective immediately

Change Picture in Picture output mode

The default (false) is to draw the video so that it covers the entire screen

If true, the video will be drawn so that it fits entirely within the screen

format:inputFormatType = "legacy"

Specify input format

Supported formats are as follows

Name	Type	Note
empty	undefined	For dynamic additional comments
XMLDocument	XMLDocument	Pass XML parseFromString with DOMParser
xml2js	Xml2jsPacket	Pass object parsed with xml2js
formatted	formattedComment[] \|formattedLegacyComment[]	If user_id and layer are not included, it will be formattedLegacyComment
legacy	rawApiResponse[]	Pass the legacy api response with JSON.parse
owner	ownerComment[]	Please JSON.parase and pass the json of the editor on the owner comment edit screen
legacyOwner	string	Please pass the editor's string (including line breaks) from the old owner's comment edit screen as a string
v1	v1Thread[]	Pass the contents of the threads under data in the v1 api

formatted:boolean = false

This option is deprecated. Use the format option

Specifies whether the comment data is in a proprietary format

If default (false), the data is converted to the original format before processing

If true, processing is performed as is.

keepCA:boolean = false

Suppresses the collapse of comment arts (mainly stacked comments) by another CA or by irrelevant comments.

If default (false), positioning is done as usual

If true, the layer of the user who is presumed to have posted the CA will be positioned separately.

It also has the effect of suppressing the scaling of the corresponding CA.

mode:modeType = "default"

Specifies the drawing mode

The default ("default") is to automatically switch the mode of operation for each comment based on the posting time.

"html5" will work similar to the current html5 player

"flash" will work similar to Flash era compatible players such as Saccubus/ZenzaWatch.

In the case of "default" or "flash", it partially supports font-changing characters and split comments from the Flash player.

scale:number = 1

Scale up or down the display comment size

It is recommended to use keepCA together

showCollision:boolean = false

This option is effective immediately

Specifies whether or not to draw the hit judgment of the comment.

Defaults (false) to no drawing

If true, the comment hit detection and the line separator are drawn.

The color of the outer border changes to light blue for HTML5 comments and purple for Flash comments.

showCommentCount:boolean = false

This option is effective immediately

Specifies whether the number of comments being drawn should be drawn on the screen.

Defaults (false) to no drawing

If true, the total number of comments drawn on the screen is drawn.、画面内に描画されているコメントの総数を描画します

showFPS:boolean = false

This option is effective immediately

Specifies whether the FPS is drawn on the screen.

Defaults (false) to no drawing

If true, FPS is displayed.

※This value is calculated based on the time it takes to draw a frame, so it is different from the actual number of frames drawn.

useLegacy:boolean = false

This option is deprecated. use the mode option

Specifies whether official player compatibility mode is enabled

If the default (false), the drawing mode is automatically switched for each comment

If true, all comments are rendered as HTML5 comments

video:HTMLVideoElement | null = null

This option is effective immediately

If you are using an object or class conforming to IRenderer, set the IRenderer's video property to VideoElement
If you are using CanvasRenderer, pass VideoElement as the second argument

Specifies the video to be drawn in the background.

If default (null), no video is drawn.

If specified, the specified video is drawn in the background and the comment is drawn on top of it.

By applying this function, you can also display comments on Picture in Picture.

Methods

addComments(...comments:formattedComment):void

This is a feature to dynamically add comments, mainly for live broadcasts.

Comments added by this feature are placed based on a hit decision, but do not affect the position of subsequent comments that have already been placed.

Comments may overlap with each other when placed between already generated comments.

addEventListener(eventName:CommentEventName, eventHandler:CommentEventHandler):void

Add an event handler

Check the type definition for event details

removeEventListener(eventName:CommentEventName, eventHandler:CommentEventHandler):void

Remove an event handler

Check the type definition for event details

drawCanvas(vpos:number):void

Draws a comment on the canvas based on vpos(currentTime*100 of the video)

clear():void

Erase Canvas

Custom Commands

niconicomments独自のコマンド

Flash

format

nico:flash

Enforces processing as a Flash version comment when in auto mode

※This command is ignored except in auto mode

※If you want to force processing as HTML5 version comments in auto mode, use one of the following commands: defont, mincho, or gothic

Stroke Color

format

nico:stroke:(color|color code)

example

nico:stroke:red
nico:stroke:#f0f
nico:stroke:#fff5

This command allows you to change the color of the comment borders

Colors can be specified with the color command or color code

Color code can also specify transparency

Waku

format

nico:waku:(color|color code)

example

nico:waku:red
nico:waku:#f0f
nico:waku:#fff5

You can control the display of frames per comment.

Colors can be specified with the color command or color code

Color code can also specify transparency

Fill

format

nico:fill:(color|color code)

example

nico:fill:red
nico:fill:#f0f
nico:fill:#fff5

You can control the background color per comment.

Colors can be specified with the color command or color code

Color code can also specify transparency