第七篇 WebRTC学习四：WebRTC常规视觉滤镜

程序员阿灿

于 2024-10-08 09:25:33 发布

阅读量933

点赞数 38

分类专栏：音视频文章标签： webrtc 学习

本文链接：https://blog.csdn.net/wel_006/article/details/142747364

版权

音视频专栏收录该内容

9 篇文章 1 订阅

订阅专栏

系列文章目录

第一篇基于SRS 的 WebRTC 环境搭建
第二篇基于SRS 实现RTSP接入与WebRTC播放
第三篇 centos下基于ZLMediaKit 的WebRTC 环境搭建
第四篇 WebRTC学习一：获取音频和视频设备
第五篇 WebRTC学习二：WebRTC音视频数据采集
第六篇 WebRTC学习三：WebRTC音视频约束
第七篇 WebRTC学习四：WebRTC常规视觉滤镜

前言

在实现实时媒体传输的过程中，视觉效果对于提升用户体验至关重要。通过常规视觉滤镜，我们可以对视频流进行各种效果处理，比如模糊、灰度、亮度调整等。通过应用滤镜，可以增强视频流的视觉效果，使视频内容更加吸引人,不同的滤镜可以传达不同的情感和氛围。例如，使用灰度滤镜可以营造一种复古的氛围，而模糊滤镜则可以用于隐私保护,深褐色滤镜可以营造一种怀旧的感觉，而高饱和度滤镜则可以增强视频的活力和色彩。这些滤镜的应用使得 WebRTC 在各种实时音视频通信场景中都能发挥出色的表现，为用户和开发者提供了丰富的选择和灵活的解决方案。本文将详细介绍 WebRTC 中常规视觉滤镜的应用，包含滤镜的种类、使用示例及演示效果。

一、常见视觉滤镜

以下是一些常规视觉滤镜的类型及其含义：

滤镜类型	含义
none	无滤镜，自然显示
blur	模糊效果，使图像变得模糊
grayscale	灰度效果，将图像转换为黑白色调
brightness	亮度调整，增加或减少图像的亮度
contrast	对比度调整，增强图像之间的对比度
saturate	饱和度调整，增加或减少颜色的饱和度
sepia	深褐色效果，用于给图像添加复古效果
invert	反转效果，颜色反转形成与原色相对的色调
drop-shadow	添加阴影效果，为图像创建立体感
hue-rotate	色相旋转，改变图像的色彩饱和度

二、完整示例代码

下面是一个简易的 WebRTC 示例代码，展示如何应用常规视觉滤镜。包括 HTML 和 JavaScript 代码：

1.HTML 代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC capture 视频特效</title>
    <style>
        .none {
            -webkit-filter:none;
        }
        .blur {
            -webkit-filter: blur(3px);
        }
        .grayscale {
            -webkit-filter: grayscale(1);
        }
        .invert {
            -webkit-filter: invert(1);
        }
        .sepia {
            -webkit-filter: sepia(1);
        }
        
        /* 亮度调整 */
        .brightness {
            -webkit-filter: brightness(1.5); /* 增加亮度 */
        }

        /* 对比度调整 */
        .contrast {
            -webkit-filter: contrast(2); /* 提高对比度 */
        }

        /* 色相旋转 */
        .hue-rotate {
            -webkit-filter: hue-rotate(90deg); /* 旋转色相 */
        }

        /* 饱和度调整 */
        .saturate {
            -webkit-filter: saturate(2); /* 增加饱和度 */
        }

        /* 透明度调整 */
        .opacity {
            -webkit-filter: opacity(0.5); /* 降低透明度 */
        }

        /* Drop shadow effects */
        .drop-shadow {
            -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); /* x-offset y-offset blur color */
            /* filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); */
        }

        /* 组合效果示例 */
        .combined {
            -webkit-filter: grayscale(1) brightness(0.5) sepia(1); /* 灰度、降低亮度、深褐色组合效果 */
        }

    </style>
</head>
<body>
    <div>
    <label>audio Source:</label>
    <select id="audioSource"></select>
    </div>

    <div>
    <label>audio Output:</label>
    <select id="audioOutput"></select>
    </div>

    <div>
    <label>video Source:</label>
    <select id="videoSource"></select>
    </div>

    <div>
        <label>Filter:</label>
        <select id="filter">
            <option value="none">None</option>
            <option value="blur">Blur</option>
            <option value="grayscale">Grayscale</option>
            <option value="invert">Invert</option>
            <option value="sepia">sepia</option>
            <option value="brightness">brightness</option>
            <option value="contrast">contrast</option>
            <option value="hue-rotate">hue-rotate</option>
            <option value="saturate">saturate</option>
            <option value="opacity">opacity</option>
            <option value="drop-shadow">drop-shadow</option>
            <option value="combined">combined</option>
        </select>
        </div>
    
    <video autoplay playsinline id="player"></video>
    <script src="../adapter.js"></script>
    <script src="./js/client.js"></script>
</body>
</html>

2.JavaScript 代码

代码如下（示例）：

'use strict'

var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');
var filterSelect = document.querySelector('select#filter');
var videoplay = document.querySelector('video#player');

function gotDevices(deviceInfos){
    deviceInfos.forEach(function(deviceinfo) {
        
        var option = document.createElement('option');
        option.text = deviceinfo.label;
        option.value = deviceinfo.deviceId;

        if (deviceinfo.kind === "audioinput"){
            audioSource.appendChild(option);
        }else if (deviceinfo.kind === "audiooutput"){
            audioOutput.appendChild(option);
        }else if (deviceinfo.kind === "videoinput"){
            videoSource.appendChild(option);
        }
    });
}

function gotMediaStream(stream){
    videoplay.srcObject = stream;
    return navigator.mediaDevices.enumerateDevices();
}

function handleError(err){
    console.log('getUserMedia error:', err);
}

function start() {
    if (!navigator.mediaDevices ||
        !navigator.mediaDevices.getUserMedia){
            console.log('getUserMedia is not supported!');
        }
        else{
            var deviceId = videoSource.value;
            var constraints = {
                video:{
                    width:640,
                    height:480,
                    frameRate:30,
                    facingMode:"environment",
                    deviceId : deviceId ? deviceId : undefined
                },
                audio: {
                    noiseSuppression : true,
                    echoCancellation : true
                },
                
            }
            navigator.mediaDevices.getUserMedia(constraints)
            .then(gotMediaStream)
            .then(gotDevices)
            .catch(handleError);
        }
}

start();

videoSource.onchange = start;

filterSelect.onchange = function(){
    videoplay.className = filterSelect.value;
}

三、运行结果

将上述 HTML 和 JavaScript 代码分别存储为 index.html 和 js/client.js 文件。在浏览器中打开 index.html 文件。此时，您的浏览器会请求访问您的摄像头，允许访问后，视频流将会显示在页面上。您可以通过下拉菜单选择不同的视觉滤镜，并即时看到效果。下图是我的浏览器上运行反转（invert）显示的效果。
在这里插入图片描述