javascript - HTML 视频白平衡编辑

Question

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

视频的重点是截取屏幕截图(通过在 Canvas 元素上绘制)。

我的问题是:有没有办法手动修改视频的白平衡？目前，我只使用最新的 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.