Невозможно нарисовать изображения на холсте, полученные через Python WebSocket

Question

Я хочу передавать изображения через Python WebSocket для рисования на холсте HTML. Клиентская программа реализована с использованием JavaScript, который использует HTML-тег canvas. Серверная программа написана на Python.

Клиент:

var ws = new WebSocket("ws://127.0.0.1:5678/");
ws.binaryType = "arraybuffer";
var canvas = document.getElementById('canvasOutput'); 
var context=canvas.getContext("2d"); 

var img = new Image();

// show loading notice


ws.onmessage= function (data) {
    console.log(data);
    //var blobdata = data.data;
    //console.log(blobdata); 
    //var uint8Arr = new Uint8Array(data.data);
    //console.log(uint8Arr);
    var base64 = btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    //var str = String.fromCharCode.apply(null, uint8Arr);
    //var base64String = btoa(uint8Arr);
    //console.log(base64String);
    //  context.fillRect(0, 0, 80, 100);    
    img.onload = function () {
        console.log(img);
        context.drawImage(this, 0, 0, canvas.width, canvas.height);
    };
    img.src = "data:image/png;base64," +base64;
    console.log(img);
    //context.drawImage(img,0,0,canvas.width,canvas.height);
};

Сервер:

import asyncio
import datetime
import random
import websockets
import cv2                     # OpenCV library for computer vision
import numpy as np
import time
import base64
async def time1(websocket, path):
    while True:
        vc = cv2.VideoCapture(0)
        vc.set(3,150)
        vc.set(4,100)
        if vc.isOpened():
            rval,frame = vc.read()
            encoded_image = cv2.imencode('.png',frame)[1]
            #print(type(encoded_image))
            encoded_image= base64.b64encode(encoded_image)
            #print(type(encoded_image))

            await websocket.send(encoded_image) #frame.tobytes() is not working 

        else:
            rval = False

        await asyncio.sleep(random.random() * 3)

start_server = websockets.serve(time1, '127.0.0.1', 5678)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

Данные изображения были переданы на клиентскую сторону, но они не печатаются на холсте. Может кто-нибудь сказать мне, где я не прав, я пробовал разные варианты, но ни один из них не сработал. Вот изображение консоли моего браузера.

Вывод на консоль полученных данных и img.src: