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

はじめに

やりたいこと

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

Node-REDのまとめ記事

• 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部分は、前回記事をご参照ください

• [Node-REDを使ってブラウザに喋った内容を各SNSに通知する] (https://qiita.com/kazutxt/items/19cd4bca52da73ffaf62)

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

ブラウザの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タグっていろいろなことができるんですねぇ

• http://www.htmq.com/video/