Scrolling screenshots

You can access the 'Scrolling Screenshot' functionality, which allows you to capture a video (in webm, gif, or mp4 format) of a web page with various customizable options. These options include the ability to scroll backward, adjust scrolling speed, set the duration, and start recording instantly

Example:

const axios = require("axios");
let config = {	method: "get",	maxBodyLength: Infinity,	url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true",	headers: { }};
axios.request(config).then((response) => {	console.log(JSON.stringify(response.data));}.catch((error) => {	console.log(error);});

<?php	$client = new http.Client;	$request = new http.Client.Request;	$request->setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true");	$request->setRequestMethod("'GET'");	$request->setOptions(array());
	$client->enqueue($request)->send();	$response = $client->getResponse();	echo $response->getBody();?>

package main
import (	"fmt"	"net/http"	"io")
func main() {	url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true"	method := "GET"
	client := &http.Client { }	req, err := http.NewRequest(method, url, nil)
	if err != nil {		fmt.Println(err)		return	}
	res, err := client.Do(req)	if err != nil {		fmt.Println(err)		return	}
	defer res.Body.Close()	body, err := io.ReadAll(res.Body)	if err != nil {		fmt.Println(err)		return	}
	fmt.Println(string(body))}

OkHttpClient client = new OkHttpClient().newBuilder().build();MediaType mediaType = MediaType.parse("text/plain");RequestBody body = RequestBody.create(mediaType, "");Request request = new Request.Builder().url("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true")	.method("GET", body)	.build();Response response = client.newCall(request)	.execute();

import requests
url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true"payload = {}headers = {}
response = requests.request("GET", url, headers, data=payload)print(response.text)

require "uri"require "net/http"
url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true")
https = Net::HTTP.new(url.host, url.port)https.use_ssl = true
request = Net::HTTP::Get.new(url)
response = https.request(request)puts response.read_body

In the following video, you'll find a more illustrative example of how to utilize the 'Scrolling Screenshot' functionality. When you click the 'Take Screenshot' button, it will take a few seconds to capture the video and provide you with JSON containing the video information.

Here is the recorded video demonstrating the example.

Multiple Scrolling screenshots

In addition to the 'Scrolling Screenshot' functionality, our application offers the feature of 'Multiple Scrolling Screenshots'. With this feature, you can capture multiple scrolling screenshots of web pages, each with different sizes in terms of width and height. This means you have the flexibility to customize the dimensions of the screenshots according to your specific requirements.

Example:

In the parameters of the endpoint, we will pass an array of objects with different sizes. To achieve this, we need some code to pass this array in the 'sizes' parameter.

let sizesArr = [ 	{ id:  1 , width:  1920 , height:  1080 },	{ id:  2 , width:  1280 , height:  720 },	{ id:  3 , width:  800 , height:  450 },];
let  SIZES = JSON.stringify(sizesArr);console.log(SIZES);

<?php$sizesArr = [	["id" => 1,"width" => 1920,"height" => 1080],	["id" => 2,"width" => 1280,"height" => 720],	["id" => 3,"width" => 800,"height" => 450]];
$SIZES = json_encode($sizesArr);echo $SIZES;?>

package main
import (	"fmt"	"encoding/json")
func main() {	sizesArr := []map[string]interface{}{		{"id" : 1,"width" : 1920,"height" : 1080},		{"id" : 2,"width" : 1280,"height" : 720},		{"id" : 3,"width" : 800,"height" : 450},	}
	SIZES, err := json.Marshal(sizesArr)	if err != nil {		fmt.Println("Error marshaling JSON:", err)		return	}
	fmt.Println(string(SiZES))}

import org.json.JSONArray;import org.json.JSONObject;
public class Main{
	public static void main(String[] args) {		JSONArray sizesArr = new JSONArray();
		JSONObject size1 = new JSONObject();		size1.put("id", 1);		size1.put("width", 1920);		size1.put("height", 1080);		sizesArr.put(size1);
		JSONObject size2 = new JSONObject();		size2.put("id", 2);		size2.put("width", 1280);		size2.put("height", 720);		sizesArr.put(size2);
		JSONObject size3 = new JSONObject();		size3.put("id", 3);		size3.put("width", 800);		size3.put("height", 450);		sizesArr.put(size3);
		String SIZES = sizesArr.toString();		System.out.println(SIZES);	}}

require "json"
sizes_arr = [	{"id" => 1,"width" => 1920,"height" => 1080},	{"id" => 2,"width" => 1280,"height" => 720},	{"id" => 3,"width" => 800,"height" => 450}]
SIZES = sizes_arr.to_jsonputs SIZES

const axios = require("axios");
let config = {	method: "get",	maxBodyLength: Infinity,	url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D",	headers: { }};
axios.request(config).then((response) => {	console.log(JSON.stringify(response.data));}.catch((error) => {	console.log(error);});

<?php	$client = new http.Client;	$request = new http.Client.Request;	$request->setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D");	$request->setRequestMethod("'GET'");	$request->setOptions(array());
	$client->enqueue($request)->send();	$response = $client->getResponse();	echo $response->getBody();?>

package main
import (	"fmt"	"net/http"	"io")
func main() {	url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D"	method := "GET"
	client := &http.Client { }	req, err := http.NewRequest(method, url, nil)
	if err != nil {		fmt.Println(err)		return	}
	res, err := client.Do(req)	if err != nil {		fmt.Println(err)		return	}
	defer res.Body.Close()	body, err := io.ReadAll(res.Body)	if err != nil {		fmt.Println(err)		return	}
	fmt.Println(string(body))}

OkHttpClient client = new OkHttpClient().newBuilder().build();MediaType mediaType = MediaType.parse("text/plain");RequestBody body = RequestBody.create(mediaType, "");Request request = new Request.Builder().url("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D")	.method("GET", body)	.build();Response response = client.newCall(request)	.execute();

import requests
url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D"payload = {}headers = {}
response = requests.request("GET", url, headers, data=payload)print(response.text)

require "uri"require "net/http"
url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D")
https = Net::HTTP.new(url.host, url.port)https.use_ssl = true
request = Net::HTTP::Get.new(url)
response = https.request(request)puts response.read_body

In the following video, you'll find a more illustrative example of how to utilize the 'Multiple Scrolling Screenshot' functionality. When you click the 'Take Screenshot' button, it will take a few seconds to capture the video and provide you with JSON containing the video information.

Features

File Type

The file type determines the format in which the rendered content (such as video or animation) will be returned.

Available file types:

WEBM - Optimized for web use with good compression and quality.
MP4 - Widely supported format, ideal for compatibility across devices.
GIF - Best for short, looping animations with no sound.

The default value isWEBM.

Scroll Speed

The scrolling speed affects how quickly the page is scrolled during rendering, which can impact the render time and the final output.

Available options:

fast
normal
slow

The default value isnormal.

Duration

This value determines how long the scrolling action will take, measured in seconds.

You can set a value between0and100to adjust the scrolling time.
A higher value will result in a longer scrolling duration and a longer video.
A lower value will speed up the scrolling, reducing the video duration.

The default value is0(indicating no scrolling or instant rendering).

Scroll Back

Thescroll_backoption, when set to true, allows the scrolling action to return to the top of the page after reaching the bottom.

If enabled, the browser will scroll to the end of the page, and once it reaches the bottom, it will automatically scroll back up to the top.
This option creates a looping scrolling effect, useful for video renderings that require the entire page to be revisited.

The default value isfalse(no scrolling back to the top).

Start Immediately

when set totrue, ensures that the recording begins instantly without waiting for the website to fully load. The recording will start as soon as the page navigation begins, capturing content even if some elements have not finished loading.

This option is useful for scenarios where immediate capture is required, such as tracking loading behavior or capturing dynamic content as it appears.

The default value isfalse(waits for the website to load before starting the recording).