Vectorly AI Filters Library

Vectorly AI Filters Library

Class

vectorlyUpscaler

new vectorlyUpscaler(video, config)

constructor - Initialize Vectorly upscaler on a <video> tag

Parameters

  • video HTMLVideoElement

    HTML5 video DOM node input

  • config vectorlyUpscaler~config

    Configuration for upscaler. Only token is required. See upscaler config for more options

    Properties

    • token string

      required; Token used to fetch models from server; Signup on Upscaler dashboard to get the token

Examples

Loading directly from cdn into html 

<script src="https://cdn.vectorly.io/v2/latest/vectorly-upscaler.js"> </script>
<video id="my-video" src="your-video-url"> </video>

<script>
   var video = document.getElementById("my-video")
   var upscaler = new vectorlyUpscaler(video, {token: 'your-model-token'})
</script>

Loading from npm package 

import vectorlyUpscaler from '@vectorly-io/ai-upscaler'

const video = document.getElementById("my-video")
const upscaler = new vectorlyUpscaler(video, {token: 'your-model-token'})

Methods

async

changeNetwork(networkParams)

async changeNetwork - Change the model network and parameters being used to render

This method is still WIP. Expect some lag when changing the networks

Parameters

disable()

disable - Disables video upscaler

enable()

enable - Enables video upscaler

on(event, callback)

on - Register event listener

Event listeners can also be chained as shown in example

Parameters

  • event string

    Event type string. Can be load, error, start, stop;

  • callback function

    Function to be called on event fired

Example

Add upscaler event listeners to vectorlyUpscaler 

upscaler
   .on('load', function () {
       console.log("Upscaler initialized"); })
   .on('error', function () {
       console.log("Failed to initialize"); })
   .on('start', function () {
       console.log("Starting upscaling"); })
   .on('stop', function () {
       console.log("Stopping upscaling"); })

Listens to events

Type Definitions

config

Type

  • object

Properties

  • token string

    Token used to fetch models from server; Signup on Upscaler dashboard to get the token

  • networkParams NetworkParams <optional>
     {name: 'residual_3k_3x', tag: 'general', version: '2.1'}

    Upscaler Network to use for upscaling

  • networkOptions object <optional>
     {}

    optional params for network; Eg. background for background_meet model

  • enabled boolean <optional>
     true

    If true, enables upscaling as soon as initialized. If set to false, make sure to call enable

  • container HTMLDivElement <optional>
     video.parentNode

    Container(div) into which the canvas is output

  • fixaspectratio boolean <optional>
     true

    If true, when scaling the output canvas to the container, maintain aspect ratio

  • inputChangePreHook vectorlyUpscaler~inputChangePreHook <optional>
     (()=> true)

    Called just when video size is changed, before the upscaler is called on the new video frame.

  • debug boolean <optional>
     false

inputChangePreHook(sizeChange, upscaler) → {boolean}

This callback is called just when video size is changed, before the upscaler processes the new video frame.

Parameters

Returns

  • boolean

    If false, input size change is ignored. If true, input size is changed in the upscaler

Example

Using inputChangePreHook option to enable/disable upscaling on a DASH video where video size changes dynamically 

// If video size has changed to > 540p disable upscale
function myHook ({before, after}, upsc) {
   let {width, height} = after
   if (Math.min(width, height) > 540 ) {
       upsc.disable()
       return false
   } else {
       upsc.enable()
       return true
   }
}

var upscaler = new vectorlyUpscaler(video, {
   token: "your-token",
   inputChangePreHook: myHook
})

inputChangePreHook(sizeChange, upscaler) → {boolean}

This callback is called just when video size is changed, before the upscaler processes the new video frame.

Parameters

Returns

  • boolean

    If false, input size change is ignored. If true, input size is changed in the upscaler

Example

Using inputChangePreHook option to enable/disable upscaling on a DASH video where video size changes dynamically 

// If video size has changed to > 540p disable upscale
function myHook ({before, after}, upsc) {
   let {width, height} = after
   if (Math.min(width, height) > 540 ) {
       upsc.disable()
       return false
   } else {
       upsc.enable()
       return true
   }
}

var upscaler = new vectorlyUpscaler(video, {
   token: "your-token",
   inputChangePreHook: myHook
})

VideoSize

Type

  • object

Properties

  • width number

    width

  • height number

    height

VideoSize

Type

  • object

Properties

  • width number

    width

  • height number

    height

Events

vectorly-upscaler-error

Upscaler Error Event.

vectorly-upscaler-load

Upscaler Load Event.

vectorly-upscaler-start

Upscaler Start Event.

vectorly-upscaler-stop

Upscaler Stop Event.