WebSocket의 메시지가있는 HTML5 빠른 렌더링

Question

이미지의 스트림을 보내는 간단한 소켓 서버 (socket.io)가 있습니다. 픽셀 데이터가 캔버스에 설정된 경우 성능이 너무 낮습니다 (putImageData 사용). . 나는 주요 캔버스에 다시 다음 화면을 그릴하고,

• 그림자는 캔버스를 아래의 방법을 사용하여 시도
  • 유형 1) 화면 캔버스를 해제 렌더링하는 drawImage 메소드를 사용하여
  • 유형 2) 캔버스 오프 스크린에서 getImageData 사용 및 putImageData UI를 업데이트 할 requestAnimFrame 사용
• 을 오프 스크린에서 createImageData를 사용하고 putImageData
을 통해 설정 메인 캔버스
• 유형 3)에 애니메이션 프레임 업데이트

동안 나 또한 정말 빠르다 둘 다 내 서버와 클라이언트, (내 앱 OK입니다) 평균 <은 50ms의 차이 사이에 메시지 대기 시간을 확인했습니다. 또한 서버에서 이미지를 보내려면 base64 문자열을 사용하십시오. 모든 메소드 계산이 정말 빠릅니다. 캔버스는 픽셀이 조작되고 설정 될 때에도 화면을 업데이트하는 자체 시간을 필요로합니다. 한 가지 더 요점은 소켓을 통해 수신 한 이미지가 이미지의 다른 영역이면서 동일한 이미지가 아니라는 것입니다.

기본 설정이 누락되었거나 캔버스가이 설정을 의미하지 않는다고 생각합니다.

업데이트 : 또한 img 요소에 drawImage를 사용하고 캔버스에 시도해 보았습니다. 속도가 거의 향상되지 않았습니다. 이미지 스트림이 흐르기 시작하면 다시 UI에서 매우 느리게 업데이트됩니다.

Answer 1

getImageData() 및 putImageData()는 이미지 데이터를 GPU RAM에서 CPU RAM으로 업로드/다운로드합니다.

대신 <canvas> 또는 <img>을 drawImage() 이미지 소스로 사용하고 getImageData()를 수행하지 마십시오. 이렇게하면 데이터가 디코딩 된 후 GPU-CPU-GPU를 왕복하지 않습니다.

오프 스크린 캔버스를 채우는 것이 병목 현상이라면 특별히 조정 된 코덱 (압축되지 않은 PNG)을 사용하여 서버 측에서 경량 이미지 요소를 만들어 압축이 프로세스 지연 시간이되지 않도록 할 수 있습니다. 그런 다음이 PNG 데이터를 이진 websocket 프레임으로 스트리밍하면됩니다 (b64 없음).