Updating canvas graphic in CameraMode.vue sample

Zoom Apps
1

I’m using the Zoom Layers API, but upon clicking a simple button which supposed to change a canvas text, it doesn’t seem to refresh the view and display the change.
The button function is executeCanvasFunction and I checked it is being executed:

<template>
  <div id="CameraMode">
    <canvas ref="cameraCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script>
import ErrorAlert from "./ErrorAlert.vue";
import './styles.css'; 

export default {
  components: { ErrorAlert },
  inject: ["zoomSdk", "config"],

  data() {
    return {
      error: null,
      me: {},
      lowerThirdText: "",
      closingLowerThird: false,
      cleanupTimer: null, // For cleaning up the timer
      canvasText: "Hello world",
      canvasWidth: 1280, // Set this to match your camera dimensions
      canvasHeight: 720, // Set this to match your camera dimensions
    };
  },
  
  mounted() {
    this.zoomSdk
      .getUserContext()
      .then((c) => {
        this.me = c; // need the participant id for drawParticipant
        this.drawParticipant();
        this.drawWebView();
        this.updateCanvasText(); // Draw initial text
        // Uncomment the line below if you have an element with id 'debug'
        // document.getElementById('debug').innerText = this.me;
        // this.cleanupTimer = this.initFire(); // Initialize the timer if needed
      })
      .catch((err) => (this.error = err));
    this.zoomSdk.addEventListener("onMessage", this.onMessage);
  },

  unmounted() {
    this.zoomSdk.removeEventListener("onMessage", this.onMessage);
    if (this.cleanupTimer) {
      this.cleanupTimer(); // Clean up the timer
    }
  },

  methods: {
    onMessage(evt) {
      const payload = JSON.parse(evt.payload);

      if (payload.setError !== undefined) {
        this.onMessageSetError(payload);
      } else if (payload.message !== undefined) {
        this.onMessageLowerThird(payload);
      }
    },

    onMessageLowerThird(payload) {
      const message = payload.message;
      if (message === "") {
        this.closingLowerThird = true;
        window.setTimeout(this.onCloseMessage, 500);
      } else {
        this.lowerThirdText = message;
      }
    },

    onMessageSetError(payload) {
      this.error = payload.setError;
    },

    onCloseMessage() {
      this.lowerThirdText = "";
      this.closingLowerThird = false;     
    },

    executeCanvasFunction() {
      this.canvasText = "goodbye";
      this.updateCanvasText();
    },
    
    drawParticipant() {
      this.zoomSdk
        .drawParticipant({
          participantUUID: this.me?.participantUUID,
          x: 0,
          y: 0,
          width: this.config.media.renderTarget.width,
          height: this.config.media.renderTarget.height,
          zIndex: 1,
        })
        .catch((e) => (this.error = e));
    },

    drawWebView() {
      this.zoomSdk
        .drawWebView({
          webviewId: "camera",
          x: 0,
          y: 0,
          width: this.config.media.renderTarget.width,
          height: this.config.media.renderTarget.height,
          zIndex: 2,
        })
        .catch((e) => (this.error = e));
    },

    updateCanvasText() {
      const canvas = this.$refs.cameraCanvas;
      const ctx = canvas.getContext('2d');

      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Set up text style
      ctx.font = '48px Arial';
      ctx.fillStyle = 'white';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      console.log("canvasText", this.canvasText);
      // Draw text
      ctx.fillText(this.canvasText, canvas.width / 2, canvas.height / 2);

      // Redraw the webview to update the camera
      this.drawWebView();
    },
  },
};
</script>

<style>
body {
  background-color: rgba(0, 0, 0, 0);
}
#CameraMode {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center; /* Center vertically */
  color: #ffffff;
  width: 100%;
  height: 100%;
}

#CameraMode h1 {
  color: #fff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 30%);
  position: relative; /* Ensure it sits above the video */
  z-index: 3;
}

#CameraMode .lower-third {
  color: #fff;
  background-color: rgba(0, 0, 0, 30%);
  font-size: 12vh;
  position: absolute;
  bottom: 0;
  padding: 5%;
  margin: 0 0 5% 0;
  border-radius: 1rem;

  transition: all 1000ms ease-in-out;
  z-index: 3; /* Ensure it sits above the video */
}

#CameraMode .lower-third.hide {
  bottom: -50%;
  background-color: rgba(0, 0, 0, 0%);
}

#backgroundVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15; /* Ensure it sits behind other elements */
}
</style>

<style scoped>
#CameraMode {
  position: absolute;
  width: 100%;
  height: 100%;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>