關於webrtc裏面的opengl設置座標系的問題，解決ios和android通信圖像是反的問題

之前做基於webrtc的視頻通話項目的時候一直糾結於ios和android爲什麼用相同的opengl代碼存在兩個平臺通信的時候圖像是反的問題，但是由於時間比較緊張，沒有做太多研究，就修改了webrtc的代碼，使ios和android的代碼根據平臺來適應。

今天做另外一個視頻渲染的項目，也遇到了這個問題，剛好有時間就停下來研究了一下！我把webrtc裏面的代碼貼出來，給大家分析一下。

RenderOpenGles20::RenderOpenGles20() :
_id(0),
_textureWidth(-1),
_textureHeight(-1)
{
    WEBRTC_TRACE(kTraceDebug, kTraceVideoRenderer, _id, "%s: id %d",
                 __FUNCTION__, (int) _id);

    // <span style="color:#3366FF;">默認是這樣寫的</span>
    const GLfloat vertices[20] = {
        // X, Y, Z, U, V
        -1, -1, 0, 1, 0, // Bottom Left
        1, -1, 0, 0, 0, //Bottom Right
        1, 1, 0, 0, 1, //Top Right
        -1, 1, 0, 1, 1 }; //Top Left

    memcpy(_vertices, vertices, sizeof(_vertices));
}

<span style="font-size:18px;color:#3366FF;">// 這裏提供一個修改接口</span>
// SetCoordinates
// Sets the coordinates where the stream shall be rendered.
// Values must be between 0 and 1.
int32_t RenderOpenGles20::SetCoordinates(int32_t zOrder,
                                         const float left,
                                         const float top,
                                         const float right,
                                         const float bottom) {
    if ((top > 1 || top < 0) || (right > 1 || right < 0) ||
        (bottom > 1 || bottom < 0) || (left > 1 || left < 0)) {
        WEBRTC_TRACE(kTraceError, kTraceVideoRenderer, _id,
                     "%s: Wrong coordinates", __FUNCTION__);
        return -1;
    }

    // Bottom Left
    _vertices[0] = (left * 2) - 1;
    _vertices[1] = -1 * (2 * bottom) + 1;
    _vertices[2] = zOrder;

    //Bottom Right
    _vertices[5] = (right * 2) - 1;
    _vertices[6] = -1 * (2 * bottom) + 1;
    _vertices[7] = zOrder;

    //Top Right
    _vertices[10] = (right * 2) - 1;
    _vertices[11] = -1 * (2 * top) + 1;
    _vertices[12] = zOrder;

    //Top Left
    _vertices[15] = (left * 2) - 1;
    _vertices[16] = -1 * (2 * top) + 1;
    _vertices[17] = zOrder;

    return 0;
}

分析上面的代碼，其實我們不難看出，修改的只是針對x，y，z做微調，從webrtc裏面的例子看出來，它設置的是

zOrder:0

left:0.0

top:0.0

right:1.0

bottom:1.0

意思是什麼呢，zOrder是0，表示座標的原點在屏幕的中心，中心垂直是y座標，從下向上遞增，中心水平是x座標，從左向右遞增，區間是（-1，1）。用戶根據設備來計算，通過調用SetCoordinates來調整你視圖位置。

之前遇到ios和android是反的的原因是兩種系統座標原理不同（不明白的同學，可以百度查），所以存在這樣的問題。

今天知道原理以後，經過修正，驗證OK，這裏貼出來給大家分享一下。

在ios裏面這樣設置：

zOrder:0

left:0.0

top:0.0

right:1.0

bottom:1.0

在android裏面這樣設置

zOrder:0

left:1.0

top:1.0

right:0.0

bottom:0.0