Node-REDを使ってブラウザに喋って複数の動画を制御する

6264 ワード
WebSpeechAPI Video node-red Video テキストリンク

はじめに

やりたいこと

  • 複数人で動画を見ていて、誰かが止めてといえば、全員が見ている動画がとまるようにしたい
  • 基本的な使い方は関連記事を参照してください。

Node-REDのまとめ記事

動作環境

  • IBM bluemix Node-RED : v0.20.5

免責事項

  • 検証をして確実と思われる情報を載せておりますが、誤っている可能性もゼロではないので、参考程度にご利用ください

本編

画面

動画は著作権とかあるので、あえてロード中にしています

処理の流れ

  1. 画面を開くとWebSocketを使ってサーバとの通信を確立
  2. ボタンを押すと音声を認識できる状態になる
  3. WebSpeechAPIを使って、ブラウザに向かって話した内容を文字列化
  4. 文字列をサーバに送る
  5. 制御用文字と時間をJSON化してブロードキャストする
  6. 受け取ったJSONでブラウザ側で制御(止めたり、戻したり)をする
  7. WebSpeechAPIを使って結果を喋らせる

フロー

補足

  • ブロードキャストされるように、delete msg._session をしています
  • 10秒戻してを{back:10} のように変換して各クライアントにブロードキャストします
  • コマンドは、再生、停止、早送り、巻き戻し、頭出しの5つでよく使いそうな言葉と紐づけています
    • the worldも作ろうかと思いましたが、いちいち説明するのがwww

ブラウザ側の実装

WebSpeechAPI部分は、前回記事をご参照ください

動画制御部分のみの掲載です。

ブラウザのhtml内のjs
   var v = document.getElementById("video");
   var [command,time] = evt.data.split(":")
        switch (command){
            case 'play':
            v.play();
            speakText = "動画を再生します"
            break;
            case 'pause':
            v.pause();
            speakText = "動画を停止します"
            break;
            case 'forward':
            v.currentTime += Number(time);
            speakText = "動画を"+time+"秒進めます"
            break;
            case 'back':
            v.currentTime -= Number(time);
            speakText = "動画を"+time+"秒戻します"
            break;
            case 'reset':
            v.currentTime = 0;
            speakText = "動画を最初から再生"
            break;
        }

videoタグっていろいろなことができるんですねぇ