This project is a simple demonstration showing how to load the DeepAR SDK in an iframe. The project contains three HTML files:
deepar.html: This page loads the DeepAR SDK from a CDN and initializes it with a license key and effect.friendly-iframe.html: This page hosts an iframe which loads thedeepar.htmlfile from the same origin.cross-origin-iframe.html: This page hosts an iframe which loads the DeepAR demo from a different origin.
To run this project locally:
- Clone the repository.
- If you are deploying to a URL other than
localhost, replace the placeholder'your_license_key_here'indeepar.htmlwith your actual DeepAR license key. - Start a local web server in the project directory.
- Open the
index.html(containing the friendly iframe) andcross-origin-iframe.htmlfiles in your web browser through the local web server.
You only need a DeepAR license key to run the deepar.html file if you are deploying to a URL other than localhost. You can obtain one by signing up for a free account on the DeepAR Developer Portal.
You also need a web server to serve the HTML files. For simple local development, you can use Python's built-in HTTP server. Navigate to the project directory in your terminal and run python3 -m http.server (for Python 3) or python -m SimpleHTTPServer (for Python 2).
Different browsers handle cross-origin requests differently. Make sure to test your application in the same browser environment(s) that your users will be using.
Also, keep in mind that the DeepAR SDK requires access to the webcam, which might not work properly in a cross-origin iframe depending on the user's browser settings and permissions.