4.7　视频滤镜

视频滤镜主要是给视频加上特殊效果，如模糊、灰度、反转等。WebRTC的视频滤镜是通过设置video标签的fiter属性来达到不同的滤镜效果的。常用属性如下所示。

·none：没有滤镜。

·blur：模糊。

·grayscale：灰度。

·invert：反转。

·sepia：深褐色。

接下来通过一个示例来展示滤镜的使用效果。具体步骤如下所示。

步骤1　打开h5-samples工程下的styles/css目录，添加video-filter.scss样式文件，添加上述几种滤镜属性。

---

//没有滤镜
.none {
    -webkit-filter: none;
    filter: none;
}
//模糊
.blur {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}
//灰度
.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
//反转
.invert {
    -webkit-filter: invert(1);
    filter: invert(1);
}
//深褐色
.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

---

步骤2　打开src目录并添加VideoFilter.jsx文件。添加约束条件，启用视频并禁用音频，然后根据约束获取视频。获取视频后将视频渲染至视频对象上。大致处理代码如下所示。

---

const constraints = {
    //禁用音频
    audio: false,
    //启用视频
    video: true
};

//根据约束获取视频流
navigator.mediaDevices.getUserMedia(constraints)

...

//获取视频成功
handleSuccess = (stream) => {
    ...
    //将视频源指定为视频流
    video.srcObject = stream;
}

---

步骤3　添加下拉列表框，根据选中的值来设置video的样式，从而达到设置video的滤镜的目的。处理代码如下所示。

---

handleChange = (value) => {
    //设置滤镜
    video.className = value;
}

---

步骤4　将video-filter.scss文件引入VideoFilter.jsx里，然后在src目录下的App.jsx及Samples.jsx里加上链接及路由绑定，这可参考第3章。完整的代码如下所示。

---

import React from "react";
import { Select } from "antd";
import '../styles/css/video-filter.scss';

const { Option } = Select;

//视频
let video;

/**
 * 视频滤镜示例
 */
class VideoFilter extends React.Component {
    componentDidMount() {
        //获取video对象
        video = this.refs['video'];
        //约束条件
        const constraints = {
            //禁用音频
            audio: false,
            //启用视频
            video: true
        };
        //根据约束获取视频流

        navigator.mediaDevices.getUserMedia(constraints).then(this.handleSuccess).
catch(this.handleError);
    }

    //获取视频成功
    handleSuccess = (stream) => {
        window.stream = stream;
        //将视频源指定为视频流
        video.srcObject = stream;
    }

    //错误处理
    handleError(error) {
        console.log('navigator.MediaDevices.getUserMedia error: ', error.message, 
error.name);
    }

    //下拉列表框中的选项改变
    handleChange = (value) => {
        console.log(`selected ${value}`);
        //设置滤镜
        video.className = value;
    }

    render() {

        return (
            <div className="container">
                <h1>
                    <span>视频滤镜示例</span>
                </h1>
                {/* 视频渲染 */}
                <video ref='video' playsInline autoPlay></video>
                {/* 滤镜属性选择 */}
                <Select defaultValue="none" style={{ width: '100px' }} onChange= 
{this.handleChange}>
                    <Option value="none">没有滤镜</Option>
                    <Option value="blur">模糊</Option>
                    <Option value="grayscale">灰度</Option>
                    <Option value="invert">反转</Option>
                    <Option value="sepia">深褐色</Option>
                </Select>
            </div>
        );
    }
}
//导出组件
export default VideoFilter;

---

运行示例工程，打开“视频滤镜”示例，选择不同的滤镜属性，例如模糊效果，如图4-7所示。

图4-7　视频滤镜效果（模糊）