Androidにはキャストという機能があって、動画や画像を別の映像端末にミラー表示できますよね。
それと同じ機能を実装します。
古くて使わなくなったAndroidタブレットを時計表示にして常時設置しつつ、Androidスマホから動画や画像ファイル、カメラ映像をAndroidタブレットにキャスト表示させます。
キャストする側は、ブラウザで動作させますので、スマホでもいいですし、PCでもいいです。
また、制限事項としては、同じローカルネットワーク内にいる前提です。制限を解こうとすると、中間サーバを立てたりと面倒なので。
技術的には、以下の技術を使っています。
- キャスト側とキャストされる側の間はWebRTCを使って通信します。
- シグナリング処理は、WebSocketです。キャストされる側にWebSocketサーバを立ち上げています。
- キャストできるコンテンツは、キャスト側についているカメラ映像、動画ファイル、画像ファイルです。ちなみに、画像ファイルは、WebRTCでのデータチャネルを使っています。
中間サーバを立てたくなかったので、キャストされる側をWebSocketサーバにし、Cordovaアプリとして実装しています。
ソースコードもろもろは以下に置いておきました。
キャストされる側は、最初はこんな感じで起動します。
右上のwebrtcボタンを押すと、立ち上がっているWebSocketサーバの情報が表示されます。PINコードは乱数生成されるので覚えておきます。
次に、キャストする側は、ブラウザからpublic/index.htmlを開きます。
ここに、接続先とPINコードを入力してStartボタンを押下すると、WebRTCの接続が開始されます。
そうすると、キャストされる側は、以下のように表示が切り替わります。
ここで、キャストする側は、Cameraボタンを押下してPCにつながっているWebカメラを送信するか、ビデオファイルや画像ファイルを選択して送信することができます。
キャストされる側はこんな感じで、映像が流れだします。
WebRTC接続が切断されると、最初の時計表示に戻ります。
おまけとして、時計表示している最中の背景画像を設定できるようにしました。キャストする側のブラウザから背景画像のところに画像ファイルを指定してください。
参考
- WebRTCとSignalingを体験する
- AWS Kinesis Video Streamsを使ってブラウザでビデオチャット
- Google Nest Hubに、WebRTCで映像配信してみた
- AWS Kinesis Video StreamsでMMDをWebRTCで配信する
ちなみに、Cordovaは以下を参考にして改造してください。
以上