# IVS Broadcast SDK で背景の置換を使用する
背景の置換は、ライブストリームのクリエイターが背景を変更できるようにするカメラフィルターの一種です。次の図に示すように、背景の置換には以下が必要です。
1. ライブカメラフィードからカメラ画像を取得します。
1. Google ML Kit を使用して前景コンポーネントと背景コンポーネントに分割します。
1. 生成された分割マスクをカスタムの背景画像と組み合わせます。
1. それをカスタム画像ソースに渡してブロードキャストします。
## Web
このセクションは、読者が既に [Web Broadcast SDK を使用した動画の公開とサブスクリプション](https://docs.aws.amazon.com//ivs/latest/RealTimeUserGuide/getting-started-pub-sub-web.html)に慣れていることを前提としています。
ライブストリームの背景をカスタム画像に置き換えるには、[MediaPipe Image Segmenter](https://developers.google.com/mediapipe/solutions/vision/image_segmenter) で [selfie segmentation model](https://developers.google.com/mediapipe/solutions/vision/image_segmenter#selfie-model) を使用します。これは動画フレーム内のどのピクセルが前景か背景かを識別する機械学習モデルです。その後、ビデオフィードの前景ピクセルを新しい背景を表すカスタム画像にコピーすることで、モデルの結果を使用してライブストリームの背景を置き換えることができます。
背景の置換を IVS Real-Time Streaming Web Broadcast SDK と統合するには、以下が必要です。
1. MediaPipe と Webpack をインストールします。(この例では Webpack をバンドラーとして使用していますが、任意のバンドラーを使用できます)
1. `index.html` を作成します。
1. メディア要素を追加します。
1. スクリプトタグを追加します。
1. `app.js` を作成します。
1. カスタム背景画像を読み込みます。
1. `ImageSegmenter` のインスタンスを作成します。
1. ビデオフィードをキャンバスにレンダリングします。
1. 背景置換ロジックを作成します。
1. Webpack 設定ファイルを作成します。
1. JavaScript ファイルをバンドルします。
### MediaPipe と Webpack をインストールする
まず、`@mediapipe/tasks-vision` と `webpack` npm パッケージをインストールします。以下の例では、Webpack を JavaScript バンドラーとして使用しています。必要に応じて別のバンドラーを使用できます。
#### JavaScript
```
npm i @mediapipe/tasks-vision webpack webpack-cli
```
また、次のように、ビルドスクリプトとして `webpack` を指定するように `package.json` も必ず更新します。
#### JavaScript
```
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
```
### index.html を作成する
次に、HTML 共通スクリプトを作成し、Web Broadcast SDK をスクリプトタグとしてインポートします。次のコードでは、`` を、使用している Broadcast SDK のバージョンに必ず置き換えてください。
#### JavaScript
```
```
### メディア要素を追加する
次に、ボディタグ内にビデオ要素と 2 つのキャンバス要素を追加します。ビデオ要素にはライブカメラフィードが含まれ、MediaPipe Image Segmenter への入力として使用されます。最初のキャンバス要素は、ブロードキャストされるフィードのプレビューをレンダリングするために使用されます。2 番目のキャンバス要素は、背景として使用されるカスタム画像のレンダリングに使用されます。カスタム画像を含む 2 番目のキャンバスは、そこから最終的なキャンバスにピクセルをプログラムでコピーするためのソースとしてのみ使用されるため、表示されなくなります。
#### JavaScript
```
```
### スクリプトタグを追加する
スクリプトタグを追加して、背景の置換を行うコードを含むバンドルされた JavaScript ファイルをロードし、ステージに公開します。
```
```
### app.js の作成
次に、JavaScript ファイルを作成して、HTML ページに作成されたキャンバス要素とビデオ要素の要素オブジェクトを取得します。`ImageSegmenter` モジュールと `FilesetResolver` モジュールをインポートします。`ImageSegmenter` モジュールは分割タスクの実行に使用されます。
#### JavaScript
```
const canvasElement = document.getElementById("canvas");
const background = document.getElementById("background");
const canvasCtx = canvasElement.getContext("2d");
const backgroundCtx = background.getContext("2d");
const video = document.getElementById("webcam");
import { ImageSegmenter, FilesetResolver } from "@mediapipe/tasks-vision";
```
次に、ユーザーのカメラから MediaStream を取得する `init()` という関数を作成し、カメラフレームの読み込みが完了するたびにコールバック関数を呼び出します。ステージに参加したりステージから退出したりするボタンのイベントリスナーを追加します。
ステージに参加するときは、`segmentationStream` という名前の変数を渡すことに注意してください。これはキャンバス要素からキャプチャされたビデオストリームで、背景を表すカスタム画像に前景画像が重なっています。その後、このカスタムストリームを使用して `LocalStageStream` のインスタンスを作成し、ステージに公開できます。
#### JavaScript
```
const init = async () => {
await initializeDeviceSelect();
cameraButton.addEventListener("click", () => {
const isMuted = !cameraStageStream.isMuted;
cameraStageStream.setMuted(isMuted);
cameraButton.innerText = isMuted ? "Show Camera" : "Hide Camera";
});
micButton.addEventListener("click", () => {
const isMuted = !micStageStream.isMuted;
micStageStream.setMuted(isMuted);
micButton.innerText = isMuted ? "Unmute Mic" : "Mute Mic";
});
localCamera = await getCamera(videoDevicesList.value);
const segmentationStream = canvasElement.captureStream();
joinButton.addEventListener("click", () => {
joinStage(segmentationStream);
});
leaveButton.addEventListener("click", () => {
leaveStage();
});
};
```
### カスタム背景画像を読み込む
`init` 関数の下部に、`initBackgroundCanvas` という名前の関数を呼び出すコードを追加します。これにより、ローカルファイルからカスタム画像が読み込まれ、キャンバスにレンダリングされます。この関数は次のステップで定義します。ユーザーのカメラから取得した `MediaStream` をビデオオブジェクトに割り当てます。その後、このビデオオブジェクトは Image Segmenter に渡されます。また、`renderVideoToCanvas` という名前の関数をビデオフレームの読み込みが完了するたびに呼び出されるコールバック関数として設定します。この関数は後のステップで定義します。
#### JavaScript
```
initBackgroundCanvas();
video.srcObject = localCamera;
video.addEventListener("loadeddata", renderVideoToCanvas);
```
ローカルファイルから画像を読み込む `initBackgroundCanvas` 関数を実装しましょう。この例では、カスタム背景としてビーチの画像を使用します。カスタム画像を含むキャンバスは、カメラフィードを含むキャンバス要素の前景ピクセルとマージされるため、表示されなくなります。
#### JavaScript
```
const initBackgroundCanvas = () => {
let img = new Image();
img.src = "beach.jpg";
img.onload = () => {
backgroundCtx.clearRect(0, 0, canvas.width, canvas.height);
backgroundCtx.drawImage(img, 0, 0);
};
};
```
### ImageSegmenter のインスタンスを作成する
次に、`ImageSegmenter` のインスタンスを作成します。これにより、画像が分割され、その結果がマスクとして返されます。`ImageSegmenter` のインスタンスを作成するときは、[selfie segmentation model](https://developers.google.com/mediapipe/solutions/vision/image_segmenter#selfie-model) を使用します。
#### JavaScript
```
const createImageSegmenter = async () => {
const audio = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2/wasm");
imageSegmenter = await ImageSegmenter.createFromOptions(audio, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter/float16/latest/selfie_segmenter.tflite",
delegate: "GPU",
},
runningMode: "VIDEO",
outputCategoryMask: true,
});
};
```
### ビデオフィードをキャンバスにレンダリングする
次に、ビデオフィードを他のキャンバス要素にレンダリングする関数を作成します。ビデオフィードをキャンバスにレンダリングする必要があります。そうすると、Canvas 2D API を使用してそこから前景ピクセルを抽出できるようになります。また、その際、[segmentForVideo](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.imagesegmenter#imagesegmentersegmentforvideo) メソッドを使用してビデオフレームを `ImageSegmenter` のインスタンスに渡し、ビデオフレーム内の前景と背景を分割します。[segmentForVideo](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.imagesegmenter#imagesegmentersegmentforvideo) メソッドが戻ると、背景の置換を行うためのカスタムコールバック関数である `replaceBackground` が呼び出されます。
#### JavaScript
```
const renderVideoToCanvas = async () => {
if (video.currentTime === lastWebcamTime) {
window.requestAnimationFrame(renderVideoToCanvas);
return;
}
lastWebcamTime = video.currentTime;
canvasCtx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
if (imageSegmenter === undefined) {
return;
}
let startTimeMs = performance.now();
imageSegmenter.segmentForVideo(video, startTimeMs, replaceBackground);
};
```
### 背景の置換ロジックを作成する
カスタム背景画像をカメラフィードの前景と結合して背景を置き換える `replaceBackground` 関数を作成します。この関数はまず、先に作成した 2 つのキャンバス要素から、カスタム背景画像とビデオフィードの基盤ピクセルデータを取得します。次に、`ImageSegmenter` から提供されたマスクを繰り返し適用します。これにより、どのピクセルが前景にあるかがわかります。マスクを繰り返し適用しながら、ユーザーのカメラフィードを含むピクセルを、対応する背景ピクセルデータに選択的にコピーします。これが完了すると、前景がコピーされた最終的なピクセルデータを背景に変換し、キャンバスに描画します。
#### JavaScript
```
function replaceBackground(result) {
let imageData = canvasCtx.getImageData(0, 0, video.videoWidth, video.videoHeight).data;
let backgroundData = backgroundCtx.getImageData(0, 0, video.videoWidth, video.videoHeight).data;
const mask = result.categoryMask.getAsFloat32Array();
let j = 0;
for (let i = 0; i < mask.length; ++i) {
const maskVal = Math.round(mask[i] * 255.0);
j += 4;
// Only copy pixels on to the background image if the mask indicates they are in the foreground
if (maskVal < 255) {
backgroundData[j] = imageData[j];
backgroundData[j + 1] = imageData[j + 1];
backgroundData[j + 2] = imageData[j + 2];
backgroundData[j + 3] = imageData[j + 3];
}
}
// Convert the pixel data to a format suitable to be drawn to a canvas
const uint8Array = new Uint8ClampedArray(backgroundData.buffer);
const dataNew = new ImageData(uint8Array, video.videoWidth, video.videoHeight);
canvasCtx.putImageData(dataNew, 0, 0);
window.requestAnimationFrame(renderVideoToCanvas);
}
```
参考までに、上記のすべてのロジックを含む完全な `app.js` ファイルを次に示します。
#### JavaScript
```
/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */
// All helpers are expose on 'media-devices.js' and 'dom.js'
const { setupParticipant } = window;
const { Stage, LocalStageStream, SubscribeType, StageEvents, ConnectionState, StreamType } = IVSBroadcastClient;
const canvasElement = document.getElementById("canvas");
const background = document.getElementById("background");
const canvasCtx = canvasElement.getContext("2d");
const backgroundCtx = background.getContext("2d");
const video = document.getElementById("webcam");
import { ImageSegmenter, FilesetResolver } from "@mediapipe/tasks-vision";
let cameraButton = document.getElementById("camera-control");
let micButton = document.getElementById("mic-control");
let joinButton = document.getElementById("join-button");
let leaveButton = document.getElementById("leave-button");
let controls = document.getElementById("local-controls");
let audioDevicesList = document.getElementById("audio-devices");
let videoDevicesList = document.getElementById("video-devices");
// Stage management
let stage;
let joining = false;
let connected = false;
let localCamera;
let localMic;
let cameraStageStream;
let micStageStream;
let imageSegmenter;
let lastWebcamTime = -1;
const init = async () => {
await initializeDeviceSelect();
cameraButton.addEventListener("click", () => {
const isMuted = !cameraStageStream.isMuted;
cameraStageStream.setMuted(isMuted);
cameraButton.innerText = isMuted ? "Show Camera" : "Hide Camera";
});
micButton.addEventListener("click", () => {
const isMuted = !micStageStream.isMuted;
micStageStream.setMuted(isMuted);
micButton.innerText = isMuted ? "Unmute Mic" : "Mute Mic";
});
localCamera = await getCamera(videoDevicesList.value);
const segmentationStream = canvasElement.captureStream();
joinButton.addEventListener("click", () => {
joinStage(segmentationStream);
});
leaveButton.addEventListener("click", () => {
leaveStage();
});
initBackgroundCanvas();
video.srcObject = localCamera;
video.addEventListener("loadeddata", renderVideoToCanvas);
};
const joinStage = async (segmentationStream) => {
if (connected || joining) {
return;
}
joining = true;
const token = document.getElementById("token").value;
if (!token) {
window.alert("Please enter a participant token");
joining = false;
return;
}
// Retrieve the User Media currently set on the page
localMic = await getMic(audioDevicesList.value);
cameraStageStream = new LocalStageStream(segmentationStream.getVideoTracks()[0]);
micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]);
const strategy = {
stageStreamsToPublish() {
return [cameraStageStream, micStageStream];
},
shouldPublishParticipant() {
return true;
},
shouldSubscribeToParticipant() {
return SubscribeType.AUDIO_VIDEO;
},
};
stage = new Stage(token, strategy);
// Other available events:
// https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-guides/stages#events
stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => {
connected = state === ConnectionState.CONNECTED;
if (connected) {
joining = false;
controls.classList.remove("hidden");
} else {
controls.classList.add("hidden");
}
});
stage.on(StageEvents.STAGE_PARTICIPANT_JOINED, (participant) => {
console.log("Participant Joined:", participant);
});
stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => {
console.log("Participant Media Added: ", participant, streams);
let streamsToDisplay = streams;
if (participant.isLocal) {
// Ensure to exclude local audio streams, otherwise echo will occur
streamsToDisplay = streams.filter((stream) => stream.streamType === StreamType.VIDEO);
}
const videoEl = setupParticipant(participant);
streamsToDisplay.forEach((stream) => videoEl.srcObject.addTrack(stream.mediaStreamTrack));
});
stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => {
console.log("Participant Left: ", participant);
teardownParticipant(participant);
});
try {
await stage.join();
} catch (err) {
joining = false;
connected = false;
console.error(err.message);
}
};
const leaveStage = async () => {
stage.leave();
joining = false;
connected = false;
cameraButton.innerText = "Hide Camera";
micButton.innerText = "Mute Mic";
controls.classList.add("hidden");
};
function replaceBackground(result) {
let imageData = canvasCtx.getImageData(0, 0, video.videoWidth, video.videoHeight).data;
let backgroundData = backgroundCtx.getImageData(0, 0, video.videoWidth, video.videoHeight).data;
const mask = result.categoryMask.getAsFloat32Array();
let j = 0;
for (let i = 0; i < mask.length; ++i) {
const maskVal = Math.round(mask[i] * 255.0);
j += 4;
if (maskVal < 255) {
backgroundData[j] = imageData[j];
backgroundData[j + 1] = imageData[j + 1];
backgroundData[j + 2] = imageData[j + 2];
backgroundData[j + 3] = imageData[j + 3];
}
}
const uint8Array = new Uint8ClampedArray(backgroundData.buffer);
const dataNew = new ImageData(uint8Array, video.videoWidth, video.videoHeight);
canvasCtx.putImageData(dataNew, 0, 0);
window.requestAnimationFrame(renderVideoToCanvas);
}
const createImageSegmenter = async () => {
const audio = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2/wasm");
imageSegmenter = await ImageSegmenter.createFromOptions(audio, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter/float16/latest/selfie_segmenter.tflite",
delegate: "GPU",
},
runningMode: "VIDEO",
outputCategoryMask: true,
});
};
const renderVideoToCanvas = async () => {
if (video.currentTime === lastWebcamTime) {
window.requestAnimationFrame(renderVideoToCanvas);
return;
}
lastWebcamTime = video.currentTime;
canvasCtx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
if (imageSegmenter === undefined) {
return;
}
let startTimeMs = performance.now();
imageSegmenter.segmentForVideo(video, startTimeMs, replaceBackground);
};
const initBackgroundCanvas = () => {
let img = new Image();
img.src = "beach.jpg";
img.onload = () => {
backgroundCtx.clearRect(0, 0, canvas.width, canvas.height);
backgroundCtx.drawImage(img, 0, 0);
};
};
createImageSegmenter();
init();
```
### Webpack 設定ファイルを作成する
次の設定を Webpack 設定ファイルに追加して `app.js` をバンドルすると、インポート呼び出しが動作するようになります。
#### JavaScript
```
const path = require("path");
module.exports = {
entry: ["./app.js"],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
```
### JavaScript ファイルをバンドルする
```
npm run build
```
`index.html` を含むディレクトリから単純な HTTP サーバーを起動し、`localhost:8000` を開いて結果を確認します。
```
python3 -m http.server -d ./
```
## Android
ライブストリームの背景を置換するには、[Google ML Kit](https://developers.google.com/ml-kit/vision/selfie-segmentation) の selfie segmentation API を使用できます。selfie segmentation API はカメラ画像を入力として受け入れ、画像の各ピクセルの信頼度スコアを示すマスクを返します。これにより、画像のピクセルが前景にあったか背景にあったかがわかります。信頼度スコアに基づいて、背景画像または前景画像から対応するピクセルの色を取得できます。この処理は、マスク内のすべての信頼度スコアが検証されるまで続きます。その結果、背景画像のピクセルと前景のピクセルを組み合わせた新しいピクセルの色の配列が生成されます。
背景の置換を IVS Real-Time Streaming Android Broadcast SDK と統合するには、以下が必要です。
1. CameraX ライブラリと Google ML Kit をインストールします。
1. 共通スクリプト変数を初期化します。
1. カスタム画像ソースを作成します。
1. カメラフレームを管理します。
1. カメラフレームを Google ML Kit に渡します。
1. カメラフレームの前景をカスタム背景に重ねます。
1. 新しい画像をカスタム画像ソースにフィードします。
### CameraX ライブラリと Google ML Kit をインストールする
ライブカメラフィードから画像を抽出するには、Android の CameraX ライブラリを使用します。CameraX ライブラリと Google ML Kit をインストールするには、モジュールの `build.gradle` ファイルに以下を追加します。`${camerax_version}` と `${google_ml_kit_version}` をそれぞれ [CameraX](https://developer.android.com/jetpack/androidx/releases/camera) ライブラリと [Google ML Kit](https://developers.google.com/ml-kit/vision/selfie-segmentation/android) ライブラリの最新バージョンに置き換えます。
#### Java
```
implementation "com.google.mlkit:segmentation-selfie:${google_ml_kit_version}"
implementation "androidx.camera:camera-core:${camerax_version}"
implementation "androidx.camera:camera-lifecycle:${camerax_version}"
```
以下のライブラリをインポートします。
#### Java
```
import androidx.camera.core.CameraSelector
import androidx.camera.core.ImageAnalysis
import androidx.camera.core.ImageProxy
import androidx.camera.lifecycle.ProcessCameraProvider
import com.google.mlkit.vision.segmentation.selfie.SelfieSegmenterOptions
```
### 共通スクリプト変数を初期化する
`ImageAnalysis` のインスタンスと `ExecutorService` のインスタンスを初期化します。
#### Java
```
private lateinit var binding: ActivityMainBinding
private lateinit var cameraExecutor: ExecutorService
private var analysisUseCase: ImageAnalysis? = null
```
Segmenter インスタンスを [STREAM\_MODE](https://developers.google.com/ml-kit/vision/selfie-segmentation/android#detector_mode) に初期化します。
#### Java
```
private val options =
SelfieSegmenterOptions.Builder()
.setDetectorMode(SelfieSegmenterOptions.STREAM_MODE)
.build()
private val segmenter = Segmentation.getClient(options)
```
### カスタム画像ソースを作成する
アクティビティの `onCreate` メソッドで、`DeviceDiscovery` オブジェクトのインスタンスを作成し、カスタム画像ソースを作成します。カスタム画像ソースから提供された `Surface` が、カスタム背景画像に前景が重なった最終イメージを受け取ります。次に、カスタム画像ソースを使用して `ImageLocalStageStream` のインスタンスを作成します。その後、`ImageLocalStageStream` のインスタンス (この例では名前は `filterStream`) をステージに公開できます。ステージの設定方法については、「[IVS Broadcast SDK: Android ガイド](broadcast-android.md)」を参照してください。最後に、カメラの管理に使用するスレッドも作成します。
#### Java
```
var deviceDiscovery = DeviceDiscovery(applicationContext)
var customSource = deviceDiscovery.createImageInputSource( BroadcastConfiguration.Vec2(
720F, 1280F
))
var surface: Surface = customSource.inputSurface
var filterStream = ImageLocalStageStream(customSource)
cameraExecutor = Executors.newSingleThreadExecutor()
```
### カメラフレームを管理する
次に、カメラを初期化する関数を作成します。この関数は CameraX ライブラリを使用して、ライブカメラフィードから画像を抽出します。まず、`cameraProviderFuture` という `ProcessCameraProvider` のインスタンスを作成します。このオブジェクトは、カメラプロバイダーを取得した将来の結果を表します。次に、プロジェクトから画像をビットマップとして読み込みます。この例では、ビーチの画像を背景として使用していますが、どのような画像でもかまいません。
次に、`cameraProviderFuture` にリスナーを追加します。このリスナーには、カメラが使用可能になったとき、またはカメラプロバイダーの取得中にエラーが発生した場合に通知されます。
#### Java
```
private fun startCamera(surface: Surface) {
val cameraProviderFuture = ProcessCameraProvider.getInstance(this)
val imageResource = R.drawable.beach
val bgBitmap: Bitmap = BitmapFactory.decodeResource(resources, imageResource)
var resultBitmap: Bitmap;
cameraProviderFuture.addListener({
val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()
if (mediaImage != null) {
val inputImage =
InputImage.fromMediaImage(mediaImage, imageProxy.imageInfo.rotationDegrees)
resultBitmap = overlayForeground(mask, maskWidth, maskHeight, inputBitmap, backgroundPixels)
canvas = surface.lockCanvas(null);
canvas.drawBitmap(resultBitmap, 0f, 0f, null)
surface.unlockCanvasAndPost(canvas);
}
.addOnFailureListener { exception ->
Log.d("App", exception.message!!)
}
.addOnCompleteListener {
imageProxy.close()
}
}
};
val cameraSelector = CameraSelector.DEFAULT_FRONT_CAMERA
try {
// Unbind use cases before rebinding
cameraProvider.unbindAll()
// Bind use cases to camera
cameraProvider.bindToLifecycle(this, cameraSelector, analysisUseCase)
} catch(exc: Exception) {
Log.e(TAG, "Use case binding failed", exc)
}
}, ContextCompat.getMainExecutor(this))
}
```
リスナー内で、ライブカメラフィードから個々のフレームにアクセスするように `ImageAnalysis.Builder` を作成します。バックプレッシャーストラテジーを `STRATEGY_KEEP_ONLY_LATEST` に設定します。これにより、一度に 1 つのカメラフレームだけが処理に送られることが保証されます。個々のカメラフレームをビットマップに変換すると、そのピクセルを抽出して後でカスタム背景画像と組み合わせることができます。
#### Java
```
val imageAnalyzer = ImageAnalysis.Builder()
analysisUseCase = imageAnalyzer
.setTargetResolution(Size(360, 640))
.setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
.build()
analysisUseCase?.setAnalyzer(cameraExecutor) { imageProxy: ImageProxy ->
val mediaImage = imageProxy.image
val tempBitmap = imageProxy.toBitmap();
val inputBitmap = tempBitmap.rotate(imageProxy.imageInfo.rotationDegrees.toFloat())
```
### カメラフレームを Google ML Kit に渡す
次に、`InputImage` を作成して Segmenter のインスタンスに渡して処理します。`InputImage` は、`ImageAnalysis` のインスタンスから提供された `ImageProxy` から作成できます。Segmenter に `InputImage` が提供されると、ピクセルが前景または背景にある可能性を示す信頼度スコア付きのマスクが返されます。このマスクには幅と高さのプロパティもあります。これを使用して、前に読み込んだカスタム背景画像の背景ピクセルを含む新しい配列を作成します。
#### Java
```
if (mediaImage != null) {
val inputImage =
InputImage.fromMediaImag
segmenter.process(inputImage)
.addOnSuccessListener { segmentationMask ->
val mask = segmentationMask.buffer
val maskWidth = segmentationMask.width
val maskHeight = segmentationMask.height
val backgroundPixels = IntArray(maskWidth * maskHeight)
bgBitmap.getPixels(backgroundPixels, 0, maskWidth, 0, 0, maskWidth, maskHeight)
```
### カメラフレームの前景をカスタム背景に重ねる
信頼度スコアを含むマスク、ビットマップとしてのカメラフレーム、カスタム背景画像のカラーピクセルがあれば、前景をカスタム背景に重ねるのに必要なものがすべて揃っています。次に、`overlayForeground` 関数が以下のパラメータで呼び出されます。
#### Java
```
resultBitmap = overlayForeground(mask, maskWidth, maskHeight, inputBitmap, backgroundPixels)
```
この関数はマスクを繰り返し適用し、信頼度の値をチェックして、対応するピクセルの色を背景画像から取得するのか、カメラフレームから取得するのかを決定します。マスク内のピクセルが背景にある可能性が高いことを信頼度の値が示している場合、対応するピクセルの色を背景画像から取得します。それ以外の場合は、カメラフレームから対応するピクセルの色を取得して前景を構築します。関数がマスクの反復適用を終了すると、新しいカラーピクセルの配列を使用して新しいビットマップが作成され、返されます。この新しいビットマップには、カスタム背景に重なった前景が含まれています。
#### Java
```
private fun overlayForeground(
byteBuffer: ByteBuffer,
maskWidth: Int,
maskHeight: Int,
cameraBitmap: Bitmap,
backgroundPixels: IntArray
): Bitmap {
@ColorInt val colors = IntArray(maskWidth * maskHeight)
val cameraPixels = IntArray(maskWidth * maskHeight)
cameraBitmap.getPixels(cameraPixels, 0, maskWidth, 0, 0, maskWidth, maskHeight)
for (i in 0 until maskWidth * maskHeight) {
val backgroundLikelihood: Float = 1 - byteBuffer.getFloat()
// Apply the virtual background to the color if it's not part of the foreground
if (backgroundLikelihood > 0.9) {
// Get the corresponding pixel color from the background image
// Set the color in the mask based on the background image pixel color
colors[i] = backgroundPixels.get(i)
} else {
// Get the corresponding pixel color from the camera frame
// Set the color in the mask based on the camera image pixel color
colors[i] = cameraPixels.get(i)
}
}
return Bitmap.createBitmap(
colors, maskWidth, maskHeight, Bitmap.Config.ARGB_8888
)
}
```
### 新しい画像をカスタム画像ソースにフィードする
その後、カスタム画像ソースから提供された `Surface` に新しいビットマップを書き込むことができます。これでステージにブロードキャストされます。
#### Java
```
resultBitmap = overlayForeground(mask, inputBitmap, mutableBitmap, bgBitmap)
canvas = surface.lockCanvas(null);
canvas.drawBitmap(resultBitmap, 0f, 0f, null)
```
カメラフレームを取得して Segmenter に渡し、背景に重ねる関数をすべて次に示します。
#### Java
```
@androidx.annotation.OptIn(androidx.camera.core.ExperimentalGetImage::class)
private fun startCamera(surface: Surface) {
val cameraProviderFuture = ProcessCameraProvider.getInstance(this)
val imageResource = R.drawable.clouds
val bgBitmap: Bitmap = BitmapFactory.decodeResource(resources, imageResource)
var resultBitmap: Bitmap;
cameraProviderFuture.addListener({
// Used to bind the lifecycle of cameras to the lifecycle owner
val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()
val imageAnalyzer = ImageAnalysis.Builder()
analysisUseCase = imageAnalyzer
.setTargetResolution(Size(720, 1280))
.setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
.build()
analysisUseCase!!.setAnalyzer(cameraExecutor) { imageProxy: ImageProxy ->
val mediaImage = imageProxy.image
val tempBitmap = imageProxy.toBitmap();
val inputBitmap = tempBitmap.rotate(imageProxy.imageInfo.rotationDegrees.toFloat())
if (mediaImage != null) {
val inputImage =
InputImage.fromMediaImage(mediaImage, imageProxy.imageInfo.rotationDegrees)
segmenter.process(inputImage)
.addOnSuccessListener { segmentationMask ->
val mask = segmentationMask.buffer
val maskWidth = segmentationMask.width
val maskHeight = segmentationMask.height
val backgroundPixels = IntArray(maskWidth * maskHeight)
bgBitmap.getPixels(backgroundPixels, 0, maskWidth, 0, 0, maskWidth, maskHeight)
resultBitmap = overlayForeground(mask, maskWidth, maskHeight, inputBitmap, backgroundPixels)
canvas = surface.lockCanvas(null);
canvas.drawBitmap(resultBitmap, 0f, 0f, null)
surface.unlockCanvasAndPost(canvas);
}
.addOnFailureListener { exception ->
Log.d("App", exception.message!!)
}
.addOnCompleteListener {
imageProxy.close()
}
}
};
val cameraSelector = CameraSelector.DEFAULT_FRONT_CAMERA
try {
// Unbind use cases before rebinding
cameraProvider.unbindAll()
// Bind use cases to camera
cameraProvider.bindToLifecycle(this, cameraSelector, analysisUseCase)
} catch(exc: Exception) {
Log.e(TAG, "Use case binding failed", exc)
}
}, ContextCompat.getMainExecutor(this))
}
```