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.