浏览器运行ffmpeg

2022-08-15 03:00:08 阅读：232 来源： 互联网

标签：浏览器 ffmpeg -- js disable let video 运行

docker编译环境

docker镜像
docker pull abdulachik/ffmpeg.js:latest
docker run -it -p 8090:8090 -v /Users/workspace/Downloads/ffmpeg_wasm:/tmp --privileged=true abdulachik/ffmpeg.js:latest /bin/bash
cd /tmp

打开摄像头

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
      function encodeVideo(){}
      function decodeVideo(){
        //获得video摄像头区域
        let video = document.getElementById("video");
        //播放
        video.play();
      }
      function getMedia() {
          let constraints = {
              //参数
              video: {width: 500, height: 500},
              audio: true
          };
          //获得video摄像头区域
          let video = document.getElementById("video");
          //返回的Promise对象
          let promise = navigator.mediaDevices.getUserMedia(constraints);
         //then()异步，调用MediaStream对象作为参数
          promise.then(function (MediaStream) {
              video.srcObject = MediaStream;
              video.play();
              //调用编码器
              encodeVideo();
              decodeVideo();
          });
      }
      </script>
      <body onl oad="getMedia()">
      <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
      <video id="video2" width="500px" height="500px" autoplay="autoplay"></video>
      </body>
</html>

自定义编译ffmpeg

前端视频帧提取 ffmpeg + Webassembly-1
前端视频帧提取 ffmpeg + Webassembly-2
docker环境的emcc版本

emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 2.0.30 (f782b50a7f8dded7cd0e2c7ee4fed41ab743f5c0)
clang version 14.0.0 (https://github.com/llvm/llvm-project c4048d8f50aaf2c4c13b8d3e138abc34a22da754)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: /emsdk/upstream/bin

解码器编译命令
cd ~/ffmpeg

emconfigure ./configure \
    --prefix=/tmp/ffmpeg \
    --cc="emcc" \
    --cxx="em++" \
    --ar="emar" \
    --enable-cross-compile \
    --target-os=none \
    --arch=x86_32 \
    --cpu=generic \
    --disable-ffplay \
    --disable-ffprobe \
    --disable-asm \
    --disable-doc \
    --disable-devices \
    --disable-pthreads \
    --disable-w32threads \
    --disable-network \
    --disable-hwaccels \
    --disable-parsers \
    --disable-bsfs \
    --disable-debug \
    --disable-protocols \
    --disable-indevs \
    --disable-outdevs \
    --disable-swresample
make

make install

对视频进行解码和提取图像主要用到 ffmpeg 的解封装、解码和图像缩放转换相关的接口，主要依赖以下的库

libavcodec - 音视频编解码
libavformat - 音视频解封装
libavutil - 工具函数
libswscale - 图像缩放&色彩转换
编译为wasm供js调用

export TOTAL_MEMORY=33554432

export FFMPEG_PATH=/tmp/ffmpeg
//EXPORTED_FUNCTIONS 导出供 js 调用的函数
emcc capture.c ${FFMPEG_PATH}/lib/libavformat.a ${FFMPEG_PATH}/lib/libavcodec.a ${FFMPEG_PATH}/lib/libswscale.a ${FFMPEG_PATH}/lib/libavutil.a \
    -O3 \
    -I "${FFMPEG_PATH}/include" \
    -s WASM=1 \
    -s TOTAL_MEMORY=${TOTAL_MEMORY} \
    -s EXPORTED_FUNCTIONS='["_main", "_free", "_capture"]' \
    -s ASSERTIONS=1 \
    -s ALLOW_MEMORY_GROWTH=1 \
    -o /capture.js

效果

小结

以上实验表明，js调用ffmpeg库好像不能直接调用ffmpeg-mp4.js,需要在c文件中实现

ImageData *capture(int ms, char *path);

然后在html文件中调用

<script src="web-capture.js"></script>

    <script>

        let button = document.querySelector('#js_button');
        let resultContainer = document.querySelector('#js_result');
        let fileInput = document.querySelector('#js_file');
        let timeInput = document.querySelector('#js_time');
        let infoContainer = document.querySelector('#js_info');

        button.addEventListener('click', () => {
            let file = fileInput.files[0];

            let startTime = Date.now();

            window.webCapture.capture(file, timeInput.value * 1000, (dataURL, imageInfo) => {

                const { width, height, duration } = imageInfo;

                resultContainer.innerHTML = `<img src="${dataURL}" />`

                infoContainer.innerHTML = `耗时：${Date.now() - startTime}ms<br>宽度：${width}<br>高度：${height}<br>时长：${duration / 1000000}s`;
            })

        });
    </script>

标签：浏览器,ffmpeg,--,js,disable,let,video,运行
来源： https://www.cnblogs.com/qsbye/p/16586905.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浏览器运行ffmpeg

docker编译环境

打开摄像头

自定义编译ffmpeg

小结