feature: 支持WebAssembly

Author: DawningW

.github/workflows/build.yml

@@ -76,6 +76,8 @@ jobs:
             build_option: BUILD_RUST_BINDING
           - lang: cangjie
             build_option: BUILD_CANGJIE_BINDING
+          - lang: wasm
+            build_option: BUILD_WASM_BINDING
       fail-fast: false
     steps:
     - name: Checkout
@@ -107,13 +109,22 @@ jobs:
         channel: lts
         version: auto
 
+    - name: Setup emsdk
+      if: matrix.lang == 'wasm'
+      uses: mymindstorm/setup-emsdk@v14
+
     - name: Build ${{ matrix.lang }} binding
       run: |
         mkdir -p install
-        cmake -B build -G Ninja -DCMAKE_INSTALL_PREFIX=install -DHTTPLIB_USE_ZSTD_IF_AVAILABLE=OFF -DBUILD_DEMO=OFF -DBUILD_TEST=OFF -D${{ matrix.build_option }}=ON
+        BUILD_DEMO=OFF
+        if [ "${{ matrix.lang }}" = "wasm" ]; then
+          BUILD_DEMO=ON
+        fi
+        cmake -B build -G Ninja -DCMAKE_INSTALL_PREFIX=install -DHTTPLIB_USE_ZSTD_IF_AVAILABLE=OFF -DBUILD_DEMO=${BUILD_DEMO} -DBUILD_TEST=OFF -D${{ matrix.build_option }}=ON
         cmake --build build --target ${{ matrix.lang }}-package --parallel $(nproc)
 
     - name: Test ${{ matrix.lang }} binding
+      if: matrix.lang != 'wasm'
       run: |
         wget -q https://github.com/bluenviron/mediamtx/releases/download/v1.14.0/mediamtx_v1.14.0_linux_amd64.tar.gz
         tar -xzf mediamtx_v1.14.0_linux_amd64.tar.gz

CMakeLists.txt

@@ -34,6 +34,12 @@ else()
             set(BUILD_MACOS_FRAMEWORK ON CACHE BOOL "Build library as Framework on macOS")
             set(BUILD_MACOS_BUNDLE ON CACHE BOOL "Build executable as App Bundle on macOS")
         endif()
+    elseif(EMSCRIPTEN)
+        add_compile_options("-pthread")
+        add_link_options(
+            "-sALLOW_MEMORY_GROWTH=1" "-pthread" "-sMALLOC=mimalloc"
+            "-sFETCH" "-sFETCH_STREAMING" "-lwebsocket.js" "-sPROXY_POSIX_SOCKETS"
+        )
     endif()
 endif()
 
@@ -51,6 +57,8 @@ elseif(APPLE)
     if(BUILD_MACOS_BUNDLE)
         set(CMAKE_INSTALL_BINDIR "." CACHE PATH "")
     endif()
+elseif(EMSCRIPTEN)
+    set(CMAKE_INSTALL_BINDIR "dist" CACHE PATH "")
 endif()
 include(GNUInstallDirs)
 foreach(dir LIB BIN INCLUDE)

CoralReefCam/CMakeLists.txt

@@ -9,6 +9,10 @@ if(WIN32)
         LIBRARY DESTINATION ${CMAKE_INSTALL_FULL_LIBDIR}
         RUNTIME DESTINATION ${CMAKE_INSTALL_FULL_BINDIR}
     )
+elseif(EMSCRIPTEN)
+    set(SDL2_DIR "${EMSCRIPTEN_ROOT_PATH}/tools/ports/sdl2" CACHE PATH "")
+    find_package(SDL2 REQUIRED)
+    set(EMRUN "${EMSCRIPTEN_ROOT_PATH}/emrun${EMCC_SUFFIX}")
 else()
     find_package(SDL2 2.0.18 REQUIRED)
 endif()
@@ -54,6 +58,14 @@ target_compile_definitions(${PROJECT_NAME}
         ENABLE_OPENCV=$<BOOL:${ENABLE_OPENCV}>
 )
 
