QQ視頻通話、抖音的視頻回顯是如何實現的

先說爲什麼會有這一篇文章：
2014年聯想曾經做過一款短視頻軟件，叫“魔力秀”。可以說和現在的抖音基本是一樣的，但因爲“魔力秀App”出生於聯想，註定無法在一個硬件公司成長爲一棵參天大樹，最終只發了一個版本就結束了。
當時“魔力秀App”的視頻回顯模塊是我設計實現的，所以就有了這篇文章。
事過多年，將這篇文章拿出來整理，因爲這項技術依然不過時，反而被廣泛應用…

這篇文章之前叫做 Opengl ES中YUV420轉RGB 是一個技術標題。整理時，發現用這個標題，大家實際是不知道這個技術有什麼用，因此換了這個比較醒目的名字。

Opengl ES中YUV420轉RGB 這項技術主要是實現視頻高效、節省帶寬的回顯視頻圖像。

爲什麼說高效？
因爲直接用 OpenGL ES 實現，本身繞開了Androi的層層封裝；
而且Opengl 本身就是圖形學接口，實現效率天然高效。
爲什麼說節省帶寬？
因爲網絡傳輸中，採用的YUV420數據格式，本身是一種有損的數據格式。但由於格式的特性，色彩還原後基本對圖像顯示效果沒有影響，因此在視頻通話場景中廣泛使用。

這裏通過以下幾個方面具體說明Opengl ES中YUV420轉RGB 這項技術的實現方式：

先了解一個概念“灰度圖”
YUV數據格式
YUV444和YUV420
YUV420轉RGB
OpenGL ES中YUV420P轉RGB

一、先了解一個概念“灰度圖”

這裏先了解一下灰度 Y 的概念。不知道大家是否看過老式的黑白電視機？
老式黑白電視機的圖像就只有Y一個通道，老式黑白電視機上的圖像就是灰度圖成像（只用接收一個Y通道數據就能播放出電視畫面，前輩們果然厲害… ；而後來的彩色電視用的是YUV數據信號，這樣既兼容了老的黑白電視，又可以在新式彩色電視上顯示彩色圖像，前輩們太厲害了…）

灰度圖的定義：
灰度值與RGB的計算公式
將“彩色圖轉”轉化爲“灰度圖”shader實現

1.1、灰度圖的定義：

把白色與黑色之間按對數關係分爲若干等級,稱爲灰度。灰度分爲256階。

1.2、灰度值Y與RGB的計算公式：

Y = 0.299R + 0.587G + 0.114*B

電視臺發出信號時，將RGB數據這樣轉化爲Y 數據。老式黑白電視機接收到Y信號，就能展示圖象了。

1.4、將“彩色圖轉”轉化爲“灰度圖”shader實現

這裏說一個技術實現，在OpenGL ES中，如何用shader片元着色器，把一個彩色紋理圖轉化爲一個灰度圖？

效果如下：

轉化當然要用到我們上邊說道的RGB 轉 Y的公式，下邊我們看具體的片源着色器 shader 代碼實現：

// shader 片元着色器
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D sTexture;

void main() {
		// 從紋理圖sTexture 讀取當前片元的RGB顏色
         vec4 color=texture2D(sTexture, vTextureCoord);
         // 公式計算灰度值
         float col=color.r*0.299+color.g*0.587+color.b*0.114;
         // 將生成的Y 灰度值設置給RGB通道
         color.r=col;
         color.g=col;
         color.b=col;
         // 傳給片源着色器
         gl_FragColor =color;
}

在shader實現中，我特意加了註釋。
瞭解glsl語法的同學，可以仔細讀一下上邊的代碼實現；
當然不瞭解語法的同學，更要簡單讀一遍（glsl是一種類C語言，只要學過C語言應該就能讀懂）

二、YUV數據格式

上邊我們瞭解了灰度圖的實現，這裏我們介紹一個YUV數據格式。
主要分爲以下幾個部分:

YUV定義
使用YUV的好處
YUV與RGB轉換公式
YUV444和YUV420

2.1、YUV

YUV的具體定義如下：

Y：就是灰度值；
UV：用來指定像素的顏色。

對於UV現在有些懵沒關係，我們繼續往下看

2.2、YUV與RGB轉換公式

// RGB轉YUV
Y= 0.299*R + 0.587*G + 0.114*B
U= -0.147*R - 0.289*G + 0.436*B = 0.492*(B- Y)
V= 0.615*R - 0.515*G - 0.100*B = 0.877*(R- Y)
//############################################
// YUV轉RGB
R = Y + 1.140*V
G = Y - 0.394*U - 0.581*V
B = Y + 2.032*U

2.3、使用YUV的好處:

