🤟Super fast H.264/H.265 FLV player

Overview

LOGO

LICENSE 996.icu

简介

随着直播和短视频的兴起,视频由于承担了更大的信息量,因此现在已经是非常主流的运营/产品信息输出方式。但由于国内各个浏览器厂商自身的利益关系所在,他们对HTML5的Video能力做了非常多的限制,不限于:

  1. 禁止自动播放
  2. 播放器魔改为原生播放器,层级最高,不可进行HTML相关元素层叠
  3. 播放前后硬插广告内容
  4. 视频自动置顶
  5. 相关API和事件实现不统一
  6. ......

其具体问题可以参考腾讯IMWeb团队编写的《复杂帧动画之移动端Video采坑实现》

为了解决这些问题,我们通过软解FLV的方式实现了WXInlinePlayer,其用的第三方技术和平台API如下:

  1. OpenH264/TinyH264/de265
  2. emscripten
  3. WebGL
  4. Web Audio Api

同时我们也编写了WebAssembly版本的FLV Demuxer,你可以在lib/codec找到相关代码。

特性

  1. FLV H264/H265 点播/直播全支持
  2. 自由选择解码依赖,在实际gzip中,Tinyh264只需 ~180k,OpenH264 ~260k,de265 ~210k (如何选择解码依赖
  3. 专为移动端性能优化,内存和CPU占用稳定
  4. 直播延迟优化,比MSE的原生Video实现低1-2s(如何降低卡顿和延迟
  5. 音频/视频独立支持
  6. 微信WebView自动播放
  7. 无音频动画自动播放
  8. 良好的移动端WebView兼容性

兼容性

兼容测试使用BrowserStack服务提供的相关机型,仅供参考:

  • Android 5+
  • iOS 10+ (含Safari及WebView)
  • Chrome 25+
  • Firefox 57+
  • Edge 15+
  • Safari 10.1+

示例

https://eroszy.github.io/WXInlinePlayer/example/index.html

如何编译

请确保你安装过parcel / emscripten 1.38.45 / cmake 以及 make,然后执行以下命令即可:

npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误,改用 cnpm update
bash build.sh

最终产物会在example文件夹中。

请注意:

  • 请在*nix环境下进行build,并不保证Windows下的OpenH264的编译
  • 请确保emscripten在1.38.45版本,否则会出现wasm32错误
  • cmake 版本需要是 3.16+

快速开始

WXInlinePlayer ">
>
<html>
<head>
  <meta charset="UTF-8" />
  <title>WXInlinePlayertitle>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }
  style>
head>
<body>
  <canvas id="container" width="800" height="450">canvas>
  <script src="./index.js">script>
  <script>
    if (WXInlinePlayer.isSupport()) {
      WXInlinePlayer.init({
        asmUrl: './prod.baseline.asm.combine.js',
        wasmUrl: './prod.baseline.wasm.combine.js'
      });

      WXInlinePlayer.ready().then(() => {
        const player = new WXInlinePlayer({
          url: 'https://static.petera.cn/mm.flv',
          $container: document.getElementById('container'),
          hasVideo: true,
          hasAudio: true,
          volume: 1.0,
          muted: false,
          autoplay: true,
          loop: true,
          isLive: false,
          chunkSize: 128 * 1024,
          preloadTime: 5e2,
          bufferingTime: 1e3,
          cacheSegmentCount: 64,
          customLoader: null
        });

        const { userAgent } = navigator;
        const isWeChat = /MicroMessenger/i.test(userAgent);
        if (!isWeChat) {
          alert('click to play!');
          document.body.addEventListener('click', () => {
            player.play();
          });
        }
      });
    }
  script> body> html>

在工程根目录,输入命令启动server:

npm run serve

然后输入网址访问demo:

http://localhost:8888/example/index.html

API

Boolean WXInlinePlayer.isSupport(void)

当前执行环境是否支持WXInlinePlayer。

if(WXInlinePlayer.isSupport()){
  console.log('WXInlinePlayer support');
}

Promise WXInlinePlayer.init(Object)

初始化WXInlinePlayer,需要传入加载的H264解码库的具体地址,关于解码库的选择,请参考:如何选择解码依赖

if(WXInlinePlayer.isSupport()){
  WXInlinePlayer.init({
    asmUrl: './prod.baseline.asm.combine.js',
    wasmUrl: './prod.baseline.wasm.combine.js'
  }).catch(e=>{
    console.log(`WXInlinePlayer init error: ${e}`);
  });
}

Promise WXInlinePlayer.ready(void)

WXInlinePlayer已经准备就绪,可以安全的进行初始化操作。

if(WXInlinePlayer.isSupport()){
  WXInlinePlayer.init({/*.....*/});
  WXInlinePlayer.ready().then(()=>{
    console.log('WXInlinePlayer ready');
  });
}

WXInlinePlayerInstance WXInlinePlayer(Object)

WXInlinePlayer构造函数,相关初始化参数请参考:初始化参数

WXInlinePlayer.ready().then(()=>{
  const player = new WXInlinePlayer({/*...*/});
});

void WXInlinePlayerInstance.play(void)

进行视频播放。需要注意的是由于浏览器限制(不包含微信及Chrome 66版本以下),高版本已经禁用了音频自动播放,因此直接调用此方法可能并不会有作用,请在click/touchstart/touchend/touchmove等事件中让用户主动触发。

document.body.addEventListener('click', ()=>{
  player.play();
});

void WXInlinePlayerInstance.stop(void)

停止整个播放器,不可被恢复(resume)。

player.stop();

void WXInlinePlayerInstance.pause(void)

暂停当前播放。

player.pause();

void WXInlinePlayerInstance.resume(void)

恢复由pause引起的暂停操作。

player.resume();

Number|void WXInlinePlayerInstance.volume(Number|void)

获取/设置当前音量。

const volume = player.volume(); // get volume
player.volume(volume); // set volume

Boolean|void WXInlinePlayerInstance.mute(Boolean|void)

获取/设置静音状态。

const muted = player.mute(); // get mute
player.mute(muted); // set mute

void WXInlinePlayerInstance.destroy(void)

销毁播放器,释放所有内存等待回收。

player.destroy();

Number WXInlinePlayerInstance.getCurrentTime(void)

获取当前播放时间,请注意,可能出现负值的情况请注意处理。

player.on('timeUpdate', ()=>{
  let currentTime = player.getCurrentTime();
  currentTime = currentTime <= 0 ? 0 : currentTime;
});

Number WXInlinePlayerInstance.getAvaiableDuration(void)

可播放时长,可理解为缓冲的时长。

player.on('timeUpdate', ()=>{
  const duration = player.getAvaiableDuration();
});

事件

  • mediaInfo(Object) - 视频相关信息,例如width/height/fps/framerate等
  • playing(void) - 开始/正在播放
  • buffering(void) - 内部帧数据不足,开始缓冲
  • stopped(void) - 停止播放
  • end(void) - 播放结束
  • timeUpdate(currentTime:Number) - 当前播放的进度,250ms进行一次触发
  • loadError({status:Number, statusText:String, detail:Object}) - 加载失败
  • loadSuccess(void) - 加载成功
  • performance({averageDecodeCost:Number, averageUnitDuration:Number}) - 编码性能检测事件,averageDecodeCost代表平均的解码消耗的时长,averageUnitDuration代表在averageDecodeCost下解码得到的可播放单元时长

如何选择解码依赖

目前有3套解码库,分别是:

  • prod.baseline.asm.combine / prod.baseline.wasm.combine
  • prod.all.asm.combine / prod.all.wasm.combine
  • prod.h265.asm.combine / prod.h265.wasm.combine

其区别在于:

  1. baseline文件大小更小(gzip后相比all小80k),但是只支持baseline的profile
  2. all的profile支持更完整(baseline/main/high),并且性能相比于baseline更好
  3. h265主要支持h265的flv流,此实现拓展了FLV格式,参考了金山的拓展要求,如有此需求请参考金山的FLV拓展规范

我们推荐当你播放广告视频/营销视频/小动画视频等对依赖库大小敏感的时候使用baseline.asm/baseline.wasm,而在播放点播视频/直播视频时等对依赖库大小不敏感的时候使用all.asm/all.wasm。

性能比较

在开发本机上,针对同一视频,WXInlinePlayer与手淘、花椒等FFMpeg实现在内存占用和CPU占用上相差不大,WXInlinePlayer性能整体较FFMpeg方案好5-10%左右,而H265由于减少的deblock,其性能相比于FFMpeg方案好30%左右,以下为H265的播放性能对比:

性能比较

如何降低卡顿和延迟

WXInlinePlayer的卡顿和延迟主要来自于3个地方:

  • 网络加载的延迟
  • 软解码的延迟
  • 渲染的延迟

一般来说,如果在用户网络环境较好的情况下,渲染由于使用了WebGL,很难造成瓶颈(操作很单一),其中一般会因为软解码性能不足造成不停卡顿及延迟。

优化因为软解码性能不足造成的延迟,我们一般从几个地方着手:

  1. 视频的profile:相比于main/high而言,baseline不包含B帧,解码消耗更低
  2. 视频帧率:过高的帧率会造成软解码跟不上,可以试着降低帧率,例如24fps
  3. 视频码率:码率越高,视频富含的细节越多,也越清晰,但是会消耗更多的解码性能,可以试着降低码率
  4. 视频分辨率:过高的视频会造成单帧传递的数量极大

目前WXInlinePlayer在中高端机上解1280x720,码率1024,帧率24fps的视频比较流畅。

关于以上提到的视频参数你可以通过FFmpeg查看:

ffmpeg -i "your.flv"

在这里我们给出主流平台的profile/帧率/码率/分辨率供参考:

平台 类型 清晰度 profile 帧率 码率 分辨率
虎牙 横屏 标清 High 24 500k 800x450
虎牙 横屏 高清 High 24 1200k 1280x720
虎牙 竖屏 高清 Main 16 1280k 540x960
奇秀 竖屏 标清 High 15 307k 204x360
奇秀 竖屏 高清 High 15 512k 304x540
奇秀 竖屏 超清 Baseline 15 1440k 720x1280
抖音 竖屏 默认 High 30 1600k(变化较多,仅供参考) 720x1280
快手 竖屏 默认 High 25 2880k(变化较多,仅供参考) 720x1280

我们建议你:

  1. 如果你想能够覆盖更多的机型,那么奇秀标清或是高清的配置适合你
  2. 如果你想只支持Android中高端机和iPhone6+,那么虎牙高清的配置适合你

WXInlinePlayer的我们常用的低延迟配置参数如下,仅供参考,实际请根据你的直播流/点播文件配置调整:

{
  chunkSize: 128 * 1024,
  preloadTime: 5e2,
  bufferingTime: 1e3,
  cacheSegmentCount: 64,
}

同时,你可以使用performance事件来判断当前的解码性能,然后提示用户并降级到你的后备方案(例如直接video播放/静态图/序列帧等):

player.on('performance', ({averageDecodeCost, averageUnitDuration})=>{
  const prop = averageUnitDuration / averageDecodeCost;
  if(prop >= 2.0){
    console.log('good performance');
  }else if(prop < 2.0 && prop >= 1.0){
    console.log('ok, thats fine');
  }else{
    console.log('bad performance');
  }
});

其他问题

  • 为什么不对FFmpeg精简后emscripten编译?

FFmpeg方案目前有几个比较大的问题,第一个是解码库的大小,精简后2M左右,gzip大约600k,这对于在意依赖库大小的产品是不可接受的。其次FFmpeg的方案难以被自己优化,比如WXInlinePlayer在2.0时会做多Worker的解码,这对于此类方案的修改成本是非常大的。

  • 为什么有些机器播放点播/直播会频繁卡顿,如何解决?

卡顿和延迟的原因比较复杂,对于WXInlinePlayer来说一般情况是解码速度跟不上播放速度,请参考如何降低卡顿和延迟进行优化。

  • 为什么不对UC浏览器(iOS/Android)进行支持?

UC不管是iOS还是Android都对WebAssembly/ASM.js进行了阉割,因此索性不支持了。

  • 如何将现有视频文件转换成WXInlinePlayer可播放的文件?

请使用FFmpeg或是其他类似的工具,这里给出一个简单的命令示例:

ffmpeg -i "your.mp4" -vcodec libx264 -acodec aac out.flv
  • 如何编码H265的FLV?

WXInlinePlayer的FLV规范遵循金山的FLV拓展规范,如果需要进行相关的编码,可以参考其相关的FFmpeg patch或者金山编写的编码器

项目计划

  • V1.1 支持HTTP-FLV及流式解码
  • V1.1 支持音视频独立播放
  • V1.2 降低直播流延迟
  • V1.3 增加H265支持
  • V1.4
    • 增加首帧逻辑
    • 重构解码器,精确缓存帧数据
    • SharedArrayBuffer支持,减少内存占用和CPU的拷贝性能消耗
  • V1.5
    • 增加poster参数
    • 增加OffscreenCanvas的支持,提升性能和减少内存占用(Chrome 69+)
    • 提供默认的播放器UI
  • V1.7 新增H265的SIMD支持
  • V1.8 新增H264的SIMD支持
  • V1.9 支持多Worker的GOP并行解码,提升软解性能
  • V1.10 支持FLV Seek操作

已知使用的产品

QQ技术支持群

QQ群

项目捐赠

微信支付 支付宝

Issues
  • h265解码无效

    h265解码无效

    流媒体用的 https://github.com/xiongziliang/ZLMediaKit 推流用的金山的FFmpeg3.4 patch,可以推,ffplay也可以播265,但是用这个网页播放器无法播

    复现步骤 1 使用docker 跑一个ZLMediaKit流媒体服务 docker run -id -p 1935:1935 -p 8080:80 gemfield/zlmediakit:20.04-runtime-ubuntu18.04 2 使用金山ffmpeg推流265 3 使用金山ffplay播放 4 使用wxinlineplayer播放

    opened by ouzhou 18
  • iOS  同时直播6路视频,只有4路成功。

    iOS 同时直播6路视频,只有4路成功。

    IOS 上 6个canvas 同时直播6路视频,只有4路成功加载。 同一页面安卓上运行良好。测试手机:iphone11 ,版本是13.5.1, 华为P20Pro 微信最新版。测试URL:http://183.233.190.23:6061/tmp/WXInlinePlayer-example/demo183.html

    opened by ArcoMu 13
  • 部分http-flv链接播放报错:memory access out of bounds

    部分http-flv链接播放报错:memory access out of bounds

    问题描述: 大佬你好,我按demo案例运行了部分http-flv,发现在wasm模块会出现以下错误,导致无法demux & decode,截图如下: image

    播放器配置代码如下:

    
    // initial
    WXInlinePlayer.init({
      wasmUrl: "./prod.all.wasm.combine.js", // 直接使用了项目自带编译后的文件 ./example/prod.all.wasm.combine.js
    });
    
    const player = new WXInlinePlayer({
      url: "./test.flv",
      $container: $canvas,
      hasVideo: true,
      hasAudio: true,
      volume: 1,
      muted: false,
      autoplay: true,
      loop: true,
      isLive: false,
      chunkSize: 131072,
      preloadTime: 500,
      bufferingTime: 500,
      cacheSegmentCount: 64,
      customLoader: null,
    });
    

    运行环境:Chrome 84.0.4147.135(正式版本) flv文件: test.flv.zip

    希望大佬可以百忙之中抽空解答,不胜感激

    opened by JS-Hao 9
  • 网络环境不太好时,手机上播放卡住后无法自己恢复播放

    网络环境不太好时,手机上播放卡住后无法自己恢复播放

    网络环境不太好时,手机上画面会卡住,显示可播放时长不变,进度秒数还会一直增加,解码平均只有十几ms,单元平均0ms。

    网络恢复正常后,查看network信息,后续视频flv信息一致有正常加载进来,但是手机画面仍然不会继续播放,仍然显示可播放时长不变,进度秒数还会一直增加,解码平均只有十几ms,单元平均0ms。(测试手机为ios10和ios13,似为普遍现象)

    在pc端chrome调试,模拟网络环境不好,画面虽然也卡顿,但是进度秒数不会大于可播放时长,等待后续flv资源加载进来后,画面能够继续播放。

    请问大家有没有碰到这个问题,有什么解决思路? (ps:同一个测试用视频源,在网络环境好的情况下是能够流畅播放完成的。)

    opened by Susy123 8
  • ios10和11上运行示例,load success后继续执行出错:

    ios10和11上运行示例,load success后继续执行出错:"TypeError: Value is not a sequence" on Safari of ios10 and ios11

    在ios10和ios11的safari上运行示例https://qiaozi-tech.github.io/WXInlinePlayer/example/index.html;load success后抛出错误"TypeError: Value is not a sequence",不能正常播放。 image

    opened by Susy123 8
  • vue-cli3.0创建的SPA程序中流加载成功,但canvas无法正确刷新显示

    vue-cli3.0创建的SPA程序中流加载成功,但canvas无法正确刷新显示

    image image image image image

    测试URL:http://183.233.190.23:6061/tmp/WebClient/#/ 请问库现在是不是对webpack支持不够友好?用vue-cli3.0的SPA程序中canvas无法正确刷新显示,看网络打印,流是加载成功了的,也打印了load success,但是canvas仍然保持默认的gray颜色

    opened by ArcoMu 6
  • 播放摄像头实时流时只能显示部分画面,这是什么原因呢,急急急

    播放摄像头实时流时只能显示部分画面,这是什么原因呢,急急急

    问题:推流设置分辨率是1280720,用WXInlinePlayer拉流时发现只能显示部分画面,但是用vlc时可以正常显示,另外播放1280720落地文件是可以正常播放得,只是会存在2.3秒得卡顿 当前进展:设置播放器尺寸大于10001000以上,也就是尺寸越大,显示得更小,甚至为1/10,小于10001000是显示1/3画面 当前代码:用得原生demo。 WXInlinePlayer.ready().then(()进入得是 player.on("loadSuccess", () ,没有进player.on("mediaInfo", (mediaInfo),所以不知道流得具体尺寸 希望得到技术支持,万分感谢

    opened by zbmrtmp 4
  • 设置canvas截图,返回空白图片问题

    设置canvas截图,返回空白图片问题

    通过 canvas.toBlob 设置截图,返回的都是空白图片,查询资料得知需要使用

    const gl = canvas.getContext('webgl', {
          preserveDrawingBuffer: true
    })
    

    源码使用的是,所以不能得到有效的blob,麻烦问下有什么办法可以解决

    或者可以手动调用绘制方法(资料)后截图,请问是否可以手动调用绘制函数

    opened by guygubaby 4
  • build problem

    build problem

    dist/index.js 65.85 KB 79.18s

    • mv dist/index.js ./example
    • cd lib/codec
    • bash build.sh
    • rm -rf ./bin
    • rm -rf ./build
    • mkdir ./build
    • cd ./build
    • node ../tool/compile.js wasm baseline
    • emcmake cmake .. CMake Error at /root/work/emsdk/fastcomp/emscripten/cmake/Modules/Platform/Emscripten.cmake:105 (message): Failed to fetch compiler version information with command "'/root/work/emsdk/fastcomp/emscripten/emcc' -v"! Process returned with error code 1. Call Stack (most recent call first): /usr/share/cmake-3.17/Modules/CMakeDetermineSystem.cmake:93 (include) CMakeLists.txt:2 (project)

    CMake Error: CMake was unable to find a build program corresponding to "Unix Makefiles". CMAKE_MAKE_PROGRAM is not set. You probably need to select a different build tool. -- Configuring incomplete, errors occurred!

    • emmake make -j 4 make: ['make', '-j', '4'] make: *** No targets specified and no makefile found. Stop.
    • mv ../bin/prod.js ../bin/baseline.wasm.js mv: cannot stat ‘../bin/prod.js’: No such file or directory
    • node ../tool/compile.js asm baseline
    • emcmake cmake .. CMake Error at /root/work/emsdk/fastcomp/emscripten/cmake/Modules/Platform/Emscripten.cmake:105 (message): Failed to fetch compiler version information with command "'/root/work/emsdk/fastcomp/emscripten/emcc' -v"! Process returned with error code 1. Call Stack (most recent call first): /usr/share/cmake-3.17/Modules/CMakeDetermineSystem.cmake:93
    opened by wnpllrzodiac 4
  • build error: install TARGETS given no ARCHIVE DESTINATION for static library target

    build error: install TARGETS given no ARCHIVE DESTINATION for static library target

    system: Linux 4.18.0-25-generic #26~18.04.1-Ubuntu SMP Thu Jun 27 07:28:31 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux cmake: 3.10.2 parcel: 1.12.4 emcc: 1.39.20 git branch: master(1ce82c59b408c8e5feb06fdb48a4002bda2aa8bb)

    build error:

    $ bash build.sh
    + parcel build src/index.js --no-source-maps --target browser
    + mv dist/index.js ./example
    + cd lib/codec
    + bash build.sh
    + rm -rf ./bin
    + rm -rf ./build
    + mkdir ./build
    + cd ./build
    + node ../tool/compile.js wasm baseline
    + emcmake cmake ..
    configure: cmake .. -DCMAKE_TOOLCHAIN_FILE=/media/keyou/nvmedev/works/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR="/media/keyou/nvmedev/works/emsdk/node/12.18.1_64bit/bin/node"
    -- Looking for pthread_create
    -- Looking for pthread_create - found
    -- Found Threads: TRUE
    -- Looking for malloc.h
    -- Looking for malloc.h - found
    -- Looking for stdint.h
    -- Looking for stdint.h - found
    -- Looking for stdbool.h
    -- Looking for stdbool.h - found
    -- Looking for posix_memalign
    -- Looking for posix_memalign - found
    CMake Warning (dev) at 3rdparty/de265/libde265/CMakeLists.txt:93 (add_library):
      ADD_LIBRARY called with SHARED option but the target platform does not
      support dynamic linking.  Building a STATIC library instead.  This may lead
      to problems.
    This warning is for project developers.  Use -Wno-dev to suppress it.
    
    CMake Error at 3rdparty/de265/libde265/CMakeLists.txt:98 (install):
      install TARGETS given no ARCHIVE DESTINATION for static library target
      "libde265".
    
    
    -- Configuring incomplete, errors occurred!
    See also "/media/keyou/nvmedev/works/WXInlinePlayer/lib/codec/build/CMakeFiles/CMakeOutput.log".
    + emmake make -j 4
    make: make -j 4
    make: *** No targets specified and no makefile found.  Stop.
    + mv ../bin/prod.js ../bin/baseline.wasm.js
    mv: cannot stat '../bin/prod.js': No such file or directory
    + node ../tool/compile.js asm baseline
    + emcmake cmake ..
    configure: cmake .. -DCMAKE_TOOLCHAIN_FILE=/media/keyou/nvmedev/works/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR="/media/keyou/nvmedev/works/emsdk/node/12.18.1_64bit/bin/node"
    CMake Warning (dev) at 3rdparty/de265/libde265/CMakeLists.txt:93 (add_library):
      ADD_LIBRARY called with SHARED option but the target platform does not
      support dynamic linking.  Building a STATIC library instead.  This may lead
      to problems.
    This warning is for project developers.  Use -Wno-dev to suppress it.
    
    ...
    
    
    opened by keyou 3
  • complie error

    complie error

    when i try to complie the baseline version, on ubuntu 19.10

    i got this error,on obj link:

    wasm-ld: error: /xxx/WXInlinePlayer/lib/codec/3rdparty/openh264/libopenh264wasm.so: machine type must be wasm32

    opened by nd0164 3
  • 播放相机视频(H.265)

    播放相机视频(H.265)

    相机视频格式调成了H.265,并且将rtsp转成http(rtsp->rtmp->http)。然后就放不出视频。下面是我写的代码,不知道哪里出问题了 这是自己创建的rtmp的name rtspLoad:是一个uuid let rtmpName = rtmp://${this.nginxIp}:1935/cloubox_07/${rtspLoad}; 然后用fluent-ffmpeg启动ffmpeg //启动ffmpeg startFfmpeg(camera_rtsp, rtmpName) { try { return new Promise((resolve, reject) => { let command = ffmpeg(); command.input(camera_rtsp); command.inputOptions("-stimeout 5000000"); command.inputOptions("-rtsp_transport tcp"); command.outputOptions("-max_muxing_queue_size 1024"); command.audioCodec('aac'); command.videoCodec("copy"); command.on("start", () => {}); command.on("codecData", () => {resolve(1);}); command.on("error", (err) => {reject(err); }); command.on('end', (stdout, stderr) => { }); command.format("flv"); command.save(rtmpName); }); } catch (error) { Logger.error("start ffmpeg failed!!!!",new Error(error)); } } 最后用上方的rtspLoad构建一个http httpName = http://${this.nginxIp}:${key}/stream?port=1935&app=cloubox_07&stream=${rtspLoad};

    opened by zhujiarun 0
  • 播放时候出现下面错误

    播放时候出现下面错误

    出现此问题的具体步骤

    1. 首先用livego搭建一个流媒体服务
    2. 用uni-app的live-pusher组件进行推送(https://uniapp.dcloud.io/component/live-pusher?id=live-pusher 移动跨端开发的主流选择)推流demo是用这个 https://gitee.com/Lione/live-uniapp/tree/master
    3. 用WXInlinePlayer库进行播时出现以下问题,如果用ffmpeg进行推流播放不会出现下面此问题 image
    opened by lrealtime 0
Releases(1.3.6)
Owner
Eros Zhao
previous @baidu @Tencent @quanmintv, Modern Web/GMTC19/GMTC21/FDCon/GIAC speaker. Full Stack Enginer and interest in WebAssembly and Compiler.
Eros Zhao
a parser for H.265 bitstream

h265bitstream a parser for H.265 bitstream 本项目参考h264bitstream(https://github.com/aizvorski/h264bitstream)开发了一个H.265的码流解析器。 能够解析H.265码流的VPS、SPS、PPS、sli

null 13 May 16, 2022
SRS is a simple, high efficiency and realtime video server, supports RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181.

SRS is a simple, high efficiency and realtime video server, supports RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181.

ossrs 18.8k Aug 4, 2022
media server based on c++11, support webrtc/rtmp/httpflv/websocket flv

cpp_media_server A media server is writen by C++11, and the network io is writen by Boost.Asio. It support rtmp/httpflv/websocket(flv)/webrtc. preinst

Alex.CR 139 Jun 30, 2022
Open Source H.264 Codec

OpenH264 OpenH264 is a codec library which supports H.264 encoding and decoding. It is suitable for use in real time applications such as WebRTC. See

Cisco Systems 4.7k Aug 7, 2022
Vulkan Video Sample Application demonstrating an end-to-end, all-Vulkan, processing of h.264/5 compressed video content.

This project is a Vulkan Video Sample Application demonstrating an end-to-end, all-Vulkan, processing of h.264/5 compressed video content. The application decodes the h.264/5 compressed content using an HW accelerated decoder, the decoded YCbCr frames are processed with Vulkan Graphics and then presented via the Vulkan WSI.

NVIDIA DesignWorks Samples 115 Aug 4, 2022
Sentry-Picam is a simple wildlife / security camera solution for the Raspberry Pi Zero W, providing 1080p/30fps motion activated H.264 video capture.

Sentry-Picam is a simple wildlife / security camera solution for the Raspberry Pi Zero W, providing 1080p/30fps motion activated H.264 video capture.

null 121 Jul 29, 2022
theora-player is an embeddable theora video player C++ library based on the libtheora sample. It has no audio support at this moment.

theora-player Description theora-player is an embeddable theora video player C++ library based on the libtheora sample. It has no audio support at thi

Fire Falcom 2 Jun 18, 2022
🎥 mpv is a free (as in freedom) media player for the command line.

mpv is a free (as in freedom) media player for the command line. It supports a wide variety of media file formats, audio and video codecs, and subtitle types.

mpv 19.7k Aug 12, 2022
An Open Source PSVita/TV MP4 player with 1080p playback and subtitle support

Vita-Media-Player An Open Source PSVita/TV MP4 player with 1080p playback and subtitle support 1080i output supported on the PSTV natively and on the

Jaylon Gowie 42 May 28, 2022
Video player for 3ds

Video player for 3DS Patch note v1.0.1 Added allow skip frames option v1.0.0 Initial release Summary Video player for 3DS Performance 256x144(144p)@30

Core 2 Extreme 110 Aug 9, 2022
TIP (translate it, please) is a plugin for VLC media player that helps you to study languages by watching videos.

vlc-tip-plugin TIP (translate it, please) is a plugin for VLC media player that helps you to study languages by watching videos. Features The plugin a

Aleksey Koltakov 41 May 2, 2022
Jellyfin Desktop Client based on Plex Media Player

Desktop client using jellyfin-web with embedded MPV player. Supports Windows, Mac OS, and Linux. Media plays within the same window using the jellyfin-web interface unlike Jellyfin Desktop. Supports audio passthrough. Based on Plex Media Player.

Jellyfin 1k Aug 11, 2022
A simple but powerful multimedia player library designed for Qt Quick.

QtMediaPlayer A simple but powerful multimedia player library designed for Qt Quick. Features Full-featured multimedia player Cross-platform: support

Yuhang Zhao 12 Jul 26, 2022
GB Studio Extended Nominal Player Adaptation/Interface

gbsenpai gbsenpai - GB Studio Extended Nominal Player Adaptation/Interface - is a project to port the GB Studio player to additional, non-GB/GBC platf

Adrian Siekierka 60 Jul 31, 2022
Yakuza Arcade Machine Player - play Virtua Fighter 5: Final Showdown on PC, using Yakuza 6 files.

Yakuza Arcade Machines Player Yakuza Arcade Machines Player is a launcher that allows you to run Virtua Fighter 5: Final Showdown, standalone and nati

Silent 15 Jun 20, 2022
A clone of Media Player Classic reimplemented in Qt.

Media Player Classic Qute Theater A clone of Media Player Classic reimplemented in Qt. Media Player Classic Home Cinema (mpc-hc) is considered by many

Media Player Classic Qute Theater 119 Jul 28, 2022
simple mp4 player based on rockchip rv1109 platform

mp4player RV1109平台上实现一个简单的 mp4 播放器,主要是本人使用的开发板QT无法播放mp4,应该是没有编译qst所致,因而想利用rockchip平台自有的 功能实现一个简单的播放器。 base目录包含一些基础框架实现,包含信号,线程,时间等,线程和消息泵的实现非常非常简单,因而不

null 9 Jul 17, 2022
Implement a universal video player based on FFmpeg

qiaopcmusic 实现一个万能视频播放器 添加依赖方式: To get a Git project into your build: Step 1. Add the JitPack repository to your build file Add it in your root build.

null 6 Oct 15, 2021
FFmpeg powered audio player in node.js

sange FFmpeg powered audio player in node.js prerequisites node.js cmake sudo apt install cmake c++ compiler sudo apt install g++ gcc ffmpeg sudo apt

ilikdoge 7 Jun 27, 2022