panoramic-player v5.0.3

panoramic-player

一个Vue全景视频播放插件（支持flv/hls）

A Vue panoramic video playback plug-in (support flv/hls)

• 支持PC端和H5移动端播放flv/m3u8视频地址；
• 全景视频支持移动端单手滑动，双指缩放；
• 全景视频陀螺仪功能iOS13 +需要用户授权，并且要在https环境下测试 ；

安装使用（install panoramic-player）

npm i panoramic-player -S
or 
yarn add panoramic-player -S

1.注册组件

import PanoramicPlayer from 'panoramic-player'

Vue.use(PanoramicPlayer)

2.使用组件

配置传参

• flv_src：.flv格式摄像头地址
• hls_src：.m3u8格式摄像头地址
• open_panoramic：开启全景视频渲染模式（默认false）
• onlyId: 组件唯一ID【v-for时区分组件】
• h265_coding: 开启flv h265解码
• isLive: 视频是否为直播
• duration: 视频时长 - 单位s【isLive=false 非直播必传】
• progressTime：初始化控制条显示时长【处理拖拽更新录像】
• simpleMode：简单模式【隐藏控制条部分功能】
• hlsLoadTimeout：设置ios直播延时播放等待时间(s)【内部特殊需求配置】
• hideDuration：隐藏录像播放时间

回调函数

• @getCurrentDuration：获取当前录像播放时间（单位：s）
• @listenFullScreen：监听视频全屏状态回调
• @listenPlayFinish：监听视频录像播放完毕回调
• @listenRefreshVideo：监听视频触发重连回调

简单用法

<panoramic-player 
    flv_src="xxx.flv" 
    hls_src="xxx.m3u8"
    :open_panoramic="true"
/>

v-for遍历添加onlyId

可以通过document.getElementById(onlyId)获取当前对应的video标签

<div v-for="(item,index) in list" :key="index">
    <panoramic-player 
        :onlyId="`PanoramicPlayer${index}`"
        flv_src="xxx.flv" 
        hls_src="xxx.m3u8"
    />
</div>

本地测试 （local test）

git clone https://gitee.com/taco-gigigi/panoramic-player.git

cd ./panoramic-player

yarn install
or
npm install 

npm run serve

flv.js延迟优化

1.FLV传输过程

1. 主播端在采集到一段时间的音视频原数据后，因为音视频原数据庞大需要先压缩数据：
   • 通过H264视频编码压缩数据数据
   • 通过PCM音频编码压缩音频AAC数据
2. 压缩完后再通过FLV容器格式封装压缩后的数据，封装成一个FLV TAG
3. 再把FLV TAG通过RTMP协议推流到音视频服务器，音视频服务器再从RTMP协议里解析出FLV TAG。
4. 音视频服务器再通过HTTP协议通过和浏览器建立的长链接流式把FLV TAG传给浏览器。
5. flv.js 获取FLV TAG后解析出压缩后的音视频数据喂给Video播放。

2.如何优化

• 主播端采集时收集了一段时间的音视频原数据，它专业的叫法是GOP。缩短这个收集时间(也就是减少GOP长度)可以优化延迟，但这样做的坏处是导致视频压缩率不高，传输效率低。
• 关闭音视频服务器的I桢缓存可以优化延迟，坏处是用户看到直播首屏的时间变大。
• 减少音视频服务器的buffer可以优化延迟，坏处是音视频服务器处理效率降低。
• 减少浏览器端flv.js的buffer可以优化延迟，坏处是浏览器端处理效率降低。
• 浏览器端开启flv.js的Worker，多线程运行flv.js提升解析速度可以优化延迟，这样做的flv.js配置代码是：

config = {
          enableWorker: true,
          enableStashBuffer: false,
          stashInitialSize: 128,// 减少首桢显示等待时长
}

HTTP 1.x 问题

A - 对同源连接的并发个数有限制

HTTP 1.x 对同源的http-flv连接的并发个数有限制，典型值是6，如chrome，由于项目的需求，需要在浏览器端同时打开超过6路的视频流。

解决方案：

• nginx 配置http2【必须在https环境基础上配置】
• 使用ws-flv

B - http1.x线头阻塞

当同时打开多个视频时，后面请求的地址必须等待前面的请求响应完成后才能继续交互【情况：前面请求的视频拉流异常或设备已关闭】。

解决方案：

nginx 配置http2

http2机制是并行处理请求，http1.x是串行化处理请求

所以http2不会造成线头阻塞

C - nginx配置http2

server{
    listen 443 ssl http2; # 配置http 2.0
    server_name www.live-testing.com; # 域名

    ssl_certificate      H:/nginx-1.18.0/pem/server.crt;
    ssl_certificate_key  H:/nginx-1.18.0/pem/server.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
    ssl_prefer_server_ciphers on;
    location / {
        proxy_pass 流媒体服务器地址;
    }

}

运行结果：

更新日志 （update log）

v4.x

2021-9-8 (v4.6.x)
-> 修复iphone 7 plus微信浏览器无法播放直播视频
-> 完善录播视频功能

2021-8-2 (v4.5.x)
-> 新增播放录播视频功能

2021-7-13 (v4.4.x)
-> flv优化重连机制，当触发重连使用canvas显示视频最后一帧画面，重连成功后显示视频（避免黑屏/闪屏）

2021-6-29 (v4.3.x)
-> flv-video组件网络波动指定次数自动重连
-> flv-video捕获报错超过限制自动重连
-> flv-video检测流量为0KPbs，则自动重连5次，第六次关闭视频

2021-6-28 (v4.2.4)
-> flv-video组件添加处理网络波动，自动重连处理

2021-6-8 (v4.1.0)
-> flv支持h265视频编码格式播放

2021-6-2
-> 优化直播视频延迟（主动赶帧）
-> 更新处理多于6个视频并发个数的解决方案
-> 优化视频底部控制条功能

v3.x

v3.1.2
-> 添加兼容 iOS13+ 全景视频陀螺仪代码（用户授权）
-> 修复本地测试Demo运行异常

v3.1.1
-> 全景视频组件销毁前关闭视频推流
-> 修复全景视频PC端拖拽超出容器松开鼠标Bug

v3.1.0
-> 修复v-for遍历问题，添加onlyId唯一标识
-> 修复全景contro bar、设置固定宽高时渲染的一些样式错误问题

问题整理

A - iphone 7plus 微信浏览器 System: iOS14.6, wechat8.0.2 m3u8视频无法播放

* 问题：使用自定义video-controler组件不能正常播放
* 处理：使用video自带controls控制条播放

B - flv直播抛出异常视频自动暂停【重连或刷新后恢复】

flv.js 11 bytes unconsumed data remain when flush buffer, dropped
译：[IOController] > 11 字节未使用的数据在刷新缓冲区时剩余，丢弃

处理方案：
1. 在executeSkipping计时器方法中，监听flv.js KBps回调。
   各自缓存当前时间戳进行对比，若差距>10s & 播放状态为暂停则重连