关于webrtc里面的opengl设置坐标系的问题，解决ios和android通信图像是反的问题

之前做基于webrtc的视频通话项目的时候一直纠结于ios和android为什么用相同的opengl代码存在两个平台通信的时候图像是反的问题，但是由于时间比较紧张，没有做太多研究，就修改了webrtc的代码，使ios和android的代码根据平台来适应。

今天做另外一个视频渲染的项目，也遇到了这个问题，刚好有时间就停下来研究了一下！我把webrtc里面的代码贴出来，给大家分析一下。

[cpp] view plain copy

1. RenderOpenGles20::RenderOpenGles20() :  
2. _id(0),  
3. _textureWidth(-1),  
4. _textureHeight(-1)  
5. {  
6.     WEBRTC_TRACE(kTraceDebug, kTraceVideoRenderer, _id, "%s: id %d",  
7.                  __FUNCTION__, (int) _id);  
8.       
9.     // <span style="color:#3366FF;">默认是这样写的</span>  
10.     const GLfloat vertices[20] = {  
11.         // X, Y, Z, U, V  
12.         -1, -1, 0, 1, 0, // Bottom Left  
13.         1, -1, 0, 0, 0, //Bottom Right  
14.         1, 1, 0, 0, 1, //Top Right  
15.         -1, 1, 0, 1, 1 }; //Top Left  
16.       
17.     memcpy(_vertices, vertices, sizeof(_vertices));  
18. }  
19.   
20. <span style="font-size:18px;color:#3366FF;">// 这里提供一个修改接口</span>  
21. // SetCoordinates  
22. // Sets the coordinates where the stream shall be rendered.  
23. // Values must be between 0 and 1.  
24. int32_t RenderOpenGles20::SetCoordinates(int32_t zOrder,  
25.                                          const float left,  
26.                                          const float top,  
27.                                          const float right,  
28.                                          const float bottom) {  
29.     if ((top > 1 || top < 0) || (right > 1 || right < 0) ||  
30.         (bottom > 1 || bottom < 0) || (left > 1 || left < 0)) {  
31.         WEBRTC_TRACE(kTraceError, kTraceVideoRenderer, _id,  
32.                      "%s: Wrong coordinates", __FUNCTION__);  
33.         return -1;  
34.     }  
35.       
36.     // Bottom Left  
37.     _vertices[0] = (left * 2) - 1;  
38.     _vertices[1] = -1 * (2 * bottom) + 1;  
39.     _vertices[2] = zOrder;  
40.       
41.     //Bottom Right  
42.     _vertices[5] = (right * 2) - 1;  
43.     _vertices[6] = -1 * (2 * bottom) + 1;  
44.     _vertices[7] = zOrder;  
45.       
46.     //Top Right  
47.     _vertices[10] = (right * 2) - 1;  
48.     _vertices[11] = -1 * (2 * top) + 1;  
49.     _vertices[12] = zOrder;  
50.       
51.     //Top Left  
52.     _vertices[15] = (left * 2) - 1;  
53.     _vertices[16] = -1 * (2 * top) + 1;  
54.     _vertices[17] = zOrder;  
55.       
56.     return 0;  
57. }  

分析上面的代码，其实我们不难看出，修改的只是针对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