IT评测·应用市场-qidao123.com

标题: 鸿蒙5.0实战案例：基于OpenGL渲染视频画面帧 [打印本页]
作者: 海哥    时间: 2025-3-6 13:09
标题: 鸿蒙5.0实战案例：基于OpenGL渲染视频画面帧
往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✏️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位口试履历~

✏️ 一连更新中……

场景描述

在直播场景中，会有礼物、魔法等心情临时出现在画面，必要获取视频画面帧进行纹理更新后再渲染
通过OpenGL渲染视频画面帧。
⦁ 在ArkTS侧调用createAVPlayer()创建AVPlayer实例，初始化进入idle状态。设置业务必要的监听事件，设置资源：设置属性url，AVPlayer进入initialized状态。
⦁ 设置窗口：获取并设置属性SurfaceID，该surfaceId是native侧nativeImage的surfaceID，调用play方法开始播放。
⦁ 添加XComponent组件，在native侧通过OH_NativeXComponent_RegisterCallback注册XComponent回调。
⦁ 在napi 接口init的时间在Xcomponent的OnSurfaceCreatedCB回调中初始化渲染线程，通过OH_NativeImage_Create创建nativeImage。
⦁ 通过OH_NativeImage_GetSurfaceId获取surfaceID并通报到arkts侧。
⦁ 通过OH_NativeImage_SetOnFrameAvailableListener设置帧可用回调，通过NativeVsync接收系统信号，控制渲染。
⦁ 通过OH_NativeImage_UpdateSurfaceImage获取最新帧更新相干联的OpenGL ES纹理，通过eglSwapBuffers将纹理渲染上屏。
核心代码
创建nativeImage，获取nativeImage的id，设置帧可用回调。
  1. bool RenderThread::CreateNativeImage()
  2. {
  3.   nativeImage_ = OH_NativeImage_Create(-1, GL_TEXTURE_EXTERNAL_OES);
  4.   if (nativeImage_ == nullptr) {
  5.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "RenderThread", "OH_NativeImage_Create failed.");
  6.     return false;
  7.   }
  8.   int ret = 0;
  9.   {
  10.     std::lock_guard<std::mutex> lock(nativeImageSurfaceIdMutex_);
  11.     ret = OH_NativeImage_GetSurfaceId(nativeImage_, &nativeImageSurfaceId_);
  12.   }
  13.   if (ret != 0) {
  14.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "RenderThread",
  15.       "OH_NativeImage_GetSurfaceId failed, ret is %{public}d.", ret);
  16.     return false;
  17.   }
  18.   nativeImageFrameAvailableListener_.context = this;
  19.   nativeImageFrameAvailableListener_.onFrameAvailable = &RenderThread::OnNativeImageFrameAvailable;
  20.   ret = OH_NativeImage_SetOnFrameAvailableListener(nativeImage_, nativeImageFrameAvailableListener_);
  21.   if (ret != 0) {
  22.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "RenderThread",
  23.       "OH_NativeImage_SetOnFrameAvailableListener failed, ret is %{public}d.", ret);
  24.     return false;
  25.   }
  26.   return true;
  27. }
  28. void RenderThread::OnNativeImageFrameAvailable(void *data)
  29. {
  30.   OH_LOG_Print(LOG_APP, LOG_DEBUG, LOG_PRINT_DOMAIN, "RenderThread", "OnNativeImageFrameAvailable.");
  31.   auto renderThread = reinterpret_cast<RenderThread *>(data);
  32.   if (renderThread == nullptr) {
  33.     return;
  34.   }
  35.   renderThread->availableFrameCnt_++;
  36.   renderThread->wakeUpCond_.notify_one();
  37. }
  38. NativeVsync接收系统发送的Vsync信号，控制渲染节奏。
  39. bool RenderThread::InitNativeVsync()
  40. {
  41.   nativeVsync_ = OH_NativeVSync_Create(DEMO_NAME, strlen(DEMO_NAME));
  42.   if (nativeVsync_ == nullptr) {
  43.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "RenderThread", "Create NativeVSync failed.");
  44.     return false;
  45.   }
  46.   (void)OH_NativeVSync_RequestFrame(nativeVsync_, &RenderThread::OnVsync, this);
  47.   return true;
  48. }
  49. void RenderThread::OnVsync(long long timestamp, void *data)
  50. {
  51.   OH_LOG_Print(LOG_APP, LOG_DEBUG, LOG_PRINT_DOMAIN, "RenderThread", "OnVsync %{public}llu.", timestamp);
  52.   auto renderThread = reinterpret_cast<RenderThread *>(data);
  53.   if (renderThread == nullptr) {
  54.     return;
  55.   }
  56.   renderThread->vSyncCnt_++;
  57.   renderThread->wakeUpCond_.notify_one();
  58. }
复制代码
在渲染线程中更新画面帧数据到OpenGL纹理，并做对应的opengl处理后，通过SwapBuffers()方法上屏。
  1. void RenderThread::DrawImage()
  2. {
  3.   if(nativeImageTexId_ == 9999) {
  4.     glGenTextures(1, &nativeImageTexId_);
  5.     glBindTexture(GL_TEXTURE_EXTERNAL_OES, nativeImageTexId_);
  6.     // set the texture wrapping parameters
  7.     glTexParameteri(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_S, GL_REPEAT);
  8.     glTexParameteri(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_T, GL_REPEAT);
  9.     // set texture filtering parameters
  10.     glTexParameteri(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  11.     glTexParameteri(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  12.   }
  13.   OH_LOG_Print(LOG_APP, LOG_DEBUG, LOG_PRINT_DOMAIN, "RenderThread", "DrawImage.");
  14.   if (eglSurface_ == EGL_NO_SURFACE) {
  15.     OH_LOG_Print(LOG_APP, LOG_WARN, LOG_PRINT_DOMAIN, "RenderThread", "eglSurface_ is EGL_NO_SURFACE");
  16.     return;
  17.   }
  18.   OH_NativeImage_AttachContext(nativeImage_, nativeImageTexId_);
  19.   renderContext_->MakeCurrent(eglSurface_);
  20.   int32_t ret = OH_NativeImage_UpdateSurfaceImage(nativeImage_);
  21.   if (ret != 0) {
  22.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "RenderThread",
  23.       "OH_NativeImage_UpdateSurfaceImage failed, ret: %{public}d, texId: %{public}d",
  24.       ret, nativeImageTexId_);
  25.     return;
  26.   }
  27.   OH_LOG_Print(LOG_APP, LOG_DEBUG, LOG_PRINT_DOMAIN, "RenderThread", "OH_NativeImage_UpdateSurfaceImage succeed.");
  28.   float matrix[16];
  29.   ret = OH_NativeImage_GetTransformMatrix(nativeImage_, matrix);
  30.   if (ret != 0) {
  31.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "RenderThread",
  32.       "OH_NativeImage_GetTransformMatrix failed, ret: %{public}d", ret);
  33.     return;
  34.   }
  35.   glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
  36.   glClear(GL_COLOR_BUFFER_BIT);
  37.   shaderProgram_->Use();
  38.   shaderProgram_->SetInt("texture", 0);
  39.   glActiveTexture(GL_TEXTURE0);
  40.   glBindTexture(GL_TEXTURE_EXTERNAL_OES, nativeImageTexId_);
  41.   shaderProgram_->SetMatrix4v("matTransform", matrix, 16, false);
  42.   glBindVertexArray(vertexArrayObject_);
  43.   glEnable(GL_DEPTH_TEST);
  44.   glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, Detail::indices);
  45.   renderContext_->SwapBuffers(eglSurface_);
  46. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4