Ghostlab allows you to take screenshots of any connected device. Please note that we are not talking about native screenshots (e.g. when you do a “Print Screen” on a computer, or press the respective button combination on a mobile phone). Ghostlab uses our own forks of html2canvas and Fabric.js to obtain a visual representation of the page currently displaying on a client. It takes a screenshot of the viewport, not the entire page (that might be an option in the future).
To take a screenshot on a client, simply use the camera icon in the client list. Once you click it, it will start recording the screenshot on the device. In case Ghostlab is not already showing the Screenshot perspective, it will switch over to it.
The screenshot you have just requested will show up as loading – Ghostlab will wait until the client sends the screenshot over, and update the placeholder with the screenshot. It can happen that it takes really long to create a screenshot on a client, or that an exception occurs. After thirty seconds of a requested screenshot in the loading state, Ghostlab will show a message that it’s taking long to get the screenshot. Also, you will have the ability to cancel the screenshot.
Screenshots are stored on your local disk – by default, Ghostlab attempts to place them in a subdirectory “ghostlab_screenshots” in your home folder, using a separate folder with a random name for every site. For every site, you can change the location where the screenshots are stored in the Site settings. When you look at the screenshot folder, you will see jpeg and json files. The jpeg files are the actual screenshots (or a thumbnail of them), the json files contain the metadata and the annotations you make.
Once the screenshot is ready, you will see it as a thumbnail in the screenshot perspective, alongside with an automatically assigned name based on the client. You can change the name of the screenshot by double-clicking into it. You can delete screenshots by clicking on their trash icon, save them to a folder on your computer by clicking the export icon, or choose to edit them via the edit icon or by double-clicking the thumbnail. You can sort the list of screenshots by date (created or modified) and by name.
The screenshot editor will show on top of the screenshot perspective, leaving the client list visible. The screenshot editor allows you to view the whole screenshot in detail, zoom in and out, and, most importantly, annotate it. When a screenshot opens up in the editor, you will notice that it contains a header section with some metadata about the client on which it was taken and its size.
You can use the tool palette in the editor to annotate a screenshot. Pick any color and tool you like and go for it! You can resize shapes and text either arbitrarily, or proportionally by holding down the Shift key. When any shape is selected, pressing Esc will result in deselecting the shape. When no shape is selected, pressing Esc will close the screenshot editor. There is no Save button, as any annotations you make are automatically saved.