0

While the subject could sound like I'm looking to do something shifty, I'm not; I maintain an internal web site used by several hundred phone operators, and would like to add the following functionality:

I would like to add a control in the header of all of the web pages that would capture an image of the entire desktop and save the image as a file to a shared network drive to assist in troubleshooting production problems. This screen capture app would be called by JavaScript.

I've researched many threads on this site pertaining to capturing screenshots, and all of the offered applications don't meet my need in one of two ways:

  1. The screen capture application has a GUI that pops up and the user sizes some sort of capture control or interacts with a window to do the capture. The users are not very computer literate, and could not be trusted with using a "pop-up" application correctly-- and it would be impossible to enforce them to save the image file with a common file naming convention. I would like the user to press a single UI control on a web site and have JavaScript make the calls to obtain a screen shot and save the image without any further user interaction.

  2. Some automated applications save the HTML by re-posting to the site and "re-assembles" the individual HTML elements into an image. This will not work as the input data that the operator has typed in needs to be in the image, the site uses AJAX so the visual "state" of the web page will be different from one re-obtained from a POST, and some applications have had (active directory) security issues when trying to interact with our (secured) web sites.

If there isn't an application that will meet this need, I'll just roll my own control in C#. But I'd rather obtain a third-party control. so I don't have to support my own control for life. :-)

Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59
Perry Pederson
  • 95
  • 1
  • 4
  • Do your users know of the good old Print Screen button and email? (I assume from your mention of c# they are PC based). – Ady Dec 31 '08 at 18:28
  • also, youd have to implemenet this differently for each browser. – Shawn Dec 31 '08 at 18:39

5 Answers5

0

Did it once. I couldn't find a direct way so did it rendering HTML to canvas, then canvas to image using html2canvas. Canvas to image is a much more common theme so you'll find many tutorials about.

HTML to Canvas

Canvas to image

NOTE: rendering from HTML to canvas may leave some elements behind, like SVG. But overall it did as much as expected.

nocarrier
  • 129
  • 6
0

PSR (problem step recorder) is a great tool for debugging purposes on client machines and it is available on all windows machines by default.

Try below and see if it works for you.

Go to Start->Run and type psr.exe (or just psr) this should open the recorder. This is fairly easy to use, so even users/clients can use it. If it works then try below steps to setup.

Step 1: Register PSR protocol. This tells the browser what to do when a link on the page is referring to PSR protocol (which we will use to open this recorder). - Create registry values as below

HKEY_CLASSES_ROOT/
  PSR/
    (Default)    "URL:PSR Protocol"
    URL Protocol ""
    shell/
      open/
        command/
          (Default) psr.exe

If you are not comfortable with creating registry values, download and double click this file.

  • Use this link for more information.

Step 2: Now create an example html file to test launching PSR. Save the below code to index.html file and open it.

<html>
   <head>
      <head>
   </head>
   <body>
      <a href="psr:start">Start Recording</a>
   </body>
   </head>
</html>

Or download this file and open it.

This should open your PSR. It is easy to use and can record all the information you need for debugging.

ravish.hacker
  • 1,189
  • 14
  • 21
0

Javascript does not provide access to the local system for this functionality due to the security risk.

I believe the only way of doing this on a web page is possibly via an active X control or Java applet (similar to screencast-o-matic) but even then security may be an issue.

I also image unless your own c# control is in a windows forms application it would not work as c# controls that are part of a web site will be run on the server and not the client.

Hope this is of some help.

John
  • 29,788
  • 18
  • 89
  • 130
0

Well to do that you'll need something to interact with the desktop which can't be done by javascript alone.

You'll need to have an Active X Object to be able to interact with the client's machine. Once you have that, it is easy to just have the object take a picture and save it to the directory.

I believe I have the C# code to take a screen shot. If you want I'll post it.

kemiller2002
  • 113,795
  • 27
  • 197
  • 251
0

Some alternatives to ActiveX / Java:

  • You can create a flash program to do the screen capture. I haven't done this and don't know the details, but I'm fairly sure it can be done.

  • You can setup a custom protocol for screen capture (eg. screencapture:// ), and in your header include a

    <a href="screencapture://this/">Screen Capture</a>

link. You'll need to find a gui-less screen capture program to do the actual capturing and set it up as the handler for that custom protocol.

Parand
  • 102,950
  • 48
  • 151
  • 186