Presentation API

[Robbi]

Hi folk,

Does anyone know if Presentation API is available within the extensions?

I was making some tries but I always get the same error when I call "PresentationRequest".

TIA

[wOxxOm]

What is the error and where do you use it? It probably won't work in an offscreen document or action popup. I don't have an external screen which is what the API says when I use it in an extension tab.

[Robbi]

This is the error: Uncaught NotSupportedError: Failed to construct 'PresentationRequest': An empty sequence of URLs is not supported.

and this is the code line that throws the error:     presentationRequest = new PresentationRequest(['receiver.html'])

I initially put this line in the sidePanel js code 'cause the intention was to use that kind of window as transmitter.

However I past the same line in the console of an extension page (no sidePanel) and I get is the same error.

I don't have an external screen which is what the API says when I use it in an extension tab.

I don't have a second monitor at home and just to make these tries I installed this utility that emulate two or more monitors (Virtual Display Manager V3)

and the demo found here  (https://googlechrome.github.io/samples/presentation-api/) work like charm.

[wOxxOm]

Only web ULs are probably supported inside the list, so try adding that html to web_accessible_resources. If it won't work, this may be a hard-coded limit in the source code for http schemes, so you'll need to open a bug report about it.

[Jackie Han]

Out of interest, I analyzed this problem.

Spec says:

Source code:

If the url is an unsupported url, the constructor just ignores the url, and throws an "An empty sequence of URLs is not supported" exception.

So current implementation doesn't support chrome-extension URL. http or cast URL is Ok.

// in an extension page

new PresentationRequest(['https://example.com']); // Ok

new PresentationRequest(['cast://foo']); // Ok

new PresentationRequest(['test.html']); // throw empty sequence exception

new PresentationRequest(['chrome-extension://extension-id/test.html']); // throw empty sequence exception

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/10cb6aa0-c53f-4083-a89a-03668d9461fan%40chromium.org.

[Robbi]

Ok, thank you both.

I moved the receiver to my server so the line that throws the error became

presentationRequest = new PresentationRequest(['https://myServer.org/folder/receiver.html])

I was able to establish the connection and exchange messages in both direction.

Now the challenge has become another.

I put an iframe in the receiver body (which I moved to my server) and I tried to change the SRC property of this latter with the url of a page of the extension (I previously added the page in "web_accessible_resources").

A warning appeared in the receiver console: "crbug/1173575, non-JS module files deprecated" and in fact the iframe didn't change location showing me the classic image of the page not found\loaded.

Do I have any hope of overcoming this obstacle?

The alternative way (which I would like to avoid though) would be to create an image of the body of what I want to transmit and send it instead of the parameters\commands that would have allowed me to reproduce the same result in the iframe.

I hope I explained well.

Among other things, I'm not even sure that this type of data is actually transmissible in this channel.

In fact, in the examples found on the net, either text or a simple JSON object is always transmitted.

Any advice is very welcome as always.

[Jackie Han]

I put an iframe in the receiver body (which I moved to my server) and I tried to change the SRC property of this latter with the url of a page of the extension (I previously added the page in "web_accessible_resources").
A warning appeared in the receiver console: "crbug/1173575, non-JS module files deprecated" and in fact the iframe didn't change location showing me the classic image of the page not found\loaded.

Setting iframe.src is a navigation behavior. It looks like this API intentionally disallows navigation in a receiving browsing context. See this links

• 6.6.1 Creating a receiving browsing context
• Clarify self-navigation behavior in a presentation
• Clarifies restrictions on navigation in receiving browsing contexts
• Sets top-level navigation and modal dialog flags on presentations

The alternative way (which I would like to avoid though) would be……  I hope I explained well.

I don't understand well :)

Among other things, I'm not even sure that this type of data is actually transmissible in this channel.

The spec and article say "A connection receiving a message fires a "message" event you can listen for. The message can be a string, a Blob, an ArrayBuffer, or an ArrayBufferView. "

 

[Robbi]

I don't understand well :)

A video is better than 1k words.

I'd like to duplicate the main tab to the presentation receiver.

As you can see, any action on player comands update the url of the main tab (3 possible urls).

Thus excluding the possibility of navigating in the receiver (from the iframe) it seems I only have the alternative of taking a picture of the tab with chrome.tabs.captureVisibleTab and sending the dataURL to the receiver.

Waht do you think?

[Robbi]

I did more testing by capturing the tab next to the side panel and transmitting it to the presentation receiver.

The results are disappointing; here are my thoughts:
both "chrome.tabs.captureVisibleTab" and "chrome.tabCapture.getMediaStreamId" allow me to get a screenshot of the tab exactly as the user currently sees it.
In practice, if the tab is not totally visible (because the side panel has been enlarged too much) the screenshot will be cut or in any case shrunk (if the content is "responsive").

I verified that through the "capture node screenshot" function in the "Elements" panel of the "Devtools" I get an image that is not cut.
I think we can replicate this using a method of the chrome.debugger API but I find the warning generated by asking the relative permission in manifest.json is excessive for my use case.

Furthermore, since the content to be mirrored on the receiver is (largely) "responsive", using "capture node screenshot" and sending the dataURL of that image
will never get a decent result if the video resolution of the latter is different.

Perhaps the only "decent" solution would be to implement the logic of the 3 pages (serving the 3 types of link-action) in the receiver page.
Obviously this file will have to receive "much more substantial" messages as inside it I won't be able to use any chrome API, and fetch cross-origin resources.
This in theory, in practice "I'll be damned if I start doing such a thing".

What about the "Presentation Web API"?
The example shown here "maybe" shows the upper limits of this technology (very poor)

[Jackie Han]

Your Goal: (Assuming you have two monitors) I'd like to duplicate the main tab to the presentation receiver.

1. Traditional Method by OS

In OS display settings, you can use two displays in mirror mode instead of extended mode.

2. Presentation API

In my understanding, the Presentation API is used to play slides, like PowerPoint. The receiving page is a standalone and limited page, and you can tell it to play the next or previous slide via messages (e.g. by updating url fragments to #1 #2 #3). For now, the Presentation API doesn't support chrome url (chrome-extension://), so you can't present an extension page.

3. Do It Yourself

Similar to the Presentation API, I think you can simulate this function. For example,

1) Create a new (maximized or fullscreen) window and move it to another display.

2) Sync the two pages via messages. e.g. show the next page.