如何使用 createCustomVideoTrack 在画布中传送合成图像

如何解决如何使用 createCustomVideoTrack 在画布中传送合成图像

我正在尝试在网络版 Agora 中将视频和图像合成传送到画布上。通俗地说，它是一个虚拟的背景。 我在某种程度上能够做到，但是远程图像的背景是黑色的。如果您能指出似乎缺少使背景成为图像的内容，我将不胜感激。 另外，本地视频和我预想的一样是虚拟背景。在遥控器上查看时，没有背景。 使用环境：JavaScript，chrome最新版本，上传服务器查看。

2021/03/19 很抱歉耽搁了，但我附上了代码。

async function virtual($video,$destCanvas,net) {

 // THESE LINES ARE REQUIRED!
  $video.width = $destCanvas.width = $video.videoWidth;
  $video.height = $destCanvas.height = $video.videoHeight;

  const destCtx = $destCanvas.getContext("2d");
  $destCanvas.style.backgroundImage = "url(vvv.png)";
  $destCanvas.style.backgroundSize = "contain";

  // to remove background,need another canvas

  $tempCanvas.width = $video.videoWidth;
  $tempCanvas.height = $video.videoHeight;
  const tempCtx = $tempCanvas.getContext("2d");
 
  (async function loop() {
    requestAnimationFrame(loop);

    // create mask on temp canvas
    const segmentation = await net.segmentPerson($video);
    const mask = bodyPix.toMask(segmentation);
    tempCtx.putImageData(mask,0);

    // draw original
    destCtx.drawImage($video,$destCanvas.width,$destCanvas.height);

    // then overwrap,masked area will be removed
    destCtx.save();
    destCtx.globalCompositeOperation = "destination-out";
    
    destCtx.drawImage($tempCanvas,$destCanvas.height);

    destCtx.restore();
    xxxCanvas = $destCanvas;

  })();
};
async function join() {
  // create Agora client

  rtc.client.setClientRole(options.role);

  if (options.role === "audience") {
    // add event listener to play remote tracks when remote user publishs.
    rtc.client.on("user-published",handleUserPublished);
    rtc.client.on("user-unpublished",handleUserUnpublished);
    $("#leave").attr("disabled",false);
  }

  // join the channel
  options.uid = await rtc.client.join(options.appid,options.channel,options.token || null);

  if (options.role === "host") {

    hostRole();

    console.log("publish success");
    $("#leave").attr("disabled",false);

  }
}

async function hostRole(){
 
    const MediaStream = xxxCanvas.captureStream();
    
    localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack({ microphoneId : getSelectedAudio(),encoderConfig: "high_quality_stereo"});
    localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack({ cameraId : getSelectedVideo()});
    
    await rtc.client.publish([
      
     AgoraRTC.createCustomVideoTrack({

      mediaStreamTrack: MediaStream.getVideoTracks()[0],}),localTracks.audioTrack]);   
}