WROOM(ESP8266)でServer-Sent Events を使って、iOSのSafariにリアルタイムストリーミングメーター表示できました。

記事公開日:2015年8月9日
最終修正日:2018年9月26日

なんと、で、できちゃいました。
ESP-WROOM-02(ESP8266)とArduinoUNOでiOSのSafariやAndroidのChromeなどのスマホブラウザにリアルタイムストリーミング表示させられました。ブラウザのJavaScriptのServer-Sent Eventsを使ってます。WROOMへはATコマンドで通信してます。スマホのアプリなどは一切使用してません。スマホ側はブラウザだけです。ArduinoのC言語にHTML JavaScriptを記述しているだけです。
Wroom_SSE_01

スポンサーリンク


いやぁ~~、あきらめずに続けて取り組んでいるとできるもんですねぇ・・・。
動画はこちらですのでご覧ください。
(著作権法上、音声無しとしました)

これはテキストだけを使った簡易オーディオレベルメーターです。
音声無しで分からないかもしれませんが、リアルタイムに音声に結構追従してくれます。
まるで、有線のEthernetShieldを使っているような感じの速さです。
WROOM(ESP8266)は2.4GHzWi-Fiで、ATコマンド通信はUART(シリアル)115200bpsです。
画像の右端に見えているのは、テレビ音声を直流に変換する回路です。
以前の記事の回路にプラスしてオペアンプでテレビ音声信号を昇圧してます。
いずれこの回路をアップしたいと思ってはいます。
このブラウザのJavaScriptのServer-Sent Eventsは、すべてArduino側でC言語と一緒にプログラムを組んでいますので、iOSやAndroidのアプリを使う必要は全く無いのがスゴイところです。
つまり、OSに左右されずに、ブラウザがあれば動作するのです。
ただ、基本的にはServer側からの一方通行的なストリーミング送信ということが注意するところです。
(ストップボタンはちゃんと機能しました。)
因みに、Server-Sent Events はInternet Exploreでは動きません。
Androidは4.4以上のGoogle Chrome
iOS 8.4 Safari
は動作確認済みです。
有線Ethernet Shieldを使ったServer-Sent Eventsの情報は以下に掲載しておりますのでご参照ください。
ArduinoからiOSやAndroidブラウザへリアルタイムデータ通信(Server-Sent Events使用)ができました。
Arduinoの電圧をiOSやAndroidブラウザにグラフィック表示(Server-Sent Events,Canvas使用)
つづき、メーターをスクロールしてみました(ServerSentEvents使用from Arduino)
Canvas で残像効果を出して、アナログメーターっぽい表示(ArduinoからAndroidへServer-Sent Events使用)
ArduinoUNOでは無理ですが、MEGAならばこれだけカラフルなメーターが作成できて、結構リアルタイムで表示できます。
今回のWROOMを使ったものでも、MEGAやM0ならば、もっと凝ったメーターやグラフができそうです。
スピードはUART(シリアル)の速度範囲内ということになります。
グラフィックはスマートフォンのブラウザに任せるので、Arduinoの負担にはならないのが利点です。
今回の大きなポイントはIPアドレス入力で
ポート番号を使わない!!
ということでした。
これにたどり着くまでに、エライ時間と労力を使いました。
つまり、「使わない」というのは正確ではなく、ポート番号を80番とすれば、ブラウザのアドレス欄にポート番号を入力しなくて良いのです。
なぜ、これでしか動かないのかは解りません。
もし、解る方がいらっしゃったら教えていただきたいです。
ところで、WROOM(ESP8266)に直接にArduinoプログラムを書き込む情報もネットにあるのですが、それをやると大きなブログラムは使えなくなるので、私はWROOMはあくまでWi-Fi通信用モジュールとして使うことにこだわって、メインプログラムはArduinoで実行させたいと思っていました。
技適認証済みWi-FiモジュールのWROOMでServer-Sent EventsがEthernetShield並みにできたことで、殆どのやりたいことができそうです。
あとは、SPI通信ができれば、文句なしです。
今回のソースプログラムはまだアップできるところまでまとまってません。
近々アップしたいと思いますので、しばらくお待ちください。
(→別のタイプのソースプログラムスケッチをアップしましたので以下のリンクをご覧ください)
Wi-Fiリアルタイムストリーミング電圧計を作りました(ブラウザのServer-Sent Events使用)
それでは、また・・・。
この記事以降、WROOMについてかなり進展しました。
しかも、スマートフォンとWi-Fiリアルタイムストリーミング通信が双方向でできるようになりました!!

以下のリンクをご覧ください。
●双方向ストリーミング通信WebSocket でスマホから Arduino化 WROOM のLEDを調光してみる
●Arduino化 WROOM で WebSocket データ送受信方法
●Arduino化 WROOM で WebSocket ハンドシェイク 確立方法
●スイッチサイエンスさんESPr Developer ( ESP-WROOM-02 開発ボード )の使い方をザッと紹介
スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )
Amazon.co.jp 当ブログのおすすめ

(関連記事)
Wi-Fi LEDスイッチがようやくできました。(ESP-WROOM-02とArduinoとAndroidブラウザ使用)
ESP-WROOM-02(ESP8266) とArduino UNO のシリアル(UART)通信で注意すること
ESP-WROOM-02(ESP8266)でブラウザにHello World を表示させてみました。(Arduino Android Wi-Fi接続)
ESP-WROOM-02(ESP8266)とArduinoでWi-Fi通信がやっとできました

[ホーム(home)]

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていて、介護にドップリ浸かりそうな年配者です。 少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください