Javascript HTML视频白平衡编辑

我有一个非常简单的应用程序，可以从网络摄像头中播放视频。我通过调用

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 + ')');
    }

brightnessUp.onclick=function（）{
const bVal=$（'#video1'）.css（'-webkit filter'）；
const val=parseFloat（bVal.split（“（”）[1]。split（“）”）[0]）；
常数newVal=val+0.1<7.1？val+0.1:7；
$（'#video1'）.css（'-webkit filter'，'brightness（'+newVal+'））；
}
brightnessDown.onclick=函数（）{
const bVal=$（'#video1'）.css（'-webkit filter'）；
const val=parseFloat（bVal.split（“（”）[1]。split（“）”）[0]）；
常数newVal=val-0.1>-0.1？val-0.1:0；
$（'#video1'）.css（'-webkit filter'，'brightness（'+newVal+'））；
}

运行

getUserMedia

时，实际返回的是一个

MediaStream

对象。有很多方法可以打开和关闭白平衡，或者编辑您正在使用的平衡模式。要获得完整的属性列表，请查看

您需要找到正确的数学公式并将其应用于画布元素上绘制的视频的每个像素，您还可以利用SVG过滤器。@dnmh我目前还试图在getUserMedia videoTrack上关闭白平衡模式。然而，文档似乎暗示这仅适用于imageTracks。你找到解决办法了吗？@escapecharacter很抱歉回复太晚，是的，我找到了解决办法。请看上面我的编辑。请看上面我的编辑。据我所知，

whiteBalanceMode

不属于

MediaTrack

（）约束的一部分，

MediaStream

只有

视频

和

音频

约束。我错过了什么？