Flv

1 网速计算在音视频播放的场景中，用户的网速是影响体验的重要因素，播放器在播放的过程中，能够计算单位工夫获取的数据量来掂量网速。flv.js的实例提供了statistics_info事件获取以后的网速。flvPlayer.on('statistics_info', function(res) { console.log('statistics_info',res);}) res构造如下：{ currentSegmentIndex: 0,decodedFrames: 15,droppedFrames: 0,hasRedirect: false,loaderType: "fetch-stream-loader",playerType: "FlvPlayer",speed: 395.19075278358656,totalSegmentCount: 1,url: "https:/example.com/1.flv"} 其中的speed字段就是网速，单位是KB/s, 上面就看对于网速计算相干的局部。statistics_info事件中获取网速的整体流程如下图： IOController中管制每次把加载的字节数增加到SpeedSampler中，对外提供的lastSecondKBps属性是最近有数据一秒的网速。 TransmuxingController中管制播放器在加载数据的时候开启定时器获取统计数据，向上触发事件。 外围的计算还是SpeedSampler类, lastSecondKBps是getter属性获取最近有数据一秒的网速，代码含意参考正文。 get lastSecondKBps () { // 如果够1s计算 this._lastSecondBytesthis.addBytes(0)// 上1秒的_lastSecondBytes有数据 就间接返回// 这个奇妙的是 感觉不是精确的1s 然而又是精确的 因为如果是超过1秒就不持续增加了 1秒内的就增加进去了。// 如果上一秒有数据则返回if (this._lastSecondBytes !== 0) { return this._lastSecondBytes / 1024} else { // 如果上一秒的速度是0，并且间隔上次计算超过了500ms 则用_intervalBytes和durationSeconds进行计算 if (this._now() - this._lastCheckpoint >= 500) { // if time interval since last checkpoint has exceeded 500ms // the speed is nearly accurate return this.currentKBps } else { // We don't know return 0 }}} ...

nginx 摄像头去flash视频配置下载nginx http://nginx.org/download/ngi...git clone nginx-http-flv-module， 地址 https://github.com/winshining...进入 nginx根门路，执行 ./configure --add-module=/path/to/nginx-http-flv-module ，如果要反对https，增加对应的配置参数执行make，如果遇到谬误，装置对应的模块执行make install ffmpeg相干vcodec指定视频编码为h264（前端只反对h264），参数-g 升高推流提早 ps aux|grep ffmpeg|awk '{print $2}'|xargs kill -9nohup ffmpeg -f rtsp -rtsp_transport tcp -i "rtsp://user:password@ip/h264/ch1/main/av_stream" -vcodec libx264 -g 1 -an -f flv -vf scale=320:-1 -r 5 rtmp://192.168.2.30:1935/myapp/1 >/opt/log/live1.log 2>&1 & 报错相干，可能短少libx264模块，下载 git clone https://code.videolan.org/vid...进入libx264 执行 ./configure --enable-static --enable-share --disabled-asm 、 make 、 make install进入ffmpeg 执行 ./configure --enable-gpl --enable-libx264 、 make 、 make install 遇到报错 ffmpeg: error while loading shared libraries: libx264.so.161: cannot open shared object file: No such file or directory编辑 Id.so.conf 具体可百度 ...

摘要： 利用 SEI 解决数据流录制回放过程中的音画不同步问题。 文｜即构 Web SDK 开发团队 往年 6 月， ZEGO 即构科技推出了行业内首套数据流录制 PaaS 计划，突破传统录制服务传统，实现 100% 录制还原成果（点击查看计划介绍文章）。 在实现数据流录制回放的过程中，咱们须要将音视频画面和白板画面组合成一个回放画面，模仿成播放器进行同步播放。在此过程中，有时会因为网络抖动等起因，导致录制的音视频呈现卡顿，如果不及时进行解决，将会呈现回放进度和录制过程、音视频画面和其余画面等不同步的景象。  那么，面对这种状况，咱们该如何解决？ 本篇文章咱们将从 SEI 的根底概念登程，联合数据流录制回放的需要和利用场景，带大家理解一下 ZEGO 即构科技 是如何利用 SEI 去解决音画不同步的问题，以及开发过程中可能踩到的坑。 一、什么是 SEI1、SEI 简介SEI，即补充加强信息（Supplemental Enhancement Information），属于码流领域，它提供了向视频码流中退出额定信息的办法，是 H.264/H.265 这些视频压缩规范的个性之一。 在 H264/AVC 编码格局中 NAL uint 中的头部, 有 type 字段指明 NAL uint 的类型, 当 “type = 6” 时，该 NAL uint 携带的信息即为 补充加强信息（SEI）。  在视频内容的生成端传输过程中，都能够插入 SEI 信息。 2、SEI 基本特征并非解码过程的必须选项。也就是说，SEI 对解码过程无间接影响。可能对解码过程（容错、纠错）有帮忙，能够依据 SEI 中插入的信息在解码过程中编写逻辑。集成在视频码流中，从码流中去读取。3、SEI 利用利用 SEI 能够存储数据的个性，还能够实现如下性能： 传递编码器参数传递视频版权信息传递摄像头参数传递内容生成过程中的剪辑事件传递自定义音讯企业能够依据本身业务场景需要，利用 SEI 的个性去实现业务性能。 二、如何应用 SEI 实现业务逻辑上面咱们将以 web端 为切入点，带大家理解一下 SEI 的读取过程及其利用。 1、在视频码流中插入 SEI在实现读取 SEI 之前，必须要在音视频码流中插入 SEI。大家能够理解一下SEI 的插入方式及规定，具体操作步骤可在网络进行搜寻理解。 ...

1. npm装置flv.jsnpm install flv.js 2. 我的项目引入flv.jsimport flvjs from "flv.js"; 3. 简略应用flv.js//template <video id="videoElement" ref="videoElement" controls muted width="100%" height="100%"></video>//scriptdata() { return { flvPlayer: null }},methods: { //创立flv视频实例 createFlv() { let url="http://xxxxxxxx.flv"; if (flvjs.isSupported()) { let videoElement = document.getElementById("videoElement"); this.flvPlayer = flvjs.createPlayer({ type: "flv", isLive: true, hasAudio: false, url }); this.flvPlayer.attachMediaElement(videoElement); this.flvPlayer.load(); } }}4.销毁flv实例//销毁flv实例flv_destroy() { if (this.flvPlayer) { this.flvPlayer.pause(); this.flvPlayer.unload(); this.flvPlayer.detachMediaElement(); this.flvPlayer.destroy(); this.flvPlayer = null; }}

1 rtmp推流 1.1 obs 1.1.1 obs采集摄像头1.2 ffmpeg 1.2.1 ffmpeg读取文件推送2 rtsp推流 2.1 ffmpeg 2.1.1 ffmpeg读取文件推流3 rtmp拉流 3.1 vlc3.2 ffmpeg 3.2.1 ffmpeg拉流保留文件3.3 ffplay3.4 mpv3.5 srs提供的rtmp播放页面（基于adobe flash技术）4 http-flv和https-flv拉流5 HLS(m3u8+ts)拉流 5.1 safari浏览器5.2 vlc，ffmpeg，ffplay6 http-ts拉流7 rtsp拉流8 测试文件下载<!-- more --> (后续会补充其余客户端的应用形式，以及其余的流媒体协定格局。) 流地址举例： 协定地址协定默认端口rtmp推流rtmp://127.0.0.1:1935/live/test1101935rtsp推流rtsp://localhost:5544/live/test110554rtmp拉流rtmp://127.0.0.1:1935/live/test1101935http-flv拉流http://127.0.0.1:8080/live/test110.flv80https-flv拉流https://127.0.0.1:4433/live/test110.flv443http-ts拉流http://127.0.0.1:8082/live/test110.ts80rtsp拉流rtsp://localhost:5544/live/test110554HLS(m3u8+ts)直播拉流http://127.0.0.1:8081/hls/test110/playlist.m3u880HLS(m3u8+ts)录制回放http://127.0.0.1:8081/hls/test110/record.m3u880留神，如果应用默认端口，则地址中的端口能够省略，比方http://127.0.0.1:8080/live/test110.flv变成http://127.0.0.1/live/test110.flv 1 rtmp推流1.1 obs上官网（ https://obsproject.com/ ）下载对应操作系统的二进制安装包，并装置。 本文以macos零碎的obs 25.0.8版本做演示，其余零碎和obs版本都差不多。 1.1.1 obs采集摄像头关上obs，点击右下角的设置按钮在弹出的窗口中，点击左侧的推流按钮右侧呈现推流详情页： 服务下拉框不必管，放弃自定义...服务器输入框中填写 rtmp://127.0.0.1:1935/live串流密钥输入框中填写 test110 tips，串流密钥默认是不明文显示输出的字符，如果怕输入，能够点击右侧的显示按钮点击右下角的确认按钮，实现设置回到主界面，点击右下角开始推流按钮底部的状态栏显示LIVE，fps，kb/s等信息，别离示意推流时长，帧率，码率，阐明推流胜利obs除了能采集摄像头作为输出流，还提供采集桌面，音视频文件等性能。而且提供了很多参数都能够在图形化界面上配置。 1.2 ffmpeg1.2.1 ffmpeg读取文件推送（如何装置ffmpeg见文末） 这里分两种状况，一种是flv、mp4文件中的音频自身就是AAC格局，视频自身就是H264或H265格局，流媒体服务器自身就反对，那么ffmpeg不须要对音视频从新编码： $ffmpeg -re -stream_loop -1 -i demo.flv -c:a copy -c:v copy -f flv rtmp://127.0.0.1:1935/live/test110对其中的参数做些阐明： -re示意按文件中音视频流的码率推送，如果不加，就是不管制发送速度，一次性发送给服务端了，不合乎直播的特点-stream_loop -1示意文件完结后，持续从文件头部循环推送的次数，-1示意有限循环-i示意输出文件-c:a copy示意音频编码格局不变-c:v copy示意视频编码格局不变-f flv推送rtmp流须要指定格局为flv最初是rtmp推流地址如果是mp4文件，将demo.flv换成mp4文件名即可，比方demo.mp4 ...

flv.js系列三：FLV格局解析flv.js中音视频额分离器是FLVDemuxer, 看懂这里的代码之前先要理解FLV文件的数据格式及JS中如何读取指定二进制数据。 1 FLV文件格式FLV是Flash Video的简称，是Adobe公司推出的流媒体文件格式，咱们上面对数据的操作都基于FLV标准文档。整体构造如下图所示，由FLVHeader和FLVBody组成。 1.1 FLVHeaderFLVHeader是固定的9字节，其定义如下图： 对上图做一些阐明，Type列定义该字段的长度，UI8代表8位无符号整型，一个字节。UI32代表32位无符号整型，四个字节。UB[5]代表一个字节的5位，UB[1]代表一个字节的1位。 第一个字节固定是 0x46 示意 F第二个字节固定是 0x4c 示意 L第三个字节固定是 0x56 示意 V第四个字节 指定FLV格局版本第五个字节中 TypeFlagsAudio 示意是否有音频,TypeFlagsVideo 示意是否有视频最初四个字节示意 FLVHeader的长度 固定是数字 91.2 FLVBody与TagFLVBody就是由多个Previous TagSize和Tag组成，其中Previous TagSize占4个字节，而且第一个Previous TagSize的值为0。接下来咱们看Tag的构造，Tag由Tag Header和Tag Data组成，其定义如下： 能够看到Tag Header的长度是11个字节。 2 二进制数据读取API咱们须要把ArrayBuffer类型的数据依照下面的FLV格局进行解析，须要借助于DateView视图类来实现二进制数据的读取和写入，上面看咱们会遇到的API。 2.1 构造函数来自MDN： new DataView(buffer [, byteOffset [, byteLength]])。 参数阐明：buffer现有对象ArrayBuffer或SharedArrayBuffer用作反对新DataView对象的存储。byteOffset 可选的到上述缓冲区中第一个字节的偏移量（以字节为单位），以供新视图援用。如果未指定，则缓冲区视图从第一个字节开始。byteLength 可选的字节数组中的元素数。如果未指定，则视图的长度将与缓冲区的长度匹配。 demo: // create an ArrayBuffer with a size in bytesconst buffer = new ArrayBuffer(16);// Create a couple of viewsconst view1 = new DataView(buffer);const view2 = new DataView(buffer, 12, 4); //from byte 12 for the next 4 bytesview1.setInt8(12, 42); // put 42 in slot 12console.log(view2.getInt8(0));// expected output: 422.2 获取数据的APIdataview.getUint8(byteOffset)参数byteOffset，从视图开始处读取数据的偏移量（以字节为单位）。返回值，一个无符号的8位整数。 ...