直接从 C++ 应用程序绘制到 WebGL 画布答案

【问题标题】：Draw to WebGL canvas directly from C++ application直接从 C++ 应用程序绘制到 WebGL 画布
【发布时间】：2015-07-08 00:10:21
【问题描述】：

我一直在尝试使用 Qt Webkit 在浏览器中呈现视频元素。我的所有帧都由 C++ 应用程序（通过网络接收的源视频数据包）解码，我可以使用 Qt 在元素中显示视频，如下所述：QtWebEngine rendering native Qt widgets in DOM? 但我受到 Qt 的 z-index 问题的限制网络套件:(

相反，我想知道以下任何一项是否可能，以及是否有人以前取得过任何成就。

我有一个启动 Chrome Embedded Framework 窗口（基本上是浏览器窗口）的 C++ 应用程序。有什么方法可以让我的 C++ 应用程序直接将视频渲染到该浏览器窗口中 - 使用 webGL 或类似的库？也许有某种方法可以在 C++ 应用程序中使用 openGL 写入显卡内存并让 webGL 读取显卡数据 - 如果存在这种技术，这将是很棒的，但我担心沙盒不会允许这样做。

例如

Browser webGL surface/object <--- C++ application <--- file/network data

一个（非常！）天真的方法是让浏览器窗口使用环回地址上的 websocket 连接到 C++ 核心应用程序，然后 websocket 将表面流式传输到浏览器。然后可以将这些表面绘制到 html5 画布上或由 webGL 使用 - 不过，这可能会导致延迟很糟糕。

例如

Browser <--- websocket <--- C++ decode <--- file/network data

非常感谢 - 对于我可以用于此/代码示例的替代库的任何其他建议将不胜感激:)

【问题讨论】：

Qt 5.10 引入了Qt Quick WebGL Streaming Plugin。它允许您将 QML 应用程序流式传输到浏览器。不知道这对你的情况是否有帮助，但我想让你知道，以防万一。

标签： c++ qt canvas opengl-es webgl

【解决方案1】：

我建议 CEF： https://en.wikipedia.org/wiki/Chromium_Embedded_Framework 它完全支持现代 Google Chrome 浏览器可以做的任何事情。实际上就是 Chrome 浏览器。

【讨论】：

【解决方案2】：

...在浏览器中渲染一个视频元素。我所有的帧都被解码一个 C++ 应用程序（通过网络接收的源视频数据包），我可以在一个元素中显示视频...

也许，我们并不清楚这项任务，但您正试图从HTML 读取stream（您有两个主要块：C++ 作为视频转换器，HTML/WebGL 作为视频输出 - 这里我放弃了将视频传输到 HTML 的块）。

首先，从 HTML 开始。要在浏览器中显示视频，您需要：

<video width="320" height="240" autoplay>
  <source src="http://localhost/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

其次，您需要一个流的来源。它可以是您的 C++ 程序，但原始问题说：“通过网络接收的源视频数据包”。这意味着，您已经拥有某种格式的流。您只需将其转换为ogg。最好的解决方案是ffmpeg。

如果您在 C++ 上的程序已经可以生成某种格式的流（例如在 ogg 中），那么问题对您来说不是那么大。

【讨论】：

【解决方案3】：

也许这对你来说是个不错的选择。

将 c++/c 代码移植到 -> 到 html/js

https://emscripten.org/docs/getting_started/index.html

我从 python emsdk 脚本中获取用于编译参数的数据。这里有一些有趣的例子，比如 SDL、GL、键盘、鼠标事件。


C GL Shader:

  emcc sdl2-c-shader/sdl2glshader.c -s USE_SDL=2
           -s LEGACY_GL_EMULATION=1 -s GL_UNSAFE_OPTS=0
           -o sdl2-c-shader/build/sdl2.html

Mouse events:

  emcc mouse-events/test_html5_mouse.c -O2 -g1 --closure 1
  -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1
  -DAUTOMATE_SUCCESS=1  -o mouse-events/build/tmouse.html

Draw object, declare in typescript, opengles2

  emcc sdl-ts-declare/webgl_draw_triangle.c -lGL
  -s OFFSCREEN_FRAMEBUFFER=1 -DEXPLICIT_SWAP=1
  -DDRAW_FROM_CLIENT_MEMORY=1 -s FULL_ES2=1
  -o sdl-ts-declare/build/gles2test.html

Keyboard (c)

  emcc keyboard-c/test_keyboard_codes.c -O2 -g1 --closure 1
  -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1
  -DAUTOMATE_SUCCESS=1  -o keyboard-c/build/keyboard-mouse.html

Write file (cpp)

  emcc write-file/write_file.cpp -s ENVIRONMENT=web
  --closure 1 -o write-file/build/test.html

Draw trianlge object, (c, opengles2)

  emcc webgl-triangle/webgl_draw_triangle.c -lGL
  -s OFFSCREEN_FRAMEBUFFER=1 -DEXPLICIT_SWAP=1
  -DDRAW_FROM_CLIENT_MEMORY=1 -s FULL_ES2=1
  -o webgl-triangle/build/test.html

geometry cube SDL

 // self.btest('cubegeom_pre3.c',
 // reference='cubegeom_pre2.png',
 // args=['-s', 'LEGACY_GL_EMULATION=1', '-lGL', '-lSDL'])

 emcc cubegeom_pre3.c -s LEGACY_GL_EMULATION=1 -lGL
 -lSDL -o build/test.html preload-file res

Test mem-cpu

  emcc cpu-mem/benchmark_memcpy.cpp -DBUILD_FOR_SHELL
  -I tests/tick.h -s WASM=0 -s TOTAL_MEMORY=512MB
  --memory-init-file 1  -o cpu-mem/nik.html

看看：

https://github.com/zlatnaspirala/c-cpp-to-javascript

【讨论】：