1.3.3

Integration

To start using MyMy Web Video, import mymy-video-makeup.js into a html document. The result will be a module named MyMy that is globally accessible from any subsequent javascript imports:

...
<head>
    <script type="text/javascript" src="/mymy-video-makeup.js"></script>
    <script type="text/javascript" src="main.js"</script> <!-- Has access to the MyMy module -->
</head>
...

All MyMy video needs is a html canvas to draw on. If the application has more than one product, you can call addProduct and removeProduct to add or remove products. There are similar calls for looks.

Functions

The following javascript module functions are available to integrate into any webpage using this service. The functions can be called as a result of, for example, a user clicking on a button to select a product or any other mechanism you want for switching between products e.g. a continuous slide show.

initVideo

Initialises the MyMy module to render to a specific html5 canvas. Implicitly calls startVideo.

String MyMy.initVideo(targetCanvas)

targetCanvas: The canvas to render to.
returns: Empty string on success, error message on failure.

startVideo

Starts rendering video onto the targetCanvas given by initVideo.

String Mymy.startVideo()

returns: Empty string on success, error message on failure.

endVideo

Stops rendering video onto the targetCanvas.

String MyMy.endVideo()

returns: Empty string on success, error message on failure.

addProduct

Applies the specified makeup to a users face, rendered on the targetCanvas.

String MyMy.addProduct(skuId)

skuId: The product SKU string id.
returns: Empty string on success, error message on failure.

removeProduct

Removes the specified makeup from a users face, rendered on the targetCanvas.

String MyMy.removeProduct(skuId)

skuId: The product SKU string id.
returns: Empty string on success, error message on failure.

setLook

Applies a group of makeup to a users face, overwriting any existing makeup applied with calls to addProduct

String MyMy.setLook(lookId)

lookId: The look string id. returns: Empty string on success, error message on failure.

Example HTML

<html>
    <head>
        <script type="text/javascript" src="/mymy-video-makeup.js"></script>
    </head>
    <body>
        <canvas id="playcanvas"></canvas>
        <button onClick="MyMy.initVideo(document.getElementById('playcanvas')); MyMy.setLook('look1');">Start</button>
    </body>
</html>
Server Pages →