Fullscreen support in a webview

[Joshua Smith]

I have a packaged app that contains a webview. I want to allow content in that webview to request fullscreen. Is there any way to make that work?

Details:

- My packaged app is just a lightweight shell that opens a window. The user can fullscreen that window or not, up to them.

- The bulk of the application is delivered in a <webview> element

- The content in the webview might contain a video element, and I'd like the user to be able to click the fullscreen button in there and get standard fullscreen behavior

If you open this web page in chrome:

https://apps.kaonadn.net/4559009/ch_offline.html

Click the arrow and then the "Why Choose Kaon" section and view the intro video. Click on the video and then click the fullscreen button. Works, right?

Now install the desktop app version:

m.kaon.com/c/ka

Run it and do the same thing. Doesn't work. It actually seems to think it is going fullscreen, but it doesn't go fullscreen.

-Joshua

[λ Ken Rockot]

+Fady; I don't think we did ever add a way for the fullscreen request to be bubbled out to the webview embedder. Was any work done on this that you're aware of, Fady?

In any case Joshua, do you have control over the content running in the webview, or are you potentially embedding web content which you do not control? If you have control over the content, you could solve this with a bit of script injection from the Chrome app, and a bit of code in the web app to detect said script injection. I'm happy to elaborate if this sounds feasible in your case.

--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-app...@chromium.org.
To post to this group, send email to chromi...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

[Fady Samuel]

+lazyboy@: Istiaque recently implemented the fullscreen API permission for <webview>. I don't see the updated documentation available publicly yet?

Fady

[λ Ken Rockot]

Ah OK. I'll be looking into update problems with webview and appview tag docs soon.

In any case, is this support limited to M43 at the moment?

[Joshua Smith]

I absolutely control the content in the webview.

I'm already doing some script injection to disable -webkit-backface-visibility CSS (which is currently broken in webviews).

Please elaborate on how I might be able to work around this with script injection.

-Joshua

[Fady Samuel]

I'll let Istiaque talk about the fullscreen API. As for the backface-visibility issue, please file a bug! :-)

Fady

[λ Ken Rockot]

Using the fullscreen API would be ideal and Istiaque can speak to that. If you need support in earlier versions of Chrome, the basic idea would be to:

• Add a message listener (window.addEventListener('message', ...)) to your app window. Have this listen for some kind of message and toggle app window fullscreen mode.
  
• Inject a message listener into the webview which captures a handle to the message's sender  (event.source IIRC) and also starts listening for some custom event some DOM element.
  
• Post a message to the webview from your app window so the injected listener captures a handle to the embedder.
• Have your web app's fullscreen code also fire the observed custom event on the aforementioned DOM element.
• The injected listener for that event can then propagate the fullscreen request back to the embedder using its captured message channel.

A bit of a mouthful but hopefully this makes sense.

[Joshua Smith]

I’m pretty sure that won’t work.

When you go fullscreen, some component of the DOM (typically a video element) is made fullscreen.

There’s no way to get that element out of the web view and into the context of the hosted app, in order to make it full screen.

You could ask the hosted app itself to make the webview fullscreen. But that’s not what I need. I need the video inside that webview to go fullscreen, and it won’t (even if the webview is fullscreen: I checked).

Also, there’s the practical matter that calling webkitRequestFullScreen in a message handler won’t work because it’ll get squelched for not being from a user gesture.

-Joshua

[λ Ken Rockot]

On Thu, Mar 26, 2015 at 11:47 AM, Joshua Smith <jes...@kaon.com> wrote:

I’m pretty sure that won’t work.

When you go fullscreen, some component of the DOM (typically a video element) is made fullscreen.

Right. You would have to do some additional magic to expose the DOM element more prominently within the <webview>. Not ideal, but if you want a workaround for Chrome versions without webview fullscreen support, that's what you'd have to do.

 

There’s no way to get that element out of the web view and into the context of the hosted app, in order to make it full screen.

There's no need: you make the element fill the webview, the webview fill the app window, and you make the app window fullscreen.

 

You could ask the hosted app itself to make the webview fullscreen. But that’s not what I need. I need the video inside that webview to go fullscreen, and it won’t (even if the webview is fullscreen: I checked).

Also, there’s the practical matter that calling webkitRequestFullScreen in a message handler won’t work because it’ll get squelched for not being from a user gesture.

webkitRequestFullScreen would not be used in this case. Instead of calling webkitRequestFullScreen, the web app would fix up the DOM to look like a fullscreen app, then fire a custom event which gets propagated to your app window JS. The app window's JS would then use chrome.app.window.current().fullscreen() to enter fullscreen mode.

[Joshua Smith]

OK, that sounds like a nightmare. Especially with video elements since we often just use the “controls” attribute to expose that fullscreen control.

I think I’ll just tell my customer that it’s a chrome bug and it should be fixed in the release-after-next, and if it’s really important to them they can just use the firefox hosted version instead :)

Any idea what I’ll need to change to make fullscreen start working when the API support is added? Will it be like with iframe: just add “allowfullscreen” as an attribute of the webview?

[λ Ken Rockot]

It's as simple as adding an event listener to your webview:

webview.addEventListener('permissionrequest', function(e) {

  if (e.permission == 'fullscreen') e.allow();

});

Istiaque, can you please confirm the earliest release of Chrome this made it into?

[Istiaque Ahmed]

On Thu, Mar 26, 2015 at 3:24 PM, Joshua Smith <jes...@kaon.com> wrote:

OK, that sounds like a nightmare. Especially with video elements since we often just use the “controls” attribute to expose that fullscreen control.

​

 

I think I’ll just tell my customer that it’s a chrome bug and it should be fixed in the release-after-next, and if it’s really important to them they can just use the firefox hosted version instead :)

Any idea what I’ll need to change to make fullscreen start working when the API support is added? Will it be like with iframe: just add “allowfullscreen” as an attribute of the webview?

There's some temporary issue with docserver, more or less this would look like other permissionrequest <webview> has:

https://chrome-apps-doc.appspot.com/_patch/1039443002/apps/tags/webview#type-FullscreenPermissionRequest​

You can test it on chrome canary.

[λ Ken Rockot]

On Thu, Mar 26, 2015 at 12:27 PM, Istiaque Ahmed <laz...@chromium.org> wrote:

You can test it on chrome canary.

Ah, 43 it is :) 

[Joshua Smith]

Cool, thanks!

(Not sure why you didn’t deal with it identically to IFRAME though. But, whatever. It’s simple enough to add.)

[Fady Samuel]

We wanted an API to allow for asynchronous handling of permissions so that developers can build a web browser-like experience (infobars/permission bubbles) in their Chrome Apps. See here: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/webview-samples/new-window-user-agent

Thanks,

Fady