Aircam JS

This repo contains the code for the embeddable Aircam Widget (Aircam JS).

Usage

First, install the package.

$ yarn add @aircamapp/aircam-js

Now, you'll need to import the library and the appropriate styles. If you're loading styles with Webpack you can import both in the same file.

// ./App.js

import Aircam from "@aircamapp/aircam-js";
import "@aircamapp/aircam-js/dist/aircam.css";

If you'd like, you can load in the styles in your html.

// ./index.html

<link rel="stylesheet" href="/node_modules/@aircamapp/aircam-js/dist/aircam.css">

You can now use the Aircam Widget!

Configuration

The format for initializing the Aircam Widget is new Aircam(selector, config).

The selector can be either a string or a DOM element.

The config is an object with the following properties.

• config.stream is the uuid (or short name) of the Aircam Stream you want to show inside your site
• config.on is an object with events as the keys and callbacks as the values. Support for events will likely grow but is currently limited to initialize, photoView, and photoDownload
• config.showShare is a boolean to show the Aircam share button. We do NOT recommend you use this currently. It is disabled by default

React Example

// ./App.js

import React from 'react';

import Aircam from "@aircamapp/aircam-js";
import "@aircamapp/aircam-js/dist/aircam.css";

class App extends React.PureComponent {
  constructor(props) {
    super(props)

    this.state = { counter: 0 };
  }

  componentDidMount() {
    new Aircam(".my-aircam-widget-container", { // provide a string selector or a DOM element
      stream: "abc-123", // provide the id of the Aircam Stream you wish to load
      on: { // optionally, you can tap into events from the Widget hooks
        initialize: () => console.log("Initialized!"),
        photoView: () => this.setState({ counter: this.state.counter + 1 })
        photoDownload: () => console.log("Photo downloaded!"),
      },
    })
  }

  render() {
    return (
      <div className="App">
        <div
          className="my-aircam-widget-container"
          style={{
            height: 500, // you should style your container's dimensions
          }}
        />
      
        <p>Photo Views: {this.state.counter}</p>
      </div>
    );
  }
}

export default App;