2

Task at hand is to add support for fullscreen mode to an WebGL application written in Dart.

canvas.requestFullscreen() works for simple test cases, but fails on the full app.

Please point out the way to tell what is preventing the browser from switching to fullscreen.

The code is:

void trapFullscreenError() {
  document.onFullscreenError.listen((e) {
    log("fullscreenerror: $e");
  });
}

void toggleFullscreen(CanvasElement c) {
  log(
      "fullscreenSupport=${document.fullscreenEnabled} fullscreenElement=${document.fullscreenElement}"
      );

  if (document.fullscreenElement != null) {
    log("exiting fullscreen");
    document.exitFullscreen();
  } else {
    log("requesting fullscreen");
    c.requestFullscreen();
  }
}

In Chrome that code results in:

fullscreenSupport=true fullscreenElement=null
requesting fullscreen
fullscreenerror: Instance of 'Event'

Dartium debugger shows these fields:

Event [id=4]
_selector null
bubbles true
cancelable false
clipboardData null
currentTarget #document [id=5]
defaultPrevented false
eventPhase 3
hashCode 234642739
path NodeList[6] [id=6]
target canvas#main_canvas [id=7]
timeStamp 1398779450832
type "webkitfullscreenerror"
Everton
  • 12,589
  • 9
  • 47
  • 59
  • 1
    What is the output of `log("fullscreenerror: ${e.detail}");`? – Günter Zöchbauer Apr 29 '14 at 04:06
  • It throws an exception: Uncaught TypeError: undefined is not a function J.get$detail$x trapFullscreenError_closure.call$1 fullscreen.dart:9 invokeClosure_closure0.call$0 js_helper.dart:1842 _IsolateContext.eval$1 isolate_helper.dart:392 _callInIsolate isolate_helper.dart:30 invokeClosure js_helper.dart:1842 (anonymous function) – Everton Apr 29 '14 at 13:35
  • 1
    Is this only in JavaScript or also in Dart. What browsers did you try? – Günter Zöchbauer Apr 29 '14 at 13:36
  • Dartium throws this: Class 'Event' has no instance getter 'detail'. NoSuchMethodError: method not found: 'detail' Receiver: Instance of 'Event' Arguments: [] – Everton Apr 29 '14 at 13:43
  • The javascript result is from Chrome. Dart requestFullscreen compiled to JS does not work on other browsers. There are bugs for this: https://code.google.com/p/dart/issues/detail?id=4136 https://code.google.com/p/dart/issues/detail?id=10246 https://code.google.com/p/dart/issues/detail?id=11506 – Everton Apr 29 '14 at 13:45
  • 1
    Can you try to set a breakpoint in the event handler and check the type of the argument `e`? I wrongly assumed an Event type instead of an Error type. Can you investigate if the argument `e` has some fields that contain additional information. – Günter Zöchbauer Apr 29 '14 at 13:48
  • I have added to the question the fields of e according Dartium debugger. – Everton Apr 29 '14 at 13:57
  • 1
    have you checked this: http://stackoverflow.com/questions/9454125 (can only be called from a mouse or keyboard event) – Günter Zöchbauer Apr 29 '14 at 14:03
  • Yeah, that solved it. I had to modify how events are handled. If you post it as answer I can accept it. Thanks! – Everton Apr 29 '14 at 14:22

2 Answers2

5

For security reasons requestFullscreen can only be called in an event handler of a keyboard or click event.

see also Javascript request fullscreen is unreliable

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

I don't know if you're still on this. But I've managed to make it work by identifying the domElement in the renderer, inside an event

renderer.domElement.requestFullscreen()
General Grievance
  • 4,555
  • 31
  • 31
  • 45
daryl
  • 44
  • 1
  • 4