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

Question

我一直在尝试使用 Qt Webkit 在浏览器中渲染视频元素。我的所有帧均由 C++ 应用程序解码（通过网络接收的源视频数据包），并且我可以使用 Qt 在元素中显示视频，如下所述：QtWebEngine 在 DOM 中渲染本机 Qt 小部件？ 但我受到以下限制Qt Webkit 的 z-index 问题:(

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

我有一个 C++ 应用程序，可以启动 Chrome 嵌入式框架窗口（基本上是浏览器窗口）。有什么方法可以让我的 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

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

Answer 1

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

Answer 2

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

也许，我们并没有清楚地理解这个任务，但是你正在尝试从

stream

读取

HTML

（你有两个主要块：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），那么问题对您来说并不是那么大。

Answer 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