【TechBlog】WebCodecs による H.264 を再生する Video Player パーツの改善と苦労の軌跡

こんにちは。Visual M2M Data Visualizer の製品開発を担当している白金です。

以前に、「WebCodecs の VideoDecoder を使用してH.264の動画を再生してみた」の記事を紹介させていただきました。

WebCodecs の VideoDecoder を使用して H.264 の動画を再生してみた - aptpod Tech Blog

こんにちは。Visual M2M Data Visualizer Team の白金です。弊社の製品の intdash では、H.264形式の動画データを収集/計測できます。計測した動画データは、Fragmented MP4 のフォーマットを使用したライブ動画をストリーミング再生したり、計測した動画を後から確認するためにHLSのフォーマットで再生する機能があります。今回は、ライブ動画の再生機能を改善するための施策として先日 Google Chrome の Version 94 でリリースされた Web

https://tech.aptpod.co.jp/entry/2021/11/12/110000

その後、弊社が提供するVisual M2M Data Visualizer に含む標準ビジュアルパーツ「Video Player パーツ」に WebCodecs の VideoDecoder を適用した結果、複数の課題が改善できましたので、改善結果と苦労の軌跡について紹介したいと思います。

Visual M2M Data Visualizer を利用した動画ストリーミング再生に興味がある方、または WebCodecs の VideoDecoder を利用中・利用したい方のお役に立てたら嬉しいです。

WebCodecs について気になる方は、上記ブログで紹介しておりますのでご参照ください。(当ブログでは WebCodecs の説明については割愛します。)

改善した結果
Video Playerパーツとは？
改善前のVideo Playerパーツ
1. アーキテクチャー
2. 発生していた課題
改善後のVideo Playerパーツ
1. アーキテクチャー
2. 課題は解決できた？
苦労の軌跡
1. 1フレームのデコード遅延が発生する
2. パフォーマンス低下時に、動画が緑色に塗りつぶされて表示される
3. LIVE動画の再生時に、ネットワーク通信状況が不安定になるとパフォーマンスが低下する
4. 過去動画の再生時に、デコードされた動画フレームが使用するメモリで圧迫する
おわりに

続きは、弊社のテックブログからご覧ください！

WebCodecs による H.264 を再生する Video Player パーツの改善と苦労の軌跡 - aptpod Tech Blog

こんにちは。Visual M2M Data Visualizer の製品開発を担当している白金です。以前に、「 WebCodecs の VideoDecoder を使用してH.264の動画を再生してみた」の記事を紹介させていただきました。その後、弊社が提供する Visual M2M Data Visualizer に含む標準ビジュアルパーツ「Video Player パーツ」に WebCodecs の VideoDecoder を適用した結果、複数の課題が改善できましたので、改善結果と苦労の軌跡につ

https://tech.aptpod.co.jp/entry/2022/04/22/100000

株式会社アプトポッドでは一緒に働く仲間を募集しています

【TechBlog】WebCodecs による H.264 を再生する Video Player パーツの改善と苦労の軌跡

神前潤一郎

株式会社アプトポッド / コーポレート・スタッフ

JavaScript 動画フロントエンドエンジニアメディアデータ

株式会社アプトポッド

