原生video，rtmp，rtmp 视频流截图

video标签 + canvas

canvas截图主要依赖于其drawImage方法,只支持传入ing，video(图像、画布或视频)

  let video = this.$refs.videoPlay // video标签
  let canvas = document.createElement('canvas') // 创建canvas标签
  let w = window.innerWidth
  let h = window.innerWidth / 16 * 9 // 计算宽高比
  canvas.width = w
  canvas.height = h // 设置宽高
  const ctx = canvas.getContext('2d') // 创建画布
  ctx.drawImage(video, 0, 0, w, h)
  ctx.drawImage(video, 0, 0, w, h) // 截图
  let imgUrl = canvas.toDataURL('image/png') // 获取图片base64

  // base64 转图片
  getImage(dataUrl, fileName) {
    let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
    while(n--){
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], fileName, {type:mime})
  }

发现的坑

由于其是只支持传入ing，video(图像、画布或视频)，所以使用 vue-video-player 插件时某些格式的流不是基于video进行播放也就不存在上述的截图，具体可查看 dom 元素。

阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术。

这个扯的有点远了，但是播放器本身是支持截图的，文档很健全留个传送门,
但是其特别标注了一句话Flash通过snapshot属性开启，设置snapshot:true，RTMP流不支持截图。 其不支持rtmp的流视频截图

LivePlayer

文档地址,其实写的吧一般般（能跑就行要啥自行车）

简介（照搬文档了）

H5直播/点播播放器，使用简单，功能强大，免费使用
应该也是基于video.js的，虽然没有说明，但是从集成时抛出的videojs必须引入，也就不需要在解释啥了。
作者有群，在文档下方，回复看心情（算是吐槽了）

功能

支持MP4播放
支持m3u8/HLS播放;
支持HTTP-FLV/WS-FLV播放;
支持RTMP播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自带的flash支持极速和流畅模式;
自带的flash支持HTTP-FLV播放;
自动检测IE浏览器兼容播放;
支持自定义叠加层;v1.7.9

集成（主要是vue）

首先下载插件
1. npm install @liveqing/liveplayer
2. npm install copy-webpack-plugin@4.6.0

文件配置其实算是给了三种方式

将所需文件复制到项目静态文件夹，然后在index引入 liveplayer-lib.min.js

自行搭建的项目脚手架编辑 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin'); // 不要忘了引入

......
    // copy js lib and swf files to dist dir
    new CopyWebpackPlugin([
        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
    ]),
......

vue-cli 编辑 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    configureWebpack: {
      plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
            { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}
            { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
        ])
      ]
    }
  }

在index.html 中引入 <script src="js/liveplayer-lib.min.js"></script> 上边通过插件把文件移动到了js文件夹下边。

使用

vue组件

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>
......

import LivePlayer from '@liveqing/liveplayer' // 引入组件

......
  components: { // 注册组件
    LivePlayer
  }
......

一些坑

vue的方法监听不是通过addEventListener,而是组件注册对应函数监听如@snapInside="addScreenshots",监听内部截图事件，返回base64字符串。
如果组件容器是一个弹窗，那么关闭弹窗后会有大量的控制台警告(其实用过vue-video-player，能想到是播放器没有释放，官方说给播放器url置空可以解决)，通过给播放器组件设置ref获取元素执行 reload()，方法可解决，播放器ref原型上有很多方法文档未标明，遇到问题不妨去看下

ckplayer

文档地址
但是感觉不太正经的样子。也是支持截图的点击进去后搜索截图关键字
由于上边LivePlayer已经解决了问题，这个就没多做尝试了，
有需要视频插入广告的这个可能是个不错的选择。