Skip to main content

Quick start

Prerequisites​

You must install Node.js for package management and TypeScript compilation.

macOS​

To install Node.js on macOS:

  1. Install Homebrew: The easiest way to install Node.js on your macOS system is by using Homebrew. Follow the instructions on the Homebrew page to install it.
  2. Install Node.js: Once you have installed Homebrew, open a terminal and enter this command:
brew install node@16
note

For more advanced JavaScript development, instead of Homebrew, use nvm to quickly install and use different versions of Node.js.

Bringing in the JavaScript library​

You can bring in the JavaScript library by using a content delivery network (CDN) or by hosting the files yourself.

Using a CDN​

The quickest way to get up and running is to use a CDN such as jsDelivr. One of the big advantages of using a CDN is that it provides all the required static assets, so you don't have to host them. The CDN also delivers the files at the edge, which enables faster downloads to your users.

Static assets include the following, as seen in the config passed to createC2pa:

const version = '0.24.2';
{
  wasmSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/assets/wasm/toolkit_bg.wasm`,
  workerSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/c2pa.worker.min.js`,
}
caution

The version numbers provided in the CDN URLs must be the same in all of the places you reference the library. To make it easy, use a variable that provides the version as shown in the example.

Using a package manager​

You can also bring in the library with a package manager, such as npm, pnpm, or yarn. This way, all of the client side code is hosted with your app and there are no external dependencies. For example, using npm:

npm install c2pa

Static assets​

When loading via a package manager, the library needs access to two externally-hosted assets so it can "lazy load" them:

  • c2pa/dist/assets/wasm/toolkit_bg.wasm - the WebAssembly binary
  • c2pa/dist/c2pa.worker.min.js - the Web Worker script
note

Be sure to configure your server to send proper Content-Type headers for these files. For more information, see Hosting.

Examples for common build systems are shown below. They are also available in the c2pa-js-examples repository.

This example is from c2pa-js-examples/minimal-ts-vite/. To view and execute this example in a live code sandbox, see Code Sandbox: Vite example.

const sampleImage =
  'https://raw.githubusercontent.com/contentauth/c2pa-js/main/tools/testing/fixtures/images/CAICAI.jpg';

(async () => {
  // Information about where to fetch the library
  const version = '0.17.2';
  const libraryUrl = `https://cdn.jsdelivr.net/npm/c2pa@${version}/+esm`;

  // Initialize the c2pa-js SDK
  const { createC2pa } = await import(libraryUrl);
  const c2pa = await createC2pa({
    wasmSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/assets/wasm/toolkit_bg.wasm`,
    workerSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/c2pa.worker.min.js`,
  });

  // Read in our sample image and get a manifest store
  try {
    const { manifestStore } = await c2pa.read(sampleImage);
    console.log('manifestStore', manifestStore);

    // Get the active manifest
    const activeManifest = manifestStore?.activeManifest;
    console.log('activeManifest', activeManifest);
  } catch (err) {
    console.error('Error reading image:', err);
  }
})();