示例：JS 播放视频流时调整色度，饱和度，亮度，对比度

张云飞Vir

发布于 2021-04-29 15:18:21

1.7K0

发布于 2021-04-29 15:18:21

文章被收录于专栏：写代码和思考写代码和思考

1.背景

一个需求是在播放视频流时，对视频流进行调整 色度，饱和度，亮度，对比度等，要怎么实现呢？

完成后的截图：

image.png

2.思路

1.使用video标签播放视频
2.使用canvas播放视频，并捕获每个视频帧，这是可以获得每个像素的RGB色。
3.将RGB 转成 HSL 色，对HSL色调整色度，饱和度，亮度
4.调整完毕后，再转成 RGB，并绘制。
5.完成

3.实现方式

播放视频

使用video标签来实现

      <video id="video" src="video.ogm" controls="true"/>

在播放时，通过 canvas 绘制，并处理图片帧

this.video.addEventListener('play', function() {
          self.width = self.video.videoWidth / 2;
          self.height = self.video.videoHeight / 2;
          self.timerCallback();
        }, false);
    };

    processor.timerCallback = function timerCallback() {
        // 执行 帧运算
        this.computeFrame();
        let self = this;
        setTimeout(function() {
            self.timerCallback();
        }, 0);
    }

    //  帧运算 的逻辑
    processor.computeFrame = function computeFrame() {
        // 在第一个 canvas 中绘制原图
        //.........略
    }

使用 canvas 处理视频

通过在一个 canvas （画布）上结合 video 元素功能，你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画面中。

色度，饱和度，亮度，对比度调整

即获得图新的像素后的RGB 色后，通过一个 js 库 ColorConverter 转成 HSL 格式。然后就可以通过滑动块变更 HSL 中的参数值了。

获得ColorConverter进行 RGB 和HSL颜色格式的转换

ColorConverter 是使用JavaScript函数定义RGB, HSL和HEX颜色之间的转换的一套 JS 类库

Github地址：https://github.com/SimonWaldherr/ColorConverter.js

对比对调整

对比度调整公式如下：

  RGB’=RGB+(RGB-Average)*Contrast/255

其中nRGB’代表了r,g,b各自重新计算后的值。Average是平均灰度值。

所以当Contrast为0时，RGB值不变，表示当前的一个对比度。
为-255时，RGB都为127，亮度都一样，没有差别，呈灰色。
为255时，在Average之上的像素点会变得更亮，反之变得更暗本文附录部分有计算平均灰度值的方法

计算平均灰度值

  // 计算某个 帧的 灰度平均值
    function getGrayAverage(imagePixArray){
      var average = function(dataArray){
          let pixCount = dataArray.length / 4;
          let sum = 0;
          for (let i = 0; i < pixCount; i++) {
             const pixOffset = i * 4;
             let r = dataArray[pixOffset];
             let g = dataArray[pixOffset+1];
             let b = dataArray[pixOffset+2];
             sum = sum + parseInt(0.299 * r + 0.587 * b + 0.114 * g);
          }
          let aver = sum / dataArray.length;
          return aver;
      }// end inner function
      return average(imagePixArray);
   }// end