html可以播放yuv吗,html - Javascript convert YUV to RGB - Stack Overflow
I have YUV image byte array(UINtArray) in js, is it possible to convert it to rgb? or how to draw it on canvas?
here is link where it using webGL canvas, by filling texture/ But I need to do that using 2D context canvas. I know that it may be slower, but anyway.
https://github.com/mbebenita/Broadway/blob/master/Player/canvas.js
var lumaSize = width * height,
chromaSize = lumaSize >> 2;
webGLCanvas.YTexture.fill(buffer.subarray(0, lumaSize));
webGLCanvas.UTexture.fill(buffer.subarray(lumaSize, lumaSize + chromaSize));
webGLCanvas.VTexture.fill(buffer.subarray(lumaSize + chromaSize, lumaSize + 2 * chromaSize));
webGLCanvas.drawScene();
Update: image YUV bytes is also I420 format as I see
Update2: I have found example in c++ that I think will work, but can you help me to convert it to js?
static int getR(int y, int u, int v)
{
return clamp(y + (int) (1.402f * (v - 128)));
}
static int getG(int y, int u, int v)
{
return clamp(y - (int) (0.344f * (u - 128) + 0.714f * (v - 128)));
}
static int getB(int y, int u, int v)
{
return clamp(y + (int) (1.772f * (u - 128)));
}
static int getY(int r, int g, int b)
{
return (int) (0.299f * r + 0.587f * g + 0.114f * b);
}
static int getU(int r, int g, int b)
{
return (int) (-0.169f * r - 0.331f * g + 0.499f * b + 128);
}
static int getV(int r, int g, int b)
{
return (int) (0.499f * r - 0.418f * g - 0.0813f * b + 128);
}
static int clamp(int value)
{
return Math::Min(Math::Max(value, 0), 255);
}
static void ConvertI420ToRGB24(SSourcePicture *yuvImage, unsigned char *rgbData)
{
int yPadding = yuvImage->iStride[0] - yuvImage->iPicWidth;
int uPadding = yuvImage->iStride[1] - (yuvImage->iPicWidth / 2);
int vPadding = yuvImage->iStride[2] - (yuvImage->iPicWidth / 2);
int yi = 0;
int ui = 0;
int vi = 0;
int rgbi = 0;
for (int ypos = 0; ypos < yuvImage->iPicHeight; ypos++)
{
for (int xpos = 0; xpos < yuvImage->iPicWidth; xpos++)
{
int y = yuvImage->pData[0][yi] & 0xFF;
int u = yuvImage->pData[1][ui] & 0xFF;
int v = yuvImage->pData[2][vi] & 0xFF;
int r = getR(y, u, v);
int g = getG(y, u, v);
int b = getB(y, u, v);
if (BitConverter::IsLittleEndian)
{
rgbData[rgbi++] = (unsigned char) b;
rgbData[rgbi++] = (unsigned char) g;
rgbData[rgbi++] = (unsigned char) r;
}
else
{
rgbData[rgbi++] = (unsigned char) r;
rgbData[rgbi++] = (unsigned char) g;
rgbData[rgbi++] = (unsigned char) b;
}
yi++;
if (xpos % 2 == 1)
{
ui++;
vi++;
}
}
yi += yPadding;
if (ypos % 2 == 0)
{
ui -= (yuvImage->iPicWidth / 2);
vi -= (yuvImage->iPicWidth / 2);
}
else
{
ui += uPadding;
vi += vPadding;
}
}
}