search

ueckoken / plarail2022

工学研究部調布祭プラレール遠隔制御用のコード群。
5 stars 1 forks source link

車体カメラ配信のためにESP-EYEでWebRTCへ映像を流す #7

Closed csenet closed 2 years ago

csenet commented 2 years ago

何がしたいか？

車体カメラの映像を配信するためにWebRTCで配信を用いて配信を行えるようにする。

何をするか？

ESP-EYEのサンプルプログラムを使うとESP内部のサーバーから映像を確認することができる。 ここでは、配信された映像をWebRTCを介して配信できるようにする。 具体的な調査ができていないのでその周りもできればお願いしたい。

csenet commented 2 years ago

カメラサーバーのサンプルコードに関して https://github.com/easytarget/esp32-cam-webserver このコードを書き込んだところ正常に動作した。

csenet commented 2 years ago

RTSPのStreamを変換してWebRTC(SkyWay)側にCastしてあげるための変換サーバーを構築する必要がある

csenet commented 2 years ago

@sys-fork こちらのタスクをお願いできませんか？ 部室の方にESP-EYEのボードが置いてあります。 内容としては、RTSPのStreamを受信してWebRTCにCastしてあげるようなサーバーを実装するという感じです。 WebRTCの通信周りは昨年のコードであるvideoCast周りが参考になりそうです。

sys-fork commented 2 years ago

わかりました．わからないところは調べたり人に聞きつつになると思います．

csenet commented 2 years ago

@ruu413 昨年度使用したSkyWayのアカウント情報わかりますでしょうか？いつものアカウントでログインしてもダメだったので。

sys-fork commented 2 years ago

SkyWay の方はまだ触っていないので私もわかりません...

sys-fork commented 2 years ago

ESP32-CAM_RTSP を ESP-EYE に書き込んで実行してみた．Wi-Fi にはつながっていることを確認したのですが，リポジトリの view.py (OpenCV で RTSP の配信を見るコード) でも VLC でも RTSP 配信を見ることはできず，原因を探しています．

csenet commented 2 years ago

@sys-fork なるほど。ESY-EYEでRTSPを実行している動画があったので参考までにどうぞ。 SourceCode: https://github.com/arkhipenko/esp32-cam-mjpeg YouTube: https://www.youtube.com/watch?v=XRcTUiXUxEM

csenet commented 2 years ago

SkyWayに関しては新しくKokenでアカウントを作成しました。アカウント名とパスワードはいつものやつです。 SkyWayのDocument: https://webrtc.ecl.ntt.com/documents/webrtc-gateway.html#how-to-use

sys-fork commented 2 years ago

@csenet esp32-cam-mjpeg を書き込んで動作させることができました．動画が少しカクつくのと，おそらくこれは RTSP では使えず，Motion JPEG (mjpeg) というもので動いていることが気になります．ESP32-CAM の標準のサンプルコードの CameraWebServer と同じ仕組みかと思います．

csenet commented 2 years ago

@sys-fork 検証ありがとうございます。なるほど、mjpegというformatで動作しているんですね。 例えばそのmjpegをJSでcaptureしてSkyWayに流すといったようなことは可能でしょうか? 映像をSkyWayに流し込む部分ですが、SkyWay Gatewayを使うという手法 or HTML+JSで実装するという方法の2つがあると思うのですが、おそらく後者の方が手軽にできそうなので少し実装を試すなどしていただけませんか？ 参考： https://qiita.com/suo-takefumi/items/2ec115841c22fa863e3f https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/captureStream おそらくmjpegをcanvasに描画してあげて、それをcaptureしてstreamとしてskywayに流すという方法が雑ではありますが一番シンプルかもしれません

sys-fork commented 2 years ago

canvas タグに描画することで stream として SkyWay に流せるという意味ですか． https://webrtc.ecl.ntt.com/documents/javascript-sdk.html#_2-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90 あとこれは別のこととして質問なのですが，SkyWay Gateway ってローカルで動いているサーバーみたいなイメージでよろしいんでしょうか...

csenet commented 2 years ago

@sys-fork canvasタグに描画されるとそれをcaptureしてstreamとしてSkyWayに流すことができるという意味であっています。 SkyWay GatewayはWebRTCでしゃべれるスペックがない機器でも、WebRTCを使えるようにするための中継をしてくれるようなサーバーという感じですかね

sys-fork commented 2 years ago

ESP-EYE に書き込むコードと，mjpeg 配信を受け取って SkyWay に流すサーバ(と言っても HTML + JS だけ)のコードはリポジトリのどこに追加すればいいですか？

csenet commented 2 years ago

@sys-fork ありがとうございます。特段用意してないので、skywayに流すコードの方は/frontend/momo_senderディレクトリの中に適当なファイル名で追加お願いします。 また、ESP-EYEに書き込むコードの方は新しくルートにhardwareというディレクトリを作成して、その中にプロジェクの配置をお願いします。 developブランチへのPRを出してreviewerに私を指定してもらえれば、ディレクトリ構成含めコードレビューします。

csenet commented 2 years ago

@sys-fork こちらでも動作しない原因を探してみようと思うので、ある程度コードがまとまったら適当なブランチにPushして教えてもらえると助かります。

sys-fork commented 2 years ago

@csenet 対応が遅くなってしまい申し訳ありません．いくつか質問があります．

csenet commented 2 years ago

@sys-fork

sys-fork commented 2 years ago

skyway-develop ブランチに push しておいたので確認をお願いします．

csenet commented 2 years ago

@sys-fork ありがとうございます。こちらの方でも確認してみます。

csenet commented 2 years ago

@sys-fork 完全に理解しました。おそらく、表示されていない原因はCORSですね。 なんか、captureStreamをするときにcanvasに描画されたsrcにCORSのヘッダがないとセキュリティ的な問題で勝手に弾かれるっぽい。(エラーすら表示されないから原因を探るのが非常にめんどくさかった) ESP-EYE側のコードを変更して、Access-Control-Allow-Originヘッダを追加してあげれば大丈夫そう。

sys-fork commented 2 years ago

@csenet ありがとうございます(おつかれさまです)．対応します．

sys-fork commented 2 years ago

/hardware/esp32-cam-mjpeg/esp32_cam_mjpeg.ino では，HTTP ヘッダに Access-Control-Allow-Origin: * と書かれているので，CORS エラーは発生しないはずなんですよね...(不可解です)

csenet commented 2 years ago

@sys-fork クライアント側でも変更が必要なようです。crossOrigin = 'anonymous';を追加したらうまくいきました。