五、从视频中截取图片

let videoPlayer = document.querySelector('video#player');
let snapshot = document.querySelector('button#snapshot');
let picture = document.querySelector('canvas#picture');
picture.width = 320;
picture.height = 240;

let gotMediaStream = (stream) => {
    // stream 流里面包含 视频轨和音频轨
    videoPlayer.srcObject = stream
}
let handleError = (err) => {
    console.log(`getUserMedia errpr:${err}`)
}

let start = () => {
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        console.log('getUserMedia is not supported!');
    }else {
        // 同时有视频数据和音频数据
        let constrants = {
            video: true,
            audio: true
        }
        navigator.mediaDevices.getUserMedia(constrants)
        .then(gotMediaStream)
        .catch(handleError)
    }
}

// 点击按钮 绘制
snapshot.onclick = () => {
    picture.getContext('2d').drawImage(videoPlayer, 0, 0, picture.width, picture.height); // 0,0 起始点
}

start()

    
        
        
    
    
        
        点击生成图片
        
        
        
    

生成的canvas 同样可以添加 filter特效（此时页面上生成的canvas是带有滤镜的，但保存下来的图片是没有滤镜效果的，想要改变保存图片的滤镜效果，可以对canvas.data进行数据修改）

参考文章：https://www.kancloud.cn/digest/canvas-programming/154008

.blur {
    filter: blur(1px);
    -webkit-filter: blur(1px);
}
.contrast {
    filter: contrast(1);
    -webkit-filter: contrast(1);
}
.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
.inver {
    filter: invert(1);
    -webkit-filter: invert(1);
}
.sepia {
    filter: sepia(1);
    -webkit-filter: sepia(1);
}