Share Part of Screen Demo not working

[jonschull]

Unlike your other excellent demos, this one does noting when I click the Share button.

Regards,

[muaz-khan]

Try this in two different tabs/windows on any browser that suppots Canvas2D.

Try this on Chrome Canary or otherwise Firefox stable/aurora/nightly; because it is using RTCDataChannel APIs to share screenshots in realtime.

If you want to test RTCDataChannel version of experiment on chrome canary; please uncheck the checkbox "Is Sync in Realtime".... because chrome uses unreliable RTP data channels. and only one channel can be created: slow speed, a weird experience.

"Is Sync in Realtime" behind the scene uses RequestAnimationFrame to take/share screenshots in fastest possible speed (i.e. in realtime).

Firefox is the most preferred web browser to test RTCDataChannel version of "part of screen sharing" experiment.

Open three or more thabs; click "Start Realtime Public/Private Chat" and other tabs will auto connect with you. URLs must match on each tab/window.

After screens are synchronized; look at right-side image on each page.

On chrome, you can see/preview what you're typing in shared screenshots (right panel)....on firefox, html2canvas is unable to take screenshot of text in input box.

To share any other part of screen; open "index.html" file and replace "renderMe" with your own HTML element (aside, footer, header, video, image, etc.)

[jonschull]

sorry. I'm confused. These all seem to deal with chat.

I'm trying to experiment as usual with screensharing part of the screen.

Jon Schull Jon.Schull@rit.edu cell: 585-738-6696 School of Interactive Games and Media, and RIT Innovation Center For an appointment, make me an offer: http://doodle.com/JonSchull

On Sat, Mar 9, 2013 at 9:14 PM, Muaz Khan notifications@github.com wrote:

Try thishttps://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/No-WebRTC-Chat.htmlin two different tabs/windows on any browser that suppots Canvas2D http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/.

Try thishttps://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/on Chrome Canary or otherwise Firefox stable/aurora/nightly; because it is using RTCDataChannelhttps://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing/realtime-chat/chat-hangoutAPIs to share screenshots in realtime.

If you want to test RTCDataChannel version of experiment on chrome canary; please uncheck the checkbox "Is Sync in Realtime".... because chrome uses unreliable RTP data channels. and only one channel can be created: slow speed, a weird experience.

"Is Sync in Realtime" behind the scene uses RequestAnimationFramehttps://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrameto take/share screenshots in fastest possible speed (i.e. in realtime).

Firefox is the most preferred web browser to test RTCDataChannelhttps://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/realtime-chat/version of "part of screen sharing" experiment.

Open three or more thabs; click "Start Realtime Public/Private Chat" and other tabs will auto connect with you. URLs must match on each tab/window.

After screens are synchronized; look at right-side image on each page.

On chrome, you can see/preview what you're typing in shared screenshots (right panel)....on firefox, html2canvashttps://github.com/niklasvh/html2canvasis unable to take screenshot of text in input box.

To share any other part of screenhttps://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing#howwhywhat; open "index.htmlhttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/part-of-screen-sharing/realtime-chat/index.html#L96" file and replace "renderMehttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/part-of-screen-sharing/realtime-chat/index.html" with your ownhttps://github.com/muaz-khan/WebRTC-Experiment/blob/master/part-of-screen-sharing/realtime-chat/index.html#L96HTML element (aside, footer, header, video, image, etc.)

— Reply to this email directly or view it on GitHubhttps://github.com/muaz-khan/WebRTC-Experiment/issues/5#issuecomment-14674841 .

[muaz-khan]

Actually I am sharing a DIV. I want DIV's height and content to be dynamic.

I wanted to explain viewer that "part of screen sharing" means we get screenshot of the whole DIV or HTML element that we want to share.

Html2canvas library looks every DOM element resides inside that DIV and draws appropriate shapes on Canavs2D; then returns us image of the drawn shape.

In reality, I'm sharing those Canvas2D returned images using Firebase or RTCDataChanel.

I'm getting Data URLs by calling: canvas.toDataURL()

[muaz-khan]

New part of screen sharing demo added.

Open two or more tabs (using same hashed/non-hashed URL); share DIV from one tab and see shared DIV in another tabs.

You can see how to use it in your own site.

[jonschull]

very cool!

FYI this approach doesn't work for our purposes: when I change

<div to <iframe src="khanacademy.net"

the "shared-part-of-screen-preview" div stays blank.

And even if we could update src , I don't think it would track use of, e.g., the drawing tools on khanacademy.

[muaz-khan]

By default, ignoreElements are "IFRAME|OBJECT|PARAM". You can override this limit:

<script src="screenshot.js"></script>
<script>
var iFrameToShare = document.getElementById('iframe-to-share');
html2canvas(iFrameToShare, {
    onrendered: function (canvas) {
        var screenshot = canvas.toDataURL();
        // image.src = screenshot;
    },
    ignoreElements: 'OBJECT|PARAM'
});
</script>

However, it seems that Firefox fails with permission denied on pages with iframes.

[muaz-khan]

Unfortunately, according to this issue:

"If the content (of iframe) is from a different host, it won't be possible at all."

So, in your case; you can't take screenshots of iframe because it is rendereing khanacademy; a cross-origin issue occurs.

[jonschull]

right.

Even within domain, and even when I include your iframe-to-share script and point it to the right element, I get this error.

70

1. Unsafe JavaScript attempt to access frame with URL file://localhost/Users/jonschull/Desktop/button.html from frame with URL file://localhost/Users/jonschull/Desktop/sharepart.html. Domains, protocols and ports must match.

However, this does suggest that a server-side proxy (to have the iframe come from the same domain) might make things work?

Jon Schull Jon.Schull@rit.edu cell: 585-738-6696 School of Interactive Games and Media, and RIT Innovation Center For an appointment, make me an offer: http://doodle.com/JonSchull

On Tue, Mar 12, 2013 at 11:46 PM, Muaz Khan notifications@github.comwrote:

Unfortunately, according to this issuehttps://github.com/niklasvh/html2canvas/issues/125 :

"If the content (of iframe) is from a different host, it won't be possible at all."

So, in your case; you can't take screenshots of iframe because it is rendereing khanacademy; a cross-origin issue occurs.

— Reply to this email directly or view it on GitHubhttps://github.com/muaz-khan/WebRTC-Experiment/issues/5#issuecomment-14822926 .