Node.js | Create a video livestream from realtime generated images

I have some service that generates frames using tensorflow. I want to create a livestream to see the progress of the video in real time (about 30 fps)

but each image is about 1mb large and the video is very laggy due to limited network speed.

Im currently using

How can this be made faster?

// server
ai_video.on("frame", function(frame) {
    const b64 = frame.asBase64({ format: "jpeg", quality: 100 });
    io.emit("frame", b64);

// client
const canvas = document.getElementById("video");
const ctx = canvas.getContext("2d");
socket.on("frame", async function(b64) {
    const data = await fetch(frame)
        .then(res => res.blob())

    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(data, 0, 0, w, h);

is there a way to reduce the network traffic?

Source: Ask Javascript Questions