傳輸信號向後兼容老式黑白電視機（用於優化彩色視頻信號的傳輸，使其向後相容老式黑白電視）
YUV420佔用的帶寬少(這個我們在前邊提過，至於具體爲什麼，後邊會有詳細介紹)

YUV420與RGB視頻信號傳輸相比，它最大的優點在於只需佔用極少的頻寬(後面來介紹)

2.4、YUV444和YUV420

前邊我們一直說的YUV數據，其實是YUV420數據格式。YUV420數據格式在傳輸上UV色彩是有損傳輸，而YUV444 其實是一種無損的數據格式。
那爲什麼這裏我們還是要說一下YUV444格式呢？
其實是爲了後邊實現 將YUV420數據還原成RGB做準備

首先介紹YUV444 數據格式：

YUV444：
一個像素點對應一個Y一個U一個V（YUV一一對應）
YUV444數據格式如下圖所示：

YUV444 中YUV通道一一對應，理解簡單。下邊這個是YUV420數據格式，UV數據有損。

YUV420：
一個像素點對應一個Y；
四個像素點對應一個U一個V；

具體數據格式如下：

從上圖可以看到，UV色彩通道是有損失的，這也是爲什麼YUV420在展示時，佔用的帶寬更少一下。

a、Y、U、V沒有一一對應，圖像有顏色損失
b、這也就是爲什麼佔用的帶寬少了；
c、同樣網絡傳輸中，佔用的流量也同樣減少了；
d、但對圖像的色彩展示幾乎沒有影響

因爲佔用的流量較少，對色彩展示幾乎沒有影響，因此廣泛應用於各中視頻通話場景，視頻回顯場景等。

三、YUV420轉RGB

哇去，基礎知識終於說完了，這裏說到我們的核心技術點：YUV420轉RGB

第一個步驟YUV420轉YUV444；
第二個步驟YUV444轉RGB。

爲什麼要把YUV420轉爲YUV444？
因爲在傳輸時，YUV420中的UV通道數據損失了。但我們渲染時，需要把這損失掉的UV色彩數據通道還原回來，再進行YUV444 轉 RGB

先說 YUV420 轉 YUV444

3.1、YUV420轉YUV444

要把YUV420轉爲YUV444就得把“上圖 YUV420” U與V中 “？” 的部分填滿。

通過YUV420數據中，已有的U 與 Y數據，通過差值計算的方式，填補上空缺的部分。以下是差值運算的具體實現公式，差值計算如下（建議參照YUV420數據格式圖來看，要不容易懵）：

U01 = (U00 + U02)/2; // 利用已有的 U00、U02來計算U01
U10 = (U00 + U20)/2; // 利用已有的 U00、U20來計算U10
U11 = (U00 + U02 + U20 + U22)/4;// 利用已有的 U00、U02、U20、U22來計算U11

//######################
V01 = (V00 + V02)/2; // 利用已有的 V00、V02來計算V01
V10 = (V00 + V20)/2; // 利用已有的 V00、V20來計算V10
V11 = (V00 + V02 + V20 + V22)/4; // 利用已有的 V00、V02、V20、V22來計算V11

經過以上公式，YUV420轉YUV444 完成（數據補全成功），下邊來說YUV444如何轉RGB。

3.2、YUV444轉RGB

YUV444轉RGB是有現成公式的，我們直接拿來用就行了，YUV轉RGB的公式：

R = Y + 1.140*V
G = Y - 0.394*U - 0.581*V
B = Y + 2.032*U

公式有了，那具體的代碼實現是怎麼實現的呢？

注：
一、二、三、四，這四點介紹的是YUV轉RGB的基本原理，下邊是具體實現。

四、OpenGL ES中YUV420P轉RGB

這一節介紹具體技術實現，但開始時，還是要介紹兩種數據格式（哎、我知道你們都煩了，我其實也煩，但還是得說）

YUV420p的數據格式
YUV420sp的數據格式(YUV420sp轉RGB這裏不做介紹)
YUV420sp 轉RGB

4.1、YUV420p的數據格式

YUV420p的數據格式如下圖所示（爲一個byte[]）：

其中數據的4/6爲Y；1/6爲U；1/6爲V。

4.2、YUV420sp的數據格式(YUV420sp轉RGB這裏不做介紹)

YUV420sp的數據格式如下圖所示（爲一個byte[]）：

其中數據的4/6爲Y；1/6爲U；1/6爲V。

4.3、YUV420sp 轉RGB

其實大概原理就是：

將YUV420數據中的Y U V 數據分別取出來，分別生成三張紋理圖
利用片元着色器每個片元執行一次的特性，將YUV420數據轉爲YUV444數據
從YUV444數據中，取出一一對應的YUV數據
最後，利用公式YUV444 轉 RGB
完事大吉

