Как рисовать изображения холст с большей скоростью из websocket onmessageevent - PullRequest
Новая
       19

Как рисовать изображения холст с большей скоростью из websocket onmessageevent

0 голосов
/ 27 июня 2018

Я написал реализацию websocket для передачи изображений с сервера на клиент javascript.

На стороне клиента для события this.webSocket.onmessage мы получаем изображение png как base64 и пишем, как показано ниже. 

if (bIsPngFormat) { 
  // Draw the image onto canvas using image.onload event
  var myImage = new Image();
  myImage.onload = () => {
    this.ctx.drawImage(myImage, 0, 0);
  }
  myImage.src = "data:image/png;base64," + renderableImage
}

Но дисплей не обновляется, даже если событие запускается со скоростью 90 кадров / сек.

Просто хочу знать, почему холст не обновляется новым входящим изображением, когда оно приходит очень быстро.

Будет ли он работать лучше, если использовать canvas с контекстом openGL или напрямую отправлять буфер RGBA (вместо base64 png) и визуализироваться с использованием кода ниже

Код: 

// Apply the uint8array buffer received from websocket onmessage
var iData = new ImageData(new Uint8ClampedArray(renderableImage), width, height);
this.ctx.putImageData(iData, 0, 0);"

Заранее спасибо.

...