ライトペン

JavaScript

とあるお仕事で、説明するときに画面の文字や記号を書き込むライトペンを使えれば?みたいな話がありました。
知っているものは高価で、ちょっとした配信などで使うには少しハードルが高い気がしたので、調べてみると、Javascriptで実現可能という事なので、試しに作ってみました。

USB HDMIキャプチャ等でキャプチャしたものに、リアルタイムにお絵描きをして、PCのHDMI出力を配信等に使うことを想定しています。

そのまま使える形で置いていますので、自由にご使用いただき、ご意見をお寄せいただけましたら幸いです。

スケットラボ・ライトペン


使い方

■ 起動すると、ソース選択になります

ソース(背景)には、
・webカメラ/キャプチャーボード
・動画ファイル
・黒
・白
を選択することが出来ます。

■ マウスを右の画面外に動かすと、メニューが出てきます
 メニュー上から
 ・ガイド  ボタンの上にマウスを載せると説明が出るモードです。
 ・ソース選択  最初に出る背景選択です
 ・ペン  ペン描画モードです。指定した色で描きます
 ・矢印  矢印描画モードです。終点が矢印になります
 ・消しゴム  描いたものを消す
 ・トラック  これを押した後、画面上の中心点をクリックしそこからドラッグすることで円を描きます。その中にある物体を自動で追従します。
 ・ノーマライズ  直線、○や□をマウスで描くとガタガタになるので、自動的に成型するモードです
 ・色選択  8色用意しました
 ・ペンの太さ  細 中 太の3種類
 ・全消去  画面上に描いたものをすべて消します
 ・保存  今の画面を画像ファイルにして保存します
 ・全画面  全画面モードにします。


【免責事項】
本ツールは無保証で提供されます。利用による損害について開発者は一切の責任を負いません。
また、本ツールに関する個別のサポートやお問い合わせへの対応は行っておりません。
あらかじめご了承の上、自己責任でご利用ください。