How to pipe tensorflow BodyPix output to Video track?

Question

I use HTML5 getUserMedia to retrieve webcam live stream.

Then through bodyPix I retrieve bokeh effect successfully.I also draw it on a canvas on my local browser. Below is the snippet which draws the filtered stream.

Instead of drawing modified image on a local canvas what I need is to convert it to a video stream and wire to a media server.

Thanks in advance.

EDIT: I do not need a canvas since

     useEffect(() => {
        getPreviewMedia();
      }, [videoRef, previewWebcamId]);
    
      const getPreviewMedia = () => {
    
        navigator.mediaDevices.getUserMedia({ audio: true });
        navigator.mediaDevices
          .getUserMedia({
            video: { deviceId: previewWebcamId },
          })
          .then((stream) => {
          loadBodyPix();
            let video = videoRef.current;
            video.srcObject = stream;
            video.play();
          })
          .catch((err) => {
            console.error("error:", err);
          });
      };
    
  function loadBodyPix() {
    console.log('load pix rc');
    var options = {
      multiplier: 0.75,
      stride: 32,
      quantBytes: 4
    }
    bodyPix.load(options)
    .then(net => perform(net))
    .catch(err => console.log(err))
  }

        async  perform(net) {
            const videoElement = videoRef.current;
            const segmentation = await net.segmentPerson(videoElement);
            const backgroundBlurAmount = 6;
            const edgeBlurAmount = 2;
            const flipHorizontal = true;
            bodyPix.drawBokehEffect(
                canvas, videoElement, segmentation, backgroundBlurAmount,
                edgeBlurAmount, flipHorizontal);
          }