+if(EMSCRIPTEN)
+    target_link_options(${PROJECT_NAME}
+        PRIVATE
+            "-sPTHREAD_POOL_SIZE=3"
+            "-sASYNCIFY=1"
+    )
+endif()
+
 target_link_libraries(${PROJECT_NAME}
     PRIVATE
         CoralReefPlayer
@@ -82,8 +94,26 @@ if(APPLE AND BUILD_MACOS_BUNDLE)
             MACOSX_BUNDLE_INFO_PLIST ${CMAKE_CURRENT_SOURCE_DIR}/Info.plist
             RESOURCE ${CMAKE_CURRENT_SOURCE_DIR}/icon.icns
     )
+elseif(EMSCRIPTEN)
+    set_target_properties(${PROJECT_NAME} PROPERTIES OUTPUT_NAME "index")
+    set(CMAKE_EXECUTABLE_SUFFIX ".html")
+
+    add_custom_target(preview
+        COMMAND ${EMRUN} index.html
+        DEPENDS ${PROJECT_NAME}
+        WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
+    )
 endif()
 
-install(TARGETS ${PROJECT_NAME}
-    DESTINATION ${CMAKE_INSTALL_FULL_BINDIR}
-)
+if (NOT EMSCRIPTEN)
+    install(TARGETS ${PROJECT_NAME}
+        DESTINATION ${CMAKE_INSTALL_FULL_BINDIR}
+    )
+else()
+    install(FILES
+        ${CMAKE_CURRENT_BINARY_DIR}/index.html
+        ${CMAKE_CURRENT_BINARY_DIR}/index.js
+        ${CMAKE_CURRENT_BINARY_DIR}/index.wasm
+        DESTINATION ${CMAKE_INSTALL_FULL_BINDIR}
+    )
+endif()

CoralReefCam/main.cpp

@@ -1,5 +1,13 @@
 #include <string>
+#include <functional>
 #include <stdio.h>
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#include <emscripten/html5.h>
+#include <emscripten/threading.h>
+#include <emscripten/websocket.h>
+#include <emscripten/posix_socket.h>
+#endif
 #include "SDL.h"
 #include "imgui.h"
 #include "imgui_stdlib.h"
@@ -23,6 +31,12 @@ crp_handle player;
 bool playing;
 uint64_t pts;
 
+#ifdef __EMSCRIPTEN__
+static std::function<void()> EmscriptenMainLoopFunc;
+static void EmscriptenMainLoop() { EmscriptenMainLoopFunc(); }
+static EMSCRIPTEN_WEBSOCKET_T bridgeSocket = 0;
+#endif
+
 SDL_PixelFormatEnum GetPixelFormat(Format format)
 {
     switch (format)
@@ -449,6 +463,11 @@ int main(int argc, char* argv[])
         height = 1080;
     }
 
