# 将背景替换功能与 IVS 广播 SDK 结合使用
背景替换是一种相机滤镜，它使直播创作者能够更改其背景。如下图所示，替换背景涉及：
1. 从实时相机源中获取相机图像。
1. 使用 Google 机器学习套件将其分为前景和背景分量。
1. 将生成的分割遮罩与自定义背景图像相结合。
1. 将其传递给自定义图像源进行广播。
![\[实现背景替换的工作流程。\]](http://docs.aws.amazon.com/zh_cn/ivs/latest/RealTimeUserGuide/images/3P_Camera_Filters_Background_Replacement.png)
## Web
本节假设您已经熟悉[使用 Web 广播 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) 的[自拍分割模型](https://developers.google.com/mediapipe/solutions/vision/image_segmenter#selfie-model)。这是一种机器学习模型，用于识别视频帧中的哪些像素位于前景或背景。然后，您可以使用该模型的结果来替换直播的背景，方法是将视频源中的前景像素复制到表示新背景的自定义图像中。
要将背景替换与 IVS 实时流式 Web 广播 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
```
请务必更新您的 `package.json` 以指定 `webpack` 作为构建脚本：
#### JavaScript
```
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
```
### 创建 index.html
接下来，创建 HTML 样板，并将 Web 广播 SDK 作为脚本标签导入。在下面的代码中，请务必将 `` 替换为您正在使用的广播 SDK 版本。
#### JavaScript
```
```
### 添加媒体元素
接下来，在正文标签内添加一个视频元素和两个画布元素。视频元素将包含您的实时相机源，并将用作 MediaPipe Image Segmenter 的输入。第一个画布元素将用于渲染将要广播的源的预览。第二个画布元素将用于渲染将用作背景的自定义图像。由于带有自定义图像的第二个画布仅用作以编程方式将像素从其复制到最终画布的来源，因此在视图中被隐藏。
#### 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";
```
接下来，创建一个调用 `init()` 的函数，用于从用户的摄像机中检索 MediaStream，并在每次摄像机画面完成加载时调用回调函数。为按钮添加事件侦听器以加入和离开舞台。
请注意，在加入舞台时，我们会传入一个名为 `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` 的实例时，您将使用[自拍分割模型](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 从画布中提取前景像素。在执行此操作时，我们还会将视频帧传递给我们的 `ImageSegmenter` 实例，使用 [segmentforVideo](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.imagesegmenter#imagesegmentersegmentforvideo) 方法在视频帧中分割前景与背景。当 [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` 函数，它可将自定义背景图像与相机视频源中的前景合并，以替换背景。该函数首先从此前创建的两个画布元素中检索自定义背景图像和视频源的底层像素数据。然后，它会遍历 `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 配置文件
将此配置添加到要捆绑 `app.js` 的 Webpack 配置文件中，这样导入调用就会起作用：
#### 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 机器学习套件](https://developers.google.com/ml-kit/vision/selfie-segmentation)的自拍分割 API。自拍分割 API 接受相机图像作为输入，并返回一个遮罩，该遮罩为图像的每个像素提供置信度分数，指示图像是在前景还是背景中。根据置信度分数，您可以从背景图像或前景图像检索相应的像素颜色。此流程一直持续到检查完遮罩中的所有置信度分数为止。结果是一个新像素颜色数组，其中包含前景像素以及来自背景图像的像素。
要将背景替换与 IVS 实时流式 Android 广播 SDK 集成，您需要：
1. 安装 CameraX 库和 Google 机器学习套件。
1. 初始化样板变量。
1. 创建自定义图像源。
1. 管理相机帧。
1. 将相机帧传递到 Google 机器学习套件。
1. 将相机帧前景叠加到您的自定义背景上。
1. 将新图像馈送到自定义图像源。
### 安装 CameraX 库和 Google 机器学习套件
要从实时相机源中提取图像，请使用 Android 的 CameraX 库。要安装 CameraX 库和 Google 机器学习套件，请将以下内容添加到您的模块的 `build.gradle` 文件中。分别将 `${camerax_version}` 和 `${google_ml_kit_version}` 替换为最新版本的 [CameraX](https://developer.android.com/jetpack/androidx/releases/camera) 和 [Google 机器学习套件](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
```
在 [STREAM\$1MODE](https://developers.google.com/ml-kit/vision/selfie-segmentation/android#detector_mode) 中初始化 Segmenter 实例：
#### Java
```
private val options =
SelfieSegmenterOptions.Builder()
.setDetectorMode(SelfieSegmenterOptions.STREAM_MODE)
.build()
private val segmenter = Segmentation.getClient(options)
```
### 创建自定义图像源
在活动的 `onCreate` 方法中，创建 `DeviceDiscovery` 对象的实例并创建自定义图像源。自定义图像源提供的 `Surface` 将收到最终图像，前景叠加在自定义背景图像上。然后，您将使用自定义图像源创建 `ImageLocalStageStream` 的实例。然后，可以将 `ImageLocalStageStream`（在此例中名为 `filterStream`）的实例发布到舞台。有关设置舞台的说明，请参阅 [IVS Android 广播 SDK 指南](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`。这样可以保证一次只能传输一个相机帧进行处理。将每个相机帧转换为位图，这样您就可以提取其像素，以便稍后将其与自定义背景图像合并。
#### 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 机器学习套件
接下来，创建一个 `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))
}
```