ブラウザ上の動画の美肌加工処理を実現したい

Question

実現したいこと

ブラウザ上のビデオ（video要素）の美肌、美白加工
昨今の美肌加工機能のついた、17Live、tiktok、snowのようなことをブラウザアプリで実現したい

実現方法

javascriptでビデオ要素から取得した画像をcanvasに転写し美肌、美白加工する。
加工した画像を毎フレームrequestAnimationFrameメソッドでブラウザに描画する。

質問

そこで、javascript製の画像の美肌、美白加工ライブラリはありませんか？
ボトルネックとしては、美肌、美白等々の画像加工のやりかたがわからないのです。

得策がございましたら上記の実現方法も改めます。

Answer 1

javascript製の画像の美肌、美白加工ライブラリはありませんか？

ボトルネックとしては、美肌、美白等々の画像加工のやりかたがわからないのです

Google検索（キーワード：画像処理 美肌 ライブラリ）すると、qiita Canvasでデカ目・小顔・美白 が見つかります。

案内されるデモページの「HTMLソース」から、MITライセンスの画像処理用JSを駆使して実現していることが確認できます（この手法を流用する場合、各ライブラリのソースを追いかけるしかないと思います）。

ただし、デモページの注意書き「※小さな画像で試してください」の意味は考慮が必要です。

javascriptでビデオ要素から取得した画像をcanvasに転写し美肌、美白加工する。

加工した画像を毎フレームrequestAnimationFrameメソッドでブラウザに描画する。

1. Video のデータをデコードして全フレームの画像を切り出す
2. 切り出した Canvas で画像処理を行う（処理目的は美肌効果）
3. 処理後の画像をアニメーション表示

JavaScript は処理速度において、ネイティブアプリやJavaのような中間コードから実行するアプリには敵いません。
ブラウザ上ですと、上記手順、1. 2. の処理に要する時間も気になります（試してないのでなんとも言えませんが）。

得策

モダンな環境が整ったご時世ですが、フリーズを誘発するかもしれません。
WebWorker を利用することを検討すべきと思います。

追記）
OpenCV のタグを見落としていました。

• Google検索 OpenCV javascript も調査の対象となると思います。

Comments

[ko-xyz]

ご回答ありがとうございます。
教えて頂いた記事も試してみましたが、少し弊社のイメージと違っていました。

ご指南頂いた、パフォーマンスの件で、jsでの実装をあきらめ、ネイティブアプリでの実装を検討中です。

ただ、美肌加工のロジック、仕組みが不明なため、解決には至っていません。
できればライブラリに頼りたいところです。プログラム言語問わずオープンソース化された情報など無いものでしょうか。

個人的な技量では、単純に明るさ、コントラストを調整したものを毎フレーム、canvasに転写しストリームに流すところが限界で、昨今のライブ配信アプリのようなクオリティーとまではいきません。

難しい課題だと承知していますが、何卒お力添え頂ければと思います。

[AkitoshiManabe]

> プログラム言語問わずオープンソース化された情報
結論から言うと、お力にはなれません。検索キーワードに github や 開発言語名などを加えるなど、探し方を工夫するしかないと思います。ただ、回答内の検索結果にもソリューションとして有償提供する記号もある機能ですので、（他社との差別化を図るため）公開 されているとは考えづらいように思いました。
処理としてはフレーム内の顔面認識、範囲抽出、色調補正など、明るさ、コントラスト以外の処理も必要に感じます（そのための OpenCVなのかなとも）。