/**
* 【浏览器视频特效】
* 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
<html>
<head>
<title>WebRTC capture video and audio</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<video autoplay playsinline id='player' class="contrast"></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src='./js/filter.js'></script>
</body>
</html>
