yskmjpのアイコン画像

ウェブ会議で画面映りを良くするLEDライトをobnizで自作する

yskmjp 2021年05月16日に作成  (2021年05月16日に更新)

ウェブ会議で画面映りを良くするLEDライトをobnizで自作する

はじめに

昨今のコロナ禍でリモートワークなどは当たり前になり、zoomなどを使ったウェブ会議も仕事、プライベート問わずよく使われるようになりました。

その際に、音声は誰でも持っているイヤホンマイクなどを使うだけでもかなり改善されますが、画面映りを考慮して照明環境を整えるまではなかなか気が回らないのが一般的だと思います。

最近では専用のLEDライトも数多く販売されていますが、そこまではなかなか踏み切れないと思います。

そこで、obnizを利用して簡易的なウェブ会議用のLEDライトを作成したいと思います。

使ったもの

  • obniz Board 1Y
  • LEDバー (WS2822を使ったもの)
  • CdSセンサー (1MΩ)
  • 抵抗

各部品の接続は以下のとおりです。
キャプションを入力できます

00 - DIN
01 - VCC
02 - GND
09 - GND
10 - アナログ
11 - VCC

obnizでフルカラーLEDを光らせる

照明用LEDとしてはフルカラーLED(WS2812)が8つ並んだLEDバーを使っています。
今回はウェブ画面からスライドバーで256段階の強さを変更できるようにしました。
専用照明でも使われるリング型のLEDや、照明を強くしたい場合はLED数が多いものを使うこともできます。

光センサーと連動する

今回はCdSセンサーを使って暗くなると光るように制御する仕組みも入れてみました。
CdSセンサーは光の強さによって抵抗値が変わるので、10番のアナログピンの電圧を計測することで光の強さを測ることができます。

動かしてみる

実際に動かしている様子を次の動画で見ることができます。
前半はスライドバーで光の強さを変更、後半はセンサーを手で覆って暗くなるとLEDライトが付く様子を見ることができます。

ここに動画が表示されます

ソースコード

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="/css/starter-sample.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@3.14.0/obniz.js" crossorigin="anonymous" ></script> </head> <body> <div id="obniz-debug"></div> <h1>obniz LED control</h1> <div class="text-center"> <input id="slider" type="range" value="0" min="0" max="255" step="1" /> </div> <div id="print"></div> <script> var obniz = new Obniz("OBNIZ_ID_HERE"); var a = 0; var v = 0; obniz.onconnect = async function () { obniz.io11.output(true); //io11を5vに obniz.io9.output(false); //io9をGNDに var leds = obniz.wired("WS2812", { gnd: 2, vcc: 1, din: 0 }); //io10をアナログピンに obniz.ad10.start((voltage) => { v = voltage; if (v < 0.01) { a = 255; } else { a = 0; } console.log(`v:${v} a:${a}`); leds.rgbs([ [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], ]); }); $("#slider").change(async () => { a = $("#slider").val(); await leds.rgbs([ [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], [a, a, a], ]); }); $("#clear").click(function () { obniz.display.clear(); }); }; </script> </body> </html>
  • yskmjp さんが 2021/05/16 に 編集 をしました。 (メッセージ: 初版)
ログインしてコメントを投稿する