以下爲YUV三張紋理圖效果圖：

YUV420轉YUV444

這裏如何補全YUV420數據中UV部分的顏色數據？

這裏有一個討巧的方式：
在OpenGL ES生成紋理時，採用線性紋理採樣方式。線性採樣出U、V紋理中“？”部分的顏色值。這樣就就可以拿到一一對應的YUV444數據。

對應的Java代碼如下：

    /**
	 * 
	 * @param w
	 * @param h
	 * @param date
	 *            數據
	 * @param textureY
	 * @param textureU
	 * @param textureV
	 * @param isUpdate
	 *            是否爲更新
	 */
	public static boolean bindYUV420pTexture(int frameWidth, int frameHeight,
			byte frameData[], int textureY, int textureU, int textureV,
			boolean isUpdate) {

		if (frameData == null || frameData.length == 0) {
			return false;
		}
		Log.d(TAG, "----bindYUV420pTexture-----");

		if (isUpdate == false) {

			/**
			 * 數據緩衝區
			 */
			// Y
			ByteBuffer buffer = LeBuffer.byteToBuffer(frameData);
			// GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
			GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureY);

			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);// GL_LINEAR_MIPMAP_NEAREST
			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

			/**
			 * target 指定目標紋理,這個值必須是GL_TEXTURE_2D; level
			 * 執行細節級別,0是最基本的圖像級別,n表示第N級貼圖細化級別; internalformat
			 * 指定紋理中的顏色組件,可選的值有GL_ALPHA,GL_RGB,GL_RGBA,GL_LUMINANCE,
			 * GL_LUMINANCE_ALPHA 等幾種; width 指定紋理圖像的寬度; height 指定紋理圖像的高度; border
			 * 指定邊框的寬度; format 像素數據的顏色格式,可選的值參考internalformat; type
			 * 指定像素數據的數據類型,可以使用的值有GL_UNSIGNED_BYTE
			 * ,GL_UNSIGNED_SHORT_5_6_5,GL_UNSIGNED_SHORT_4_4_4_4
			 * ,GL_UNSIGNED_SHORT_5_5_5_1; pixels 指定內存中指向圖像數據的指針;
			 * 
			 */
			GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_LUMINANCE,
					frameWidth, frameHeight, 0, GLES20.GL_LUMINANCE,
					GLES20.GL_UNSIGNED_BYTE, buffer);

			/**
			 * 
			 */
			// U
			buffer.clear();
			buffer = LeBuffer.byteToBuffer(frameData);
			buffer.position(frameWidth * frameHeight);
			//
			// GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
			GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureU);

			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);// GL_LINEAR_MIPMAP_NEAREST
			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

			GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_LUMINANCE,
					frameWidth / 2, frameHeight / 2, 0, GLES20.GL_LUMINANCE,
					GLES20.GL_UNSIGNED_BYTE, buffer);

			/**
			 * 
			 */
			// V
			buffer.clear();
			buffer = LeBuffer.byteToBuffer(frameData);
			buffer.position(frameWidth * frameHeight * 5 / 4);
			//
			// GLES20.glActiveTexture(GLES20.GL_TEXTURE2);
			GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureV);

			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);// GL_LINEAR_MIPMAP_NEAREST
			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
			GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,
					GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

			GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_LUMINANCE,
					frameWidth / 2, frameHeight / 2, 0, GLES20.GL_LUMINANCE,
					GLES20.GL_UNSIGNED_BYTE, buffer);

		} else {
			/**
			 * Y
			 */
			ByteBuffer buffer = LeBuffer.byteToBuffer(frameData);
			GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureY);
			GLES20.glTexSubImage2D(GLES20.GL_TEXTURE_2D, 0, 0, 0, frameWidth,
					frameHeight, GLES20.GL_LUMINANCE, GLES20.GL_UNSIGNED_BYTE,
					buffer);

			/**
			 * U
			 */
			//
			buffer.clear();
			buffer = LeBuffer.byteToBuffer(frameData);
			buffer.position(frameWidth * frameHeight);
			//
			GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureU);
			GLES20.glTexSubImage2D(GLES20.GL_TEXTURE_2D, 0, 0, 0,
					frameWidth / 2, frameHeight / 2, GLES20.GL_LUMINANCE,
					GLES20.GL_UNSIGNED_BYTE, buffer);
			/**
			 * V
			 */
			//
			buffer.clear();
			buffer = LeBuffer.byteToBuffer(frameData);
			buffer.position(frameWidth * frameHeight * 5 / 4);
			//
			GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureV);
			GLES20.glTexSubImage2D(GLES20.GL_TEXTURE_2D, 0, 0, 0,
					frameWidth / 2, frameHeight / 2, GLES20.GL_LUMINANCE,
					GLES20.GL_UNSIGNED_BYTE, buffer);
		}
		return true;
	}

