当前位置: 首页 > 工具软件 > Emscripten > 使用案例 >

Emscripten 网页js调用C++ (ffmpeg)

魏煜祺
2023-12-01

网页js调用FFmpeg,需要先编译 FFmpeg wasm;

Emscripten是一个工具链,通过LLVM来编译生成asm.js、WebAssembly字节码,能够在网页中接近最快的速度运行C和C++,并且不需要任何插件。

Emscripten 是基于LLVM的编译器,能够将任何能够生成LLVM位码的代码编译成javascript的严格子集asm.js,主要用于将C/C++代码编译成asm.js。
 

官网:​​​​​​Download and install — Emscripten 3.1.31-git (dev) documentation

主要,在 win 系统,执行 bat 文件;

           在Linux 系统执行 sh 文件;

git clone https://github.com/emscripten-core/emsdk.git

cd emsdk

emsdk update //提示执行 git pull

emsdk install latest

emsdk activate latest

emsdk_env.bat

或者 emsdk_env.sh  // 设置 emcc 环境变量;win 上是临时变量,每次cmd需要设置;

完成后,执行 emcc -v; 

如果提示命令不识别, 到 emsdk 目录中 执行 

emsdk_env.bat

每次打开 cmd 窗口都需要执行 emsdk_evn.bat,

可以自己写一个 bat 文件 先执行 emsdk_evn.bat ,这样简单写,当然可以自己添加环境变量;

编辑变量完成后:

编写测试代码:

如 D: 判根目录:

创建 test.cpp

#include <stdio.h>

int main()

{

printf("test emcc\n");

return 0;

}

cd  /d D:

emcc test.cpp

编译C++ 文件; 

D: 目录; 生成文件路径默认在 当前 命令行 目录;

emcc test.cpp 生成 a.out.js  a.out.wasm 两个文件;

测试:

cmd 窗口,  D:

node a.out.js

显示: test emcc

或者 页面调用:

写一个index.html :

http-server运行:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="a.out.js"></script>
</body>
</html>

本地打开会出错;

这是官网,描述更详细,可以参考;

FAQ — Emscripten 3.1.21-git (dev) documentation

导出 c / c++ 接口:

默认 main() 函数自动启动,用 node 命令 ,或者 js 在网页中是一样的默认启动;

导出别的接口:

c/c++ 接口为 test, testt, 在web JavaScript 中,通过 _test(),调用;

 -sEXPORTED_FUNCTIONS=["_test","_testt"]

一个完整的编译命令;

emcc ./test.c -I "./" -I "../" -L "./"     -l testlib1 -l testlib2  -s TOTAL_MEMORY=655360000 -sEXPORTED_FUNCTIONS=["_test","_testt"] -s STACK_SIZE=10MB  -sASSERTIONS -o ./test.js

-I :指定 lib 目录;

-L:指定 include 目录;

-I test: 连接的lib文件;

-sASSERTIONS:更详细的调试信息; 

-s MODULARIZE=1 :这个参数不可以像上面一样直接通过导出函数在JavaScript中用,而是通过web的module方式;

s STACK_SIZE=10MB;

如果快速配置环境,可以通过官方 docker,也比较简单;

ffmpeg wasm 地址:

https://github.com/ffmpegwasm/ffmpeg.wasm-core

 类似资料: