2017-05-20 16 views
1

私はデバイス用のアプリケーションをコーディングしています。そのようなデバイスはPOSTリクエストを受信し、multipart/x-mixed-replaceバイナリデータストリームを返信します。私はそのようなストリームを私のアプリのホームページの1つのセクションに表示する必要があります。Angular/Ionic/JSでMotion JPEGバイナリデータストリームを表示する方法は?

私は検索しましたが、そのような場合は非常に限られたリソースです。これまでのところ、Motion JPEGが特定のURLから送信された場合、iframe/imgタグを使用して表示することが可能であることがわかりました。しかし、私の場合は異なっています。私はこのようなバイナリストリームを解析して、Observableを作成して、Image JPEGタグのimg要素を変更した後、Motion JPEGバイナリストリームからフレームを取得しなければならないようです。

これを行う簡単な方法はありますか?私はhttps://gist.github.com/legege/5301477を見つけた、私はこれを使うことができますか?

+0

現在の実装ではどのような問題がありますか? – guest271314

+0

これをまだ実装していないので、私はPOST要求からの応答を扱う際に問題があります。私はバイナリデータ自体を得ることができると思う、私はJSとそれを解析する必要がありますか?データをフレームに分割し、フレームをimgタグにバインドしますか? –

+0

なぜあなたの質問に対する解決策を実装しようとしなかったのですか? https://stackoverflow.com/help/how-to-ask、https://stackoverflow.com/help/mcveを参照してください。 – guest271314

答えて

0

私は実際にこれを自分で解決し、研究で多くを学んだ。

核となるアイデアは、It's about how to transfer binary dataはmotionJPEGデータをフェッチするためにXMLHTTPリクエストを使用することです。

次に、Webワーカーを使用してバイナリデータを処理します。

最後にキャンバスを使用してイオンページに画像を描画します。

イメージローディングのフロントエンドJS遅延のため、このようなmotionJPEGプレビューは、現在私の実装では滑らかではありません。しかしこれはJSで可能です。

githubを確認してくださいhttps://github.com/makoto-unity/ThetaWifiStreaming

関連する問題