搭建webassembly网页播放器(四)---网页调用ffmpeg.js单元测试用例

在本章节我们会简单的写一个简单的例子，使用我们上一章节生成的ffmpeg静态库生成ffmpeg.js给我们的网页程序调用，实现网页调用C++程序

视频课程以及源码下载:
https://edu.csdn.net/course/detail/35615

章节列表:

网页调用ffmpeg.js单元测试用例

视频教学课程以及源码下载

https://edu.csdn.net/course/detail/35615

调用ffmpeg静态库生成ffmpeg.js

这个模式有点类似Android的NDK程序,首先我们来生成一个入口程序decode_test.c,在这个程序中我们就编写一个最简单的函数，初始化 h264 decoder.

decode_test.c 文件内容:

#include <libavcodec/avcodec.h>
#include <libavformat/avformat.h>
#include <libavutil/imgutils.h>
#include <libswscale/swscale.h>
#include <libswresample/swresample.h>
#include <emscripten/emscripten.h>

void EMSCRIPTEN_KEEPALIVE initDecoder() 
{
	   AVCodec  *codec = avcodec_find_decoder( AV_CODEC_ID_H264 );
	   if(codec != NULL)
	   {
	       printf("codec h264 init success.");
	   }
	   else
	   {
	       printf("codec h264 init fail.");
	   }
}

initDeocder是一个入口函数，我们的目的就是在网页上调用此函数，然后输出，验证网页调用C++程序是否成功.

接下来我们写一个编译脚本 build_ffmpeg.sh，用来编译decode_test.c,并输出ffmpeg.js以及ffmpeg.wasm.

build_ffmpeg.sh

export TOTAL_MEMORY=67108864
export FFMPEG_PATH=./ffmpeg-emcc
export SOURCE=./decode

echo "Running Emscripten..."
emcc ${SOURCE}/decode_test.c ${FFMPEG_PATH}/lib/libavformat.a \
    ${FFMPEG_PATH}/lib/libavcodec.a  \
    ${FFMPEG_PATH}/lib/libswresample.a \
    ${FFMPEG_PATH}/lib/libswscale.a \
    ${FFMPEG_PATH}/lib/libavutil.a \
    -O3 \
    -I "${FFMPEG_PATH}/include" \
    -s WASM=1 \
    -s NO_EXIT_RUNTIME=1 \
    -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" \
    -s ASSERTIONS=0 \
    -s TOTAL_MEMORY=167772160 \
    -s ALLOW_MEMORY_GROWTH=1 \
    -o ${PWD}/ffmpeg.js

echo "Finished Build"

-o ${PWD}/ffmpeg.js 就是指定输出，上面的流程其实和我们的gcc编译流程是一模一样，只是编译器变为了emcc.

具体的编译参数所代表的意义，请大家自行到官网检索查询代表的意思.

整个文件的目录层级结构如下所示:
在这里插入图片描述

执行编译:

./doc/build_wasm.sh

注意上面的编译不要在共享文件夹下进行，自己在CenterOS下创建一个文件夹.

输出如下:
在这里插入图片描述

同时我们会得到2个文件: ffmpeg.js 以及ffmpeg.wasm.
在这里插入图片描述
这个文件，会在我们下面的网页配置环境中所使用.

配置网页调用环境

进行到这一步,我们还需要搭建一个web服务器，我们这里选择的web服务器是nginx,其余的web服务器实现原理和nginx是一样的,我们把nginx的root目录配置在共享文件夹下.

下载nginx源码,我们下载的版本是nginx-1.19.10
编译命令如下:

yum -y install pcre-devel openssl openssl-devel
./configure --prefix=./mnt/hgfs/work/webffmpeg/nginx-1.19.10/build (以绝对路径的形式填写)
make
make install

这个时候在我们的目录下生成build文件夹，
在这里插入图片描述
html: 默认是我们的跟目录，网页调用文件我们需要放在这里.
conf:默认的配置文件
sbin:nginx可执行文件位置.

编译成功后，修改conf里面的mime.types文件，增加一段文本：
application/wasm wasm;

启动sbin目录下的 nginx

在这里插入图片描述
启动成功后，我们输入查看是否启动成功:

ps -eo pid,ppid,sid,comm,pgrp | grep -E “PID|ngix”

在这里插入图片描述

在html目录下生成一个1.txt,输入内容 hello webassembly.

接下来，我们访问下:
在这里插入图片描述

OK，环境配置成功,接下来，编写我们的网页js程序调用ffmpeg.js和ffmpeg.wasm,来实现js调用C++代码的单元测试用例:

编写网页调用测试用例

将编译产生的ffmpeg.js和ffmpeg.wasm放到html目录下.

ffmpeg.js会自动调用ffmpeg.wasm的，js和wasm一定要放在要给位置!

此时目录结构对应如下:
在这里插入图片描述

docode_test.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网页js调用ffmpeg</title>
        <!-- <script src="uuid.js"></script> -->
    </head>
    <body>
        </body>
        
        <script>
            function do_simple_test()
            {
                Module._initDecoder();
            }    
        </script>
        <div><input type="button" onclick="do_simple_test()" value="do_test"></div>
        <script async src=ffmpeg.js></script>
    </body>
</html>

规则：
我们定义什么入口函数，调用的时候就直接是 Module._函数名

比如我们在decode_test.c中定义了initDecoder函数，那么我们在网页中调用就是：
Module._initDecoder().

在这里插入图片描述

大家看到，右边的网页Console已经输出了，我们在docode_test.c中的打印输出语句。

说明我们的js调用 C++程序已经成功了，在下一篇我们来讲述

网页拉取h264
如何把网页拉取的h264提交给c++程序.
ffmpeg.js调用解码程序

原文链接：https://blog.csdn.net/webrtc_video/article/details/115702759