WebRTC音视频数据采集六、第六节视频渲染特效

偏执的太偏执、 2023-02-23 03:41 3阅读 0赞

今天我们介绍一下如何对获取到的视频做一些特效

这部分知识实际上是属于渲染部分的范畴

我们要在浏览器中做特效，我们要知道几个基本的概念

# CSS filter,-webkit-filter/filter #

在不同的浏览器中使用的filter还不一样

# 如何将video与 filter关联 #

# OpenGL/Metal/... #

我们通过CSS调用，它最终在浏览器的底层调用的还是OpenGL/Metal/...这种基础的图形绘制库 ，通过GPU进行绘制

具体支持哪些特效，我们下面罗列一下常见的

# 支持的特效种类 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

下面我们实际练习一下

index.html

<html>
      <head>
        <title>捕获音视频数据 WebRTC capture video and audio</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);
    			}
    
    		</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>
    			</select>
    		</div>
        
        <video autoplay playsinlin id="player"></video>
        
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="./js/client.js"></script>
      </body>
    </html>

client.js

'use strict'
    
    var audioSource = document.querySelector('select#audioSource');
    var audioOutput = document.querySelector('select#audioOutput');
    var videoSource = document.querySelector('select#videoSource');
    // 获取video标签
    var videoplay = document.querySelector('video#player');
    
    //filter 特效选择
    var filtersSelect = document.querySelector('select#filter');
    
    // deviceInfos是设备信息的数组
    function gotDevices(deviceInfos){
      // 遍历设备信息数组， 函数里面也有个参数是每一项的deviceinfo， 这样我们就拿到每个设备的信息了
    	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);
    		}
    	})
    }
    
    // 获取到流做什么， 在gotMediaStream方面里面我们要传人一个参数，也就是流，
    // 这个流里面实际上包含了音频轨和视频轨，因为我们通过constraints设置了要采集视频和音频
    // 我们直接吧这个流赋值给HTML中赋值的video标签
    // 当时拿到这个流了，说明用户已经同意去访问音视频设备了
    function gotMediaStream(stream){  
      videoplay.srcObject = stream; // 指定数据源来自stream,这样视频标签采集到这个数据之后就可以将视频和音频播放出来
      // 当我们采集到音视频的数据之后，我们返回一个Promise
      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{
      // 获取到deviceId
      var deviceId = videoSource.value; 
      // 这里是约束参数，正常情况下我们只需要是否使用视频是否使用音频
      // 对于视频就可以按我们刚才所说的做一些限制
      var constraints = { // 表示同时采集视频金和音频
        video : {
          width: 640,	// 宽带
          height: 480,  // 高度
          frameRate:15, // 帧率
          facingMode: 'enviroment', //  设置为后置摄像头
          deviceId : deviceId ? deviceId : undefined // 如果deviceId不为空直接设置值，如果为空就是undefined
        }, 
        audio : {
          noiseSuppression: true, // 降噪
          echoCancellation: true // 回音消除
        },
      }
      //  从指定的设备中去采集数据
      navigator.mediaDevices.getUserMedia(constraints)
        .then(gotMediaStream)  // 使用Promise串联的方式，获取流成功了
        .then(gotDevices)
        .catch(handleError);
    }
    }
    
    start();
    
    // 当我选择摄像头的时候，他可以触发一个事件，
    // 当我调用start之后我要改变constraints
    videoSource.onchange = start;
    
    // 选择特效的方法
    filtersSelect.onchange = function(){
    	videoplay.className = filtersSelect.value;
    }

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

模糊

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2][]

灰度

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3][]

翻转底片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 4][]

褐色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200704214302232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020070421551926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200704215544776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200704215620770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200704215705510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200704215731375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70