之前做基于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