[Screenshotting] Documentation (#129794)

* Provide defaults for the screenshotting options to make usage closer to the zero-conf
* Add screenshotting example integration
* Add integration tests to cover screenshotting example
* Add screenshotting plugin readme
* Add tutorial to the developer guide

dev_docs/tutorials/screenshotting.mdx

@@ -0,0 +1,87 @@
+---
+id: kibDevTutorialScreenshotting
+slug: /kibana-dev-docs/tutorials/screenshotting
+title: Kibana Screenshotting Service
+summary: Kibana Screenshotting Service
+date: 2022-04-12
+tags: ['kibana', 'onboarding', 'dev', 'architecture']
+---
+
+## Screenshotting Plugin
+
+This plugin provides functionality to take screenshots of the Kibana pages.
+It uses Chromium and Puppeteer underneath to run the browser in headless mode.
+
+If you are planning to integrate with the screenshotting plugin, please get in touch with the App Services team to know all the limitations.
+
+### Capabilities
+- Canvas workpads screenshots.
+- Dashboards screenshots.
+- Expressions screenshots.
+- PDF generation.
+- Batch screenshotting.
+
+### Usage
+After listing the `screenshotting` plugin in your dependencies, the plugin will be intitalized on the setup stage.
+The intitalization process downloads (if it is not already present) and verifies the Chromium build.
+
+The start contract exposes a public API to interact with the plugin.
+Apart from the actual screenshotting functionality, it also provides a way for self-diagnostics.
+
+Here is an example of how you can take a screenshot of a Kibana URL.
+
+
+```typescript
+import { lastValueFrom } from 'rxjs';
+import type { CoreSetup, Plugin } from 'src/core/server';
+import type { ScreenshottingStart } from 'x-pack/plugins/screenshotting/server';
+
+
+interface StartDeps {
+  screenshotting: ScreenshottingStart;
+}
+
+class ExamplePlugin implements Plugin<void, void, void, StartDeps> {
+  setup({ http, getStartServices }: CoreSetup<StartDeps>) {
+    const router = http.createRouter();
+
+    router.get(
+      {
+        path: '/api/capture',
+        validate: {
+          query: schema.object({
+            id: schema.string(),
+          }),
+        },
+      },
+      async (context, request, response) => {
+        const [, { screenshotting }] = await getStartServices();
+        const { metrics, results } = await lastValueFrom(
+          screenshotting.getScreenshots({
+            request,
+            urls: [`http://localhost/app/canvas#/workpad/workpad-${request.query.id}`],
+          })
+        );
+
+        return response.ok({
+          body: JSON.stringify({
+            metrics,
+            image: results[0]?.screenshots[0]?.data.toString('base64'),
+            errors: results[0]?.renderErrors,
+          } as ScreenshottingExpressionResponse),
+        });
+      }
+    );
+  }
+
+  start() {}
+}
+
+export function plugin() {
+  return new ExamplePlugin();
+}
+```
+
+<DocCallOut>
+  Check the complete API reference <DocLink id="kibScreenshottingPluginApi" text="here" />.
+</DocCallOut>