如何在正在播放HTML5实时视频中抓取一个图片并保存到本地

h5stream 提供了抓图功能，但该抓图是在h5stream 服务端进行，并且为了不影响h5stream 的运行性能，h5s只读取了I帧，所以有一定的时延，能不能在浏览器端直接抓一个png图片么，答案是可以的，新的版本已经把该功能集成到了h5sconsole, 并在h5splayerhelper.js 中加入了该函数。

可以参考如下代码, 也可以参考h5sconsole 的代码 https://github.com/linkingvision/h5sconsole/blob/master/src/components/widgets/liveplayer.vue 

function H5sSnapshot(vid, fileName)
{
    var video = vid;
    var w = video.videoWidth;//video.videoWidth * scaleFactor;
    var h = video.videoHeight;//video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, w, h);
    var MIME_TYPE = "image/png";
    var imgURL = canvas.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);           
}