Cannot detect ESC button on Chrome (packaged) app (while fullscreen)

Question

Sounds easy but an absolutely nightmare. I cannot detect the escape button being pressed. I need to know if the fullscreen mode is exited as you cannot block the escape button from being pressed. The javascript is injected to a HTML which loads in a webview.

$(document).keyup(function(e) {
  if (e.keyCode === 27) {
    console.log("esc pressed")
  }
});

This only works when the view is not fullscreen!

Going fullscreen:

$('#fullscreen-button').unbind("click").on('click', function(){
  viewer.setFullscreen();
});

setFullscreen: function() {
  if(!viewer.isFullScreen()) {
    console.log("window fullscreen --> ",viewer.isFullScreen());
    document.body.webkitRequestFullscreen();
    $("#presenter, #slide-container .owl-item").addClass('fullscreen tenTwenty');
    $("#viewer-container, #slide-container").addClass('fullscreen thirteenSix');
    $('.fullscreen').width(screen.width);
    $('.fullscreen').height(screen.height);
    $('#slide-container').trigger('refresh.owl.carousel');
  } else {
    document.webkitCancelFullScreen();
    console.log("window fullscreen --> ",viewer.isFullScreen());
    $('.tenTwenty').width(1024); $('.tenTwenty').height(768);
    $('.thirteenSix').width(1366); $('.thirteenSix').height(768);
    $("#presenter, #viewer-container, #slide-container, #slide-container .owl-item").removeClass('fullscreen tenTwenty thirteenSix');
    $('#slide-container').trigger('refresh.owl.carousel');
  }
},

isFullScreen: function(){
  if ( document.webkitFullscreenElement) {
    return true;
  } else {
    return false;
  }
},

Answer 1

Since you are using jQuery, you can add a listener to check the change of fullscreen state. It doesn't tell you if it's opening or closing the fullscreen, but you can check all states like this:

// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
    if(!viewer.isFullScreen()) {
        // you are out of fullscreen
    } else {
        // you are in fullscreen
    }
});

EDIT:

As we talk in comments, vanilla js fits perfectly:

  document.addEventListener('webkitfullscreenchange', function(e) {});