HTML视频白平衡编辑

Question

我有一个非常简单的应用程序，可以从网络摄像头流式传输视频。我通过调用getUserMedia并将其添加到现有HTML视频元素的流中来从网络摄像头获取流。

视频的重点是截取屏幕截图（通过在画布元素上绘制）。

我的问题是：有没有办法手动修改视频的白平衡？目前，我只使用最新的Firefox，以防万一。

这是我的代码的一部分：

function handleSuccess(stream) {
  video.srcObject = stream;
  video.srcObject.getVideoTracks()[0].applyConstraints({
    whiteBalanceMode: 'shade',
    // or whiteBalanceMode: true,
  });

  console.log(video.srcObject.getVideoTracks()[0].getConstraints());
}

// console log does not show whiteBalanceMode included in the constraints

编辑：我已经为此找到了一个css解决方案，我使用jquery来简化。

    brightnessUp.onclick = function() {
      const bVal = $('#video1').css('-webkit-filter');
      const val = parseFloat(bVal.split('(')[1].split(')')[0]);
      const newVal = val + 0.1 < 7.1 ? val + 0.1 : 7;
      $('#video1').css('-webkit-filter', 'brightness(' + newVal + ')');
    }

    brightnessDown.onclick = function() {
      const bVal = $('#video1').css('-webkit-filter');
      const val = parseFloat(bVal.split('(')[1].split(')')[0]);
      const newVal = val - 0.1 > -0.1 ? val - 0.1 : 0;
      $('#video1').css('-webkit-filter', 'brightness(' + newVal + ')');
    }

Answer 1

当你运行 getUserMedia 时，实际返回的是 MediaStream 对象。有很多方法可以打开和关闭白平衡，或编辑您正在使用的平衡模式。有关属性的完整列表，请查看W3 object page.