Cordova・iOSでgetUserMediaで取得したストリーム(ライブ)映像に、例えば顔の目の部分に黒い線マスクをしたり、人間の姿だけをハイライトしたり、という加工を加え、その結果をライブで出力したいと考えています。
いくつかのプラグインから
phonegap-plugin-media-stream
phonegap-plugin-image-capture
を組み合わせることで可能だと思っていますが、その方法につまづいています。
Javascript
1navigator.mediaDevices.getUserMedia({ 2 'audio': false, 3 'video': { 4 facingMode: 'user' 5 } 6}).then(function(getmedia) { 7 var track = getmedia.getVideoTracks()[0]; 8 var imageCapture = new ImageCapture(track); 9}); 10
imageCaptureオブジェクトが取得出来ているのは、実機で確認済みです。
iOS・Safariでは、getmediaをVideoタグに送り込み、そこから1フレームずつrequestAnimationFrame()でimageを取り出し、Tensorflow・Posenet等で加工してCanvasタグで描画することで、擬似動画として難なく実装出来ていますが、Cordovaフレームワークでは、仕様上、getmediaをVideoタグに送り込むことが出来ません。
また、imageCaptureオブジェクトから、takePhoto()でblobデータは取れますが、カシャカシャ音が出て微妙です。
imageCapture.grabFrame()も、iOSはサポートされていないようです(実機検証済み)。
どなたか、Cordova・iOSで、上記getmediaかimageCaptureから、canvasにストリーム映像を送り込む方法をご存知ではないでしょうか?
または、他に使えるプラグインをご存知ではないでしょうか?
あなたの回答
tips
プレビュー