オンライン研修の動画共有時のON AIRをobnizで表示させるWEBアプリをつくった

15881 ワード
Bootstrap JavaScript Webアプリケーション obniz 動画 JavaScript テキストリンク

はじめに

オンライン研修やオンライン会議の時に、動画共有されたことありますか？

そんな時に、動画開始！と参加者に伝えるための、ONAIRをobnizでつくりました。

イメージはこちら。

つくったもの

まずはこちらをご覧ください。

シンプルです。

ZOOMなどで動画共有を開始したタイミングで、自分の画面にobnizを登場させ、ON AIR中であることを知らせるものです。

別パターンとして、手作りのON AIRもつくってみました。
もっとオシャレなもので作るといいですね。

準備するもの

・obniz
・フルカラーLED
・PCとobnizを繋ぐコード
・スマホ
・PC

使い方

1. obnizを起動させ、フルカラーLEDと接続する

obnizとフルカラーLEDの接続の仕方

長さに注目ください。
微妙に少しずつ長さが異なりますので、しっかり確認いただき、
obnizの番号が書いてある所に、同じ番号を差し込んでください。

2. 以下にスマホでアクセスする。（PCも可）

3. 自分のobnizのIDを入力する。

4. ON , OFFを押す

作り方

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/[email protected]/obniz.js" 
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
        crossorigin="anonymous" />

    <title>Button to Led</title>
</head>

<body>
    <h2 class="text-center" style="margin:40px">LED ON / OFF</h2>
    <div id="onoff-buttons" class="text-center">
        <button id="on" type="button" class="btn btn-primary">ON</button>
        <button id="off" type="button" class="btn btn-secondary" disabled>
            OFF</button><br />
    </div>

<script>

    // 公式サイトより挿入
    $(() => {
        let obniz = new Obniz("OBNIZ_ID_HERE");
        obniz.onconnect = async () => {
            const rgbled = obniz.wired('WS2811', { gnd: 0, vcc: 1, din: 2 });

            rgbled.rgb(0, 0, 0);
            $("#on").click(e => {
                obniz.display.clear();  // 一旦クリアする
                obniz.display.font('Avenir', 30)
                obniz.display.print('ON AIR!!');
                rgbled.rgb(255, 0, 0);
                $("#on").prop("disabled", true);
                $("#off").prop("disabled", false);
            });
            $("#off").click(e => {
                obniz.display.clear(); 
                obniz.display.font('Avenir', 18)
                obniz.display.print('LED OFF'); 
                rgbled.rgb(0, 0, 0);
                $("#on").prop("disabled", false);
                $("#off").prop("disabled", true);
            });
        };
    });
</script>

</body>

</html>

まとめ

Javascriptを書かなくても、
公式ページには、以下のようなビジュアルプログラミングができるツールが
用意されています。（私は最初これで作りました。）

これでも十分動きます。

ただ、より自由度を高めようと思うと、今回のようにJavascriptでつくるのが良いかなと思い、今回作ってみました。

お試しください。