An example of how to use a Canvas element as a custom Agora Video Track

canvas-to-agora-video-track.js

import AgoraRTC from 'agora-rtc-sdk-ng'

// Create the Agora Client
const client = AgoraRTC.createClient({ 
  codec: 'vp9',
  mode: 'live',
  role: 'host'
})

document.addEventListener('DOMContentLoaded', async () => { 
  // Init the local mic and camera
  const [audioTrack, videoTrack] = await AgoraRTC.createMicrophoneAndCameraTracks({
    audioConfig: 'music_standard', 
    videoConfig: '360p_7'
  });

  // Create video element
  const video = document.createElement('video')
  // Create a new MediaStream using camera track and set it the video's source object
  video.srcObject = new MediaStream([videoTrack.getMediaStreamTrack()])
  // wait for source to finish loading
  video.addEventListener("loadeddata", () => {
    video.play()  // start video playback
  })

  // create a canvas and add it to the dom
  const canvas = document.createElement('canvas')
  document.body.appendChild(canvas)

  // Draw the video to canvas when video playback starts
  video.addEventListener("play", () => {
    const ctx = canvas.getContext("2d")
    // create a loop to render the video to the canvas
    function drawVideoToCanvas() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(drawVideoToCanvas);
    }
    requestAnimationFrame(drawVideoToCanvas);
  });

  // define the stream from the canvas
  const canvasStream = canvas.captureStream(30)
  // use VideoTrack from canvasSTream to create a custom Agora Video track
  const canvasVideoTrack = AgoraRTC.createCustomVideoTrack({
    mediaStreamTrack: canvasStream.getVideoTracks()[0],
    frameRate: fps
  })
  // publish the audio and canvas track
  await client.publish([audioTrack, customAgoraVideoTrack])
})