Code Examples

basic embed
multiple cameras
custom interface
custom language
video sources
event observation
hair check
user data entry
react life cycle

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
  <head>  
    <link rel="stylesheet" href="//cameratag.com/static/12/cameratag.css">
  </head>
  
  <body>

    <div id="root">
      <!-- React Component will render in here -->
    </div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="//cameratag.com/api/v12/js/cameratag.min.js"></script>
    <script id="rendered-js">
      class MyComponent extends React.Component {
        render() {
          return (
            React.createElement("div", null,
              React.createElement("h1", null, "This is my React Component!"),
              React.createElement("camera", { "data-uuid": this.props.camera_id }),
              React.createElement("br", null), 
              "This recorder will be initialized and destroyed along with the component"
            )
          );
        }

        componentDidMount() {
          CameraTag.setup();
        }

        componentWillUnmount() {
          CameraTag.cameras[this.props.camera_id].destroy();
        }
      }

      ReactDOM.render(
        React.createElement(MyComponent, { camera_id: "bd67aac0-7869-0130-7e72-22000aaa02b5" }),
        document.getElementById('root')
      );
    </script>
  </body>
</html>