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

运行ClientHttpConnector httpConnector = new HttpHandlerConnector((request, response) -> { response.setStatusCode(HttpStatus.OK); response.getHeaders().setContentType(MediaType.TEXT_PLAIN); DataBufferFactory bufferFactory = response.bufferFactory(); return response.writeWith(Mono.just(bufferFactory.wrap("FOO\nBAR\n".getBytes()))) .then(Mono.defer(response::setComplete)); }); WebClient webClient = WebClient.builder() .clientConnector(httpConnector) .build(); new DirectFieldAccessor(this.reactiveOutbound) .setPropertyValue("webClient", webClient);时，实际上返回的是一个 getUserMedia 对象。有很多方法可以打开和关闭白平衡，或编辑正在使用的平衡模式。有关属性的完整列表，请查看W3 object page.

HTML视频白平衡编辑

1 个答案: