Video tag + Canvas

Canvas screenshot mainly relies on its drawImage method and only supports passing ing, video(image, canvas or video).

  let video = this.$refs.videoPlay / / video element
  let canvas = document.createElement('canvas') // Create the canvas tag
  let w = window.innerWidth
  let h = window.innerWidth / 16 * 9 // Calculate the aspect ratio
  canvas.width = w
  canvas.height = h // Set width and height
  const ctx = canvas.getContext('2d') // Create canvas
  ctx.drawImage(video, 0.0, w, h)
  ctx.drawImage(video, 0.0, w, h) / / screenshots
  let imgUrl = canvas.toDataURL('image/png') // Get the image base64

  // base64 transfers images
  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})
  }
Copy the code

The pit of found

  • Since it is only supported by incoming ING, video(image, canvas or video), so usedvue-video-playerWhen the plugin is used, some formats of streams are not played based on video, so the above screenshots do not exist. See DOM elements for details.

Ali Cloud Web player SDK supports Flash and Html5 two playback technologies.

  • This is going a little too far, but the player itself supports screenshots, documentation is robust leave a portal,
  • But there is one sentence in particularFlash is enabled with the snapshot property. If snapshot:true is set, RTMP streams do not support snapshots.It does not support RTMP streaming video screenshots

LivePlayer

The document addressIn fact, it’s just so-so.

Introduction (copied from the document)

  1. H5 live/on-demand player, simple to use, powerful, free to use
  2. It should also be based on video.js, although it is not stated, but the videoJS thrown from integration must be imported, so there is no need to explain anything.
  3. The author has a group, at the bottom of the document, the reply depends on the mood (is a joke)

function

  1. Support MP4 playback
  2. Support M3U8 /HLS playback;
  3. Support HTTP-FLV/WS-FLV playback;
  4. Support RTMP playback;
  5. Support live broadcast and on-demand broadcast;
  6. Player snapshot screenshot support;
  7. Support on-demand multi definition playback;
  8. Support full screen or proportional display;
  9. Built-in Flash supports extreme speed and smooth mode;
  10. The built-in Flash supports HTTP-FLV playback.
  11. Automatic detection of Internet Explorer compatible playback;
  12. Support custom stacking layer; v1.7.9

Integration (mainly VUE)

  • First download the plug-in
    1. npm install @liveqing/liveplayer
    2. NPM install [email protected]
  • File configuration actually gives you three ways
    1. Copy the required files to the project static folder and import them in indexliveplayer-lib.min.js
    2. Build your own project scaffolding edit webpack.config.js 
      const CopyWebpackPlugin = require('copy-webpack-plugin'); // Don't forget to introduce...... // 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/'} ]), ......Copy the code
    3. Vue – cli editor 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/'},
        ])
      ]
    }
  }
Copy the code
    4. In index.html<script src="js/liveplayer-lib.min.js"></script>The plugin moves the file below the JS folder.

use

  1. Vue components 
    <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> ...... Import LivePlayer from '@liveqing/ LivePlayer '// import components...... Components: {// Register component LivePlayer}......Copy the code

Some of the pit

  1. Vue’s method of listening is not throughaddEventListenerInstead, the component registers the corresponding function listening as@snapInside="addScreenshots", listens for an internal screenshot event and returns a Base64 string.
  2. If the component container is a popover, there will be a large number of console warnings after closing the popover (actually using vue-video-player, it can be resolved by setting the ref to the player component to obtain the element and executing reload(). There are many methods that are not documented on the player Ref prototype, so if you have any problems, take a look

ckplayer

  • The document address
  • But it doesn’t feel very serious. Also support screenshots click in to search for screenshots keyword
  • Since the above LivePlayer has solved the problem, there will be no more attempts on this.
  • This may be a good choice for those who need video inserts.