アプトポッドは、IoTプラットフォームの自社開発やIoT関連ソリューションの販売により、製造業を中心にあらゆる産業のDXに貢献する研究開発型テックベンチャーです。大量の時系列データを収集・管理するIoTプラットフォームクラウド「intdash」や、自動車が吐き出す大量データをエッジで処理する車載コンピュータ「EDGEPLANT」、収集した時系列データをリアルタイムに可視化するWebダッシュボード「Visual M2M」などの自社企画製品の開発を行いつつ、これらを組み合わせたソリューションの提供や、受託開発を行っています。当社の強みは、当社が「ファストデータ」と呼ぶ膨⼤かつ高頻度な時系列データを⾼速に伝送、収集することです。自動車、ロボット、産業機械などの様々なデバイスをコネクテッド化し、遠隔データ収集、可視化、制御といった難易度の高いサービスを実現する高度なIoTプロダクトを開発しています。【プロダクト】 ■ intdash 自動車や産業機器と、遠隔地にある可視化ツールや操作端末とをインターネットを介してつなぎ、大量かつ短周期な高頻度データをリアルタイムに、双方向に伝送するためのIoTプラットフォームです。intdashを利用することで、遠隔監視や遠隔操縦、自動運転などIoTサービス実現の要となる、超低遅延な双方向伝送を実現します。 https://www.aptpod.co.jp/products/intdash/about-intdash/ ■ Visual M2M intdashを使用してクラウドに収集した膨大なセンサーデータを、リアルタイムに可視化・解析するWebベースのダッシュボードツールです。世の中にWebダッシュボードツールは複数ありますが、当社製品のようなリアルタイム性を備えたプロダクトは、リリースから数年が経った今でも現れていません。解析用途に応じて拡張が可能で、見た目のかっこよさにもとことんこだわった先進的なデザインのインターフェースが魅力です。 https://www.aptpod.co.jp/products/data-visualization/ ■ EDGEPLANT EDGEPLANTは、産業DXで必要となる堅牢かつ高性能な自社企画ハードウェアの総合ブランドです。高度なAI処理を実現する車載規格対応のGPU搭載エッジコンピュータ「EDGEPLANT T1」や、各種制御バス、センサーネットワークに接続するためのインターフェイス機器、専用カメラシステム（予定）などで構成されています。 https://www.aptpod.co.jp 【実例】 ■本田技研工業様マーシャル諸島共和国ソーラーEV共同実験プロジェクトマーシャル諸島共和国にて立ち上がった「ソーラー電気自動車（EV車）プロジェクト」に『Visual M2M』が採用された例です。車両のバッテリー状況、位置情報等各種データを記録するための装置を搭載し、クラウドサーバーへ上がったデータの運用状況を日本でモニタリングし、不具合があった際に迅速に対応する体制をつくりました。 https://www.aptpod.co.jp/casestudy/001/ ■路線バスを活⽤したAIによる⾃動⼯事現場検知システム大阪ガス様が独自に開発した工事現場検出用のAIモデルと判定ロジックを載せた弊社の車載エッジコンピュータ「EDGEPLANT T1」とカメラで走行中の道路撮像画像から工事現場要素を検出。検出された工事現場要素は位置情報と共にintdashクラウドに伝送されることで広域での工事箇所のリアルタイム自動監視を実現しています。 https://www.aptpod.co.jp/news/news/20210531daigas その他、自動車、建機/農機/重機、ロボティクス、スマートファクトリー、ヘルスケアなど、様々な業界の案件を多数抱えております！【研究開発】 ■ 独自ストリーミングプロトコル・双方向リアルタイムストリーミング・不安定なモバイル回線でもすべてのデータを欠損なく完全回収・すべてのデータに時刻情報を付与して時系列データとして管理・P2P伝送やエッジサーバーを組み合わせた低遅延化 ■ スケーラブルデータストア・1台につき毎秒数千〜数万点を超える大量データを確実かつ高速に永続化・独自の分散保持機構により、大規模運用に耐えうるスケーラビリティを確保 ■ メディアデータプロセッシング・モバイル回線経由での低遅延動画ストリーミング・複数カメラデバイスからの映像を合成伝送し省帯域化 ■ リアルタイムインテリジェンス・機械学習による動画ストリームのリアルタイム推論・リアルタイムストリームの監視と不正検出

フォロー

神前潤一郎さんにいいねを伝えよう

神前潤一郎さんや会社があなたに興味を持つかも

【TechBlog】WebCodecs による H.264 を再生する Video Player パーツの改善と苦労の軌跡

目次

株式会社アプトポッド

同じタグの記事

今週のランキング