2.3、视频采集(二):分辨率、摄像头切换、帧率、滤镜

 

文章导读:本节讲解视频采集的配置参数以及视频滤镜的使用。推荐阅读方式:理解+实操。

  本节继上一节的内容。上节我们通过API“getUserMedia(mediaStreamConstraints)”实现了初步的音视频数据采集和播放功能,本节我们来详细的讲解其参数配置——mediaStreamConstraints。mediaStreamConstraints的对象结构如下所示。

dictionary MediaStreamConstraints {
    (boolean or MediaTrackConstraints) video = true;
    (boolean or MediaTrackConstraints) audio = true;
 }

从上述代码中我们知道,MediaStreamConstraints 对象中video和audio两个属性至少有一个,即不能音频和视频都不采集; video 和 audio参数既可以是简单的boolean类型,又可以是对象类型,简单的配置可以直接传一个true/false 的值即可,但实际的项目开发中,需要更详细的配置,于是本节我们看看其详细配置都可以配置哪些,代码如下。

const MediaStreamConstraints = {
    video:{
        width:1280,
        height:720,
        facingMode:"environment",
        frameRate:30,
     deviceId:"",        resizeMode:"",
    }
}

 

 属性解释:

①、width、height 表示采集视频的宽和高。number类型,通过这两个属性可以调节分辨率。

②、facingMode 表示所选摄像头。string类型,可选的值:user(前置摄像头)、environment(后置摄像头)、left(前置左侧摄像头)、right(前置右置摄像头),在手机中可以通过设置该参数来切换摄像头。

③、frameRate 表示帧率。number类型或者对象类型,即每秒采集的多少帧,帧率越高视频越流畅,当然数据量也越大;除了传入一个数值之外,还可以出入一个对象,如frameRate:{max:30,min:15},表示限定了视频采集的最低最高帧率,由系统根据情况自动来调整。

④、deviceId表示即指定采集设备的id。string类型,即通过“navigator.mediaDevices.enumerateDevices()”列举的设备ID(deviceId),通过该参数可以按需选择自己的。

⑤、resizeMode是否启用裁剪,如果设置为“none”则禁用裁剪,通常情况下可以不启用裁剪,有兴趣的读者可以自行查阅资料。

  可能有读者有疑问,facingMode可以选择摄像头,通过deviceId也可以选择摄像头,这两者不是冲突了吗? 实际上是不冲突的,可以理解为facingMode是针对移动端,因为移动端前置、后置摄像头区分明显,可以快速设置facingMode的值为“user”或“environment”来切换摄像头,但是在pc端,大部分电脑没有前置后置摄像头的概念,那最好就用deviceId来区分。

   至此,视频采集常用配置参数就讲解完了,接下来,我们再来看看如何加入滤镜功能。

  什么是滤镜,滤镜原本指的是一种摄影器材, 摄影师将其放在摄像头前来影响拍照效果,在数字图像处理中,滤镜可以理解为图像特效,同一张图片加入了不同的滤镜,可以实现不同的效果。在webrtc技术中不涉及视频渲染,通常是由应用层负责,因此我们要对视频实现滤镜效果,可以从CSS来入手。CSS中滤镜的实现是基于filter属性,演示代码如下。

<!-- demo 2.3.html -->
<
html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./css/demo2.3.css"> <title>demo 2.3 图片滤镜</title> </head> <body> <img class="filter-img" src="./images/demo2.3/filter.jpg" /> </body> </html>

 

 

// demo2.3.css 
.filter-img
{ width: 300px; filter: opacity(50%) sepia(100%); }

上述的两段代码实现了为图片filter.jpg 添加了两个滤镜:opacity表示透明度,可取值为(1%-100%);sepia表示深褐色的程度,可取值为(1%-100%)。在filter属性中,不同的效果是可以叠加。实现的效果如下图2.3.1、2.3.2所示。

 

图 2.3.1 (滤镜测试原图)

 

 

 图 2.3.2 (实现了两个滤镜叠加的效果)

 下面列举目前css3支持的基础滤镜效果。

  • grayscale 灰度               值为0-1之间的小数 
  • sepia 褐色         值为0-1之间的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1之间的小数
  • opacity 透明度     值为0-1之间的小数
  • brightness 亮度     值为0-1之间的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影      值为一组数据

 详细操作的文档可以参考这里:https://www.runoob.com/cssref/css3-pr-filter.html

   至此,本节的内容讲解完毕,总结:第一、讲解视频采集的相关参数:width、height 、facingMode 、frameRate、deviceId、resizeMode。第二、讲解CSS的滤镜的基本用法。下一节,通过实战一个案例来运用这些知识。

 

posted on 2020-03-09 14:45  Rajan  阅读(1295)  评论(0编辑  收藏  举报
扫码和作者预约吧