四、视频特效

/**
 * 【浏览器视频特效】
 * 1.CSS filter , Google，Firefox 使用 -webkit-filter
 *                IE              使用 filter
 * 2.如何将video与filter相关联
 * 3.OpenGL/Metal 通过浏览器渲染，调用的底层还是OpenGL或Metal基础的图形绘制库，通过GPU绘制
 * 
 * filter 支持的特效种类
 * 
 * 特效          说明
 * grayscale     灰度
 * sepia         褐色
 * saturate      饱和度
 * hue-rotate    色相旋转
 * opacity       透明度
 * brightness    亮度
 * contrast      对比度
 * blur          模糊
 * drop-shadow   阴影
 */

let videoPlayer = document.querySelector('video#player');

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

let start = (deviceId) => {
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        console.log('getUserMedia is not supported!');
    }else {
        // 同时有视频数据和音频数据
        let constrants = {
            video: {
                width: {
                    min: 200,
                    max: 800
                },
                height: 100,
                frameRate: {
                    min: 1,
                    max: 50
                },
                facingMode: 'environment',
                resizeMode: 'none'
            },
            audio: {
                noiseSuppression: true,
                echoCancellation: true
            },
            deviceId: deviceId
        }
        navigator.mediaDevices.getUserMedia(constrants)
        .then(gotMediaStream)
        .catch(handleError)
    }
}

start()

// 选择不同filter参数时触发函数
let onChange = () => {
    videoPlayer.className = 'contrast' // 选择的filter名字
}

通过改变videoplay的class，更改样式

.blur {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}
.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);
}

给video视频设置不同的filter