niconicomments

[English]

ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ
High peformance High compatibility comment drawing library
Reference： https://xpadev-net.github.io/niconicomments/
Github： https://github.com/xpadev-net/niconicomments
npm： https://www.npmjs.com/package/@xpadev-net/niconicomments

Installation

CDN から読み込む場合は、可変エイリアスではなく固定バージョンを指定してください。

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

or

npm i @xpadev-net/niconicomments

npm で読み込む場合:

import NiconiComments from "@xpadev-net/niconicomments";

Examples

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);
//video.ontimeupdateを使用すると、呼び出し回数の関係でコメントカクつく
let animationFrameId = null;

const stopDrawing = () => {
  if (animationFrameId === null) return;
  cancelAnimationFrame(animationFrameId);
  animationFrameId = null;
};

const draw = () => {
  animationFrameId = null;
  niconiComments.drawCanvas(video.currentTime * 100);
  if (!video.paused && document.visibilityState !== "hidden") {
    animationFrameId = requestAnimationFrame(draw);
  }
};

const startDrawing = () => {
  if (animationFrameId === null && document.visibilityState !== "hidden") {
    animationFrameId = requestAnimationFrame(draw);
  }
};

video.addEventListener("play", startDrawing);
video.addEventListener("pause", () => {
  stopDrawing();
  niconiComments.drawCanvas(video.currentTime * 100);
});
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden" || video.paused) {
    stopDrawing();
  } else {
    startDrawing();
  }
});

Sample

サンプル

このライブラリを使用される方へ

このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります
詳しくはこちらニコニコが保有する特許についてを参照してください