How it Works¶
The Surfmeter Auto SDK is a JavaScript library that can be injected into the current web page. The Auto SDK will scrape the DOM and connect to each HTML <video>
element that is available on the page and measure its performance.
You can inject that library with tools like Selenium, Playwright or Puppeteer. If you decide to use our Surfmeter Selenium for Java library for the installation, this is done automatically by the SurfmeterVideoTest
Java wrapper. Find more info on that in "Which installation to choose?".
Here is a diagram that shows the process of how the Auto SDK works, e.g. with Selenium:
sequenceDiagram
participant Selenium
participant Surfmeter Auto SDK
participant HTML DOM
participant Video Elements
Selenium->>Surfmeter Auto SDK: Inject library
Surfmeter Auto SDK->>HTML DOM: Scrape DOM
HTML DOM->>Surfmeter Auto SDK: Video Elements (with src)
Surfmeter Auto SDK->>Video Elements: Measure performance and quality
Video Elements->>Surfmeter Auto SDK: Events and metadata
Surfmeter Auto SDK->>Surfmeter Auto SDK: Calculate statistics
Surfmeter Auto SDK->>Selenium: Return statistics via JavaScript callback
If new videos are created later during the page's runtime, the library will automatically detect them and measure them, too. In the delivered library, the injection is done automatically by the UrlMonitor
.
What if the video does not play, or disappears?¶
You may need to do some further interactions with the page (e.g. click the 'play'-button or accept cookies, if necessary) before you can fetch video statistics.
As video items can get destroyed on an HTML-page pretty fast (e.g., in the case the video is pretty short, the playout has ended and the page wants to load a new video after that), handling the video element can be difficult in Selenium and throw a StaleElementReferenceError
. Because of this, the Surfmeter Auto SDK JS-library scrapes the DOM on its own and has an internal handler that enables you to still get statistics from the element — even if it is already destroyed — by forwarding the src
of the video to this library.
How do I get the statistics?¶
Every five seconds, the library re-computes the video statistics. In the meantime you can track the state of the video with dedicated callbacks. Read more about this in the following sections.