代碼說明：
已上代碼便是將傳入的幀數據byte frameData[]，轉爲三張紋理圖的代碼。
代碼的16行、5051行、7576行分別爲從byte frameData[]中分別取出Y、U、V數據的代碼。
代碼5659行、代碼8184行分別爲設置U、V紋理的採樣方式爲線性採樣的代碼。
以上代碼運行結束，內存中會生成三張紋理圖像。
將三張紋理圖像傳入“片元着色器”執行下一步驟。

YUV444轉RGB

YUV一一對應的紋理有了，這裏該介紹如何實現YUV444轉RGB了：

按照YUV轉RGB的公式，將Y、U、V一一對應的取出，進行YUV轉RGB操作，生成像素點。

對應片元着色器 shader 代碼實現：

recision mediump float;
// 片元着色器中 輸入了Y U V三張紋理
uniform sampler2D sTexture_y;
uniform sampler2D sTexture_u;
uniform sampler2D sTexture_v;

varying vec2 vTextureCoord;

//YUV 轉 RGB的 shader 實現
void getRgbByYuv(in float y, in float u, in float v, inout float r, inout float g, inout float b){	
	//
    y = 1.164*(y - 0.0625);
    u = u - 0.5;
    v = v - 0.5;
    //
    r = y + 1.596023559570*v;
    g = y - 0.3917694091796875*u - 0.8129730224609375*v;
    b = y + 2.017227172851563*u;
}

void main() {
	//
 	float r,g,b;
 	
 	// 從YUV三張紋理中，採樣出一一對應的YUV數據
 	float y = texture2D(sTexture_y, vTextureCoord).r;
    float u = texture2D(sTexture_u, vTextureCoord).r;
    float v = texture2D(sTexture_v, vTextureCoord).r;
	// YUV 轉 RGB
	getRgbByYuv(y, u, v, r, g, b);
	
	// 最終顏色賦值
	gl_FragColor = vec4(r,g,b, 1.0); 
}

五、完事大吉

源碼真的是懶得整理，所以，大家還是理解了實現原理，自己動手去敲吧，不要找我要代碼了！！！
源碼真的是懶得整理，所以，大家還是理解了實現原理，自己動手去敲吧，不要找我要代碼了！！！
源碼真的是懶得整理，所以，大家還是理解了實現原理，自己動手去敲吧，不要找我要代碼了！！！

QQ視頻通話、抖音的視頻回顯是如何實現的

QQ視頻通話、抖音的視頻回顯是如何實現的

一、先了解一個概念“灰度圖”

1.1、灰度圖的定義：

1.2、灰度值Y與RGB的計算公式：

1.4、將“彩色圖轉”轉化爲“灰度圖”shader實現

二、YUV數據格式

2.1、YUV

2.2、YUV與RGB轉換公式

2.3、使用YUV的好處:

2.4、YUV444和YUV420

三、YUV420轉RGB

3.1、YUV420轉YUV444

3.2、YUV444轉RGB

四、OpenGL ES中YUV420P轉RGB

4.1、YUV420p的數據格式

4.2、YUV420sp的數據格式(YUV420sp轉RGB這裏不做介紹)

4.3、YUV420sp 轉RGB

五、完事大吉

一文讀懂HTTPS

公開課“3D勳章”實現方案

小團隊Git分支管理

“NanoHttpd微型服務器”使用及源碼閱讀

QQ視頻通話、抖音的視頻回顯是如何實現的

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

QQ視頻通話、抖音的視頻回顯 是如何實現的

QQ視頻通話、抖音的視頻回顯 是如何實現的

一、先了解一個概念“灰度圖”

1.1、灰度圖的定義：

1.2、灰度值Y與RGB的計算公式：

1.4、將“彩色圖轉”轉化爲“灰度圖”shader實現

二、YUV數據格式

2.1、YUV

2.2、YUV與RGB轉換公式

2.3、使用YUV的好處:

2.4、YUV444和YUV420

三、YUV420轉RGB

3.1、YUV420轉YUV444

3.2、YUV444轉RGB

四、OpenGL ES中YUV420P轉RGB

4.1、YUV420p的數據格式

4.2、YUV420sp的數據格式(YUV420sp轉RGB這裏不做介紹)

4.3、YUV420sp 轉RGB

五、完事大吉

QQ視頻通話、抖音的視頻回顯是如何實現的

QQ視頻通話、抖音的視頻回顯是如何實現的