text: const snapshotButton = document.querySelector('button#snapshot');
  const filterSelect = document.querySelector('select#filter');
  
  const video = window.video = document.querySelector('video');
  const canvas = window.canvas = document.querySelector('canvas');
  canvas.width = 480;
  canvas.height = 360;
  
  snapshotButton.onclick = function() {
      canvas.className = filterSelect.value;
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  };
  
  filterSelect.onChange = function() {
      video.className = filterSelect.value;
  }
  
  const constraints = {
      audio: false,
      video: true
  };
  
  function handleSuccess(stream) {
      window.stream = stream;
      video.srcObject = stream;
  }
  
  function handleError(error) {
      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
  }
  
  navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);