+#ifdef __EMSCRIPTEN__
+    bridgeSocket = emscripten_init_websocket_to_posix_socket_bridge("ws://localhost:80");
+    uint16_t readyState = 0;
+#endif
+
     if (SDL_Init(SDL_INIT_TIMER | SDL_INIT_VIDEO | SDL_INIT_AUDIO | SDL_INIT_GAMECONTROLLER))
     {
         printf("Could not initialize SDL: %s\n", SDL_GetError());
@@ -498,11 +517,11 @@ int main(int argc, char* argv[])
     ImGuiIO& io = ImGui::GetIO();
     io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
     io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;
+    ImGui::StyleColorsDark();
     ImFontConfig font_config;
     font_config.SizePixels = 16.0f;
     io.Fonts->AddFontDefault(&font_config);
     // io.Fonts->AddFontFromFileTTF("./unifont-15.0.06.ttf", 16.0f, nullptr, io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
-    ImGui::StyleColorsDark();
     ImGui_ImplSDL2_InitForSDLRenderer(window, renderer);
     ImGui_ImplSDLRenderer2_Init(renderer);
 
@@ -513,8 +532,21 @@ int main(int argc, char* argv[])
     bool is_running = true;
     bool has_frame = false;
     Uint64 last_time = SDL_GetTicks64();
+#ifdef __EMSCRIPTEN__
+    io.IniFilename = nullptr;
+    EmscriptenMainLoopFunc = [&]() { do
+#else
     while (is_running)
+#endif
     {
+#ifdef __EMSCRIPTEN__
+        if (readyState == 0)
+        {
+            emscripten_websocket_get_ready_state(bridgeSocket, &readyState);
+            if (readyState == 0) continue;
+        }
+#endif
+
         bool force_update = false;
         SDL_Event event;
         while (SDL_PollEvent(&event))
@@ -585,6 +617,10 @@ int main(int argc, char* argv[])
         ImGui_ImplSDLRenderer2_RenderDrawData(ImGui::GetDrawData(), renderer);
         SDL_RenderPresent(renderer);
     }
+#ifdef __EMSCRIPTEN__
+    while (0); };
+    emscripten_set_main_loop(EmscriptenMainLoop, 0, true);
+#endif
 
     crp_destroy(player);
     ImGui_ImplSDLRenderer2_Shutdown();

README.md

@@ -9,6 +9,7 @@ CoralReefPlayer 即珊瑚礁播放器，是一款使用 C++20 开发的跨平台
 CoralReefPlayer 支持 Windows、Linux、MacOS、Android、iOS 和纯血鸿蒙等主流操作系统，并且提供 C#、Java 和 Python 等语言的 binding，方便使用各种语言和框架开发上位机。
 
 与现存的各种播放器库相比，CoralReefPlayer 具有以下特点：
+
 - 使用 C++20 标准开发，代码简洁、高效
 - 接口简单易用
 - 所有主流操作系统和编程语言支持
@@ -21,6 +22,8 @@ CoralReefPlayer 支持 Windows、Linux、MacOS、Android、iOS 和纯血鸿蒙
 
 CoralReefCam，中文名珊瑚礁™嘻屁屁高性能版，是 CoralReefPlayer 的示例项目，集成了 SDL、imgui、OpenCV 等库，可基于此项目开发高性能机器人上位机。目前作为监控软件使用，其最初的开发目的是用于解决拉流延迟问题。
 
+CoralReefCam 现已支持 WebAssembly，可直接在浏览器中播放 MJPEG over HTTP 流，请前往[示例网站](http://crp.dawncraft.cc)体验。
+
 <div style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;">
     <img src="doc/urpc_2025.jpg" alt="urpc_2025" style="width: 50%;">
     <img src="doc/urpc_cctv13.jpg" alt="urpc_cctv13" style="width: 50%;">
@@ -134,6 +137,21 @@ CoralReefCam，中文名珊瑚礁™嘻屁屁高性能版，是 CoralReefPlayer
 1. 使用 DevEco Studio 打开 Harmony 目录
 2. 编译并运行 `entry` 项目
 
+### WASM（Emscripten）
+
+前置条件：
+
+- CMake 3.24.0 或更高版本
+- Emscripten 4.0.21 或更高版本
+    - 自 4.0.21 版本起支持通过 fetch 流式下载数据，因此如需拉取 MJPEG over HTTP 流则必须高于此版本
+
+编译步骤：
+
+1. 执行 `embuilder build sdl2` 构建 SDL2 库
+2. （可选）进入 thirdparty/ffmpeg/Emscripten 目录，执行 `build -t ffmpeg .` 构建 ffmpeg 库
+3. 使用 `emcmake cmake` 配置项目，然后进行生成
+4. 其余步骤同 Linux
+
 ### 交叉编译
 
 CoralReefPlayer 支持交叉编译，可使用 CMake 的工具链文件进行交叉编译，工具链文件的编写请参考 `cmake/toolchains/aarch64-linux-gnu.toolchain.cmake`。
@@ -178,6 +196,10 @@ CoralReefPlayer 支持交叉编译，可使用 CMake 的工具链文件进行交
 
 启用 `BUILD_CANGJIE_BINDING` 选项，然后运行 `cangjie-package` 目标即可在 install 目录中生成包含仓颉代码的 zip 压缩文件。
 
+### WASM
+
+启用 `BUILD_WASM_BINDING` 选项，然后运行 `wasm-package` 目标即可在 install 目录中生成 npm 包。
+
 ## 文档
 
 CoralReefPlayer 总体架构图：

binding/CMakeLists.txt

@@ -26,3 +26,11 @@ set(BUILD_CANGJIE_BINDING OFF CACHE BOOL "Build cangjie binding")
 if(BUILD_CANGJIE_BINDING)
     add_subdirectory(cangjie)
 endif()
+set(BUILD_WASM_BINDING OFF CACHE BOOL "Build WebAssembly binding")
+if(NOT EMSCRIPTEN)
+    message(WARNING "WebAssembly binding requires Emscripten toolchain!")
+    set(BUILD_WASM_BINDING OFF)
+endif()
+if(BUILD_WASM_BINDING)
+    add_subdirectory(wasm)
+endif()

binding/java/CMakeLists.txt

@@ -41,10 +41,10 @@ target_compile_definitions(crp_native
 )
 
 if(ANDROID)
-target_link_options(crp_native
-    PRIVATE
-        "-Wl,-z,max-page-size=16384"
-)
+    target_link_options(crp_native
+        PRIVATE
+            "-Wl,-z,max-page-size=16384"
+    )
 endif()
 
 target_link_libraries(crp_native

binding/wasm/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+build
+*.log
+*.gz
+*.tgz

binding/wasm/CMakeLists.txt

@@ -0,0 +1,57 @@
+project(coralreefplayer-wasm VERSION ${CoralReefPlayer_VERSION})
+
+set(CMAKE_CXX_STANDARD 20)
+
+include(copy_libs)
+
+find_program(NodeJS_EXECUTABLE NAMES node)
+if(NOT NodeJS_EXECUTABLE)
+    message(FATAL_ERROR "WebAssembly binding needs Node.js >= 12 to build!")
+    return()
+endif()
+
+set(USE_MODULE ON CACHE BOOL "Export UMD or ES6 module for wasm binding")
+set(USE_ES6_MODULE OFF CACHE BOOL "Export ES6 module for wasm binding")
+
+file(
+    COPY ${CMAKE_CURRENT_SOURCE_DIR}/
+    DESTINATION ${CMAKE_CURRENT_BINARY_DIR}
+    PATTERN "main.cpp" EXCLUDE
+)
+
+configure_file(
+    ${CMAKE_CURRENT_BINARY_DIR}/package.json.in
+    ${CMAKE_CURRENT_BINARY_DIR}/package.json
+    @ONLY
+)
+
+add_executable(${PROJECT_NAME}
+    main.cpp
+)
+
+target_link_options(${PROJECT_NAME}
+    PRIVATE
+        "-sPTHREAD_POOL_SIZE=3"
+        "-sEXPORTED_FUNCTIONS=[\"_malloc\",\"_free\"]"
+        "-sPURE_WASI=1"
+        "$<$<BOOL:${USE_MODULE}>:-sMODULARIZE=1>"
+        "$<$<BOOL:${USE_ES6_MODULE}>:-sEXPORT_ES6=1>"
+        "--no-entry"
+)
+
+target_link_libraries(${PROJECT_NAME}
+    PRIVATE
+        embind
+        "$<LINK_LIBRARY:WHOLE_ARCHIVE,CoralReefPlayer>"
+)
+
+add_dependencies(${PROJECT_NAME}
+    CoralReefPlayer
+)
+
+set_target_properties(${PROJECT_NAME} PROPERTIES OUTPUT_NAME "coralreefplayer")
+
+add_custom_target(wasm-package
+    COMMAND npm run package -- --pack-destination ${CMAKE_INSTALL_PREFIX}
+    DEPENDS ${PROJECT_NAME}
+)

binding/wasm/README.md

@@ -0,0 +1 @@
+# coralreefplayer-wasm