title: how to properly call photobooth.js
body: <p>I am currently trying to use <a href="http://wolframhempel.github.io/photobooth-js/" rel="nofollow noreferrer">photobooth.js</a> to make a simple photobooth page. I know very little about JS and webpages, but it seemed the best solution for what I have in mind. My problem is that when I load the script (no dependencies, according to the website) and try to use it in my basic app, nothing happens, so obviously I'm not calling the script properly. To make sure the script is loaded, I added a <code>ShowAlert()</code> function to <code>photobooth.js</code> that I use in an <code>onload="ShowAlert()"</code> statement, which indeed triggers the alert.</p>
  
  <p>So adding <code>myPhotobooth = new Photobooth( document.getElementById( "container" ) );</code> to my page does not work as <a href="http://www.webmonkey.com/2012/12/add-an-html5-webcam-to-your-site-with-photobooth-js/" rel="nofollow noreferrer">advertised here</a> (or more likely I don't understand how to use that)</p>
  
  <p>Would someone please explain what I am missing?</p>
  
  <p>The modified <code>photobooth_min.js</code> source:</p>
  
  <pre><code>/**
  *
  * Photobooth.js version 0.7
  
  *CUSTOM DEBUG CODE
  */
  function ShowAlert() {
      alert('show this message');
  }
  /**
  *Rest of photobooth_min.js code, unmodified.
  */
  </code></pre>
  
  <p>my <code>index.html</code> page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;photobooth&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="example"&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="photobooth_min.js" onload="ShowAlert()"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          myPhotobooth = new Photobooth( document.getElementById( "example" ) ); 
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my directory structure:</p>
  
  <p><img src="https://i.stack.imgur.com/hWGjJ.png" alt="directory stucture"></p>