Camera tutorial

_layouts/default.html

@@ -133,6 +133,10 @@ <h1><a href="https://tessel.io/"><nobr><img src=
               <a href="{{ site.baseurl }}/modules/ble.html" class=
               "side-bar-modules">ble</a>
             </li>
+            <li style="padding-left:10px;">
+              <a href="{{ site.baseurl }}/modules/camera.html" class=
+              "side-bar-modules">camera</a>
+            </li>
             <li style="padding-left:10px;">
               <a href="{{ site.baseurl }}/modules/climate.html" class=
               "side-bar-modules">climate</a>
@@ -155,10 +159,6 @@ <h1><a href="https://tessel.io/"><nobr><img src=
               <a href="{{ site.baseurl }}/modules/servo.html" class=
               "side-bar-modules">servo</a>
             </li>
-            <li style="padding-left:10px;">
-              <a href="{{ site.baseurl }}/modules/video.html" class=
-              "side-bar-modules">video</a>
-            </li>
           </ul></a>
         </li>
         <li>

modules.md

@@ -57,13 +57,14 @@ If you've already tried out your modules, move on to [Tweet.](tweet.html)
 *   [Accelerometer](modules/accelerometer.html)
 *   [Ambient (Light + Sound)](modules/ambient.html)
 *   [BLE](modules/ble.html)
+*   [Camera](modules/camera.html)
 *   [Climate](modules/climate.html)
 *   [GPS](modules/gps.html)
 *   [Infrared](modules/ir.html)
 *   [Relay](modules/relay.html)
 *   [RFID](modules/rfid.html)
 *   [Servo](modules/servo.html)
-*   [Video](modules/video.html)
+
 
 <div class="greyBar"></div>
 </div>

modules/_module_footer.html

@@ -18,6 +18,10 @@ <h2>Choose another module</h2>
     <a href="ble.html"><span class=
     "moduleLink">BLE</span></a>
   </li>
+  <li>
+    <a href="camera.html"><span class=
+    "moduleLink">Camera</span></a>
+  </li>
   <li>
     <a href="climate.html"><span class=
     "moduleLink">Climate</span></a>
@@ -42,10 +46,6 @@ <h2>Choose another module</h2>
     <a href="servo.html"><span class=
     "moduleLink">Servo</span></a>
   </li>
-  <li>
-    <a href="video.html"><span class=
-    "moduleLink">Video</span></a>
-  </li>
 </ul>
 
 </div>

modules/video.html → modules/camera.html

@@ -3,7 +3,7 @@
 ---
 
 {% capture include_install %}
-{% include_relative video.md %}
+{% include_relative camera.md %}
 {% endcapture %}
 {{ include_install | markdownify }}
 

modules/camera.md

@@ -0,0 +1,123 @@
+{::options parse_block_html="true" /}
+
+<div class="row">
+<div class="large-12 columns">
+
+## <img class="constrain-sm" src="https://s3.amazonaws.com/technicalmachine-assets/technical-io/modules/usb.png"> Camera
+
+[<i class="fa fa-github"> View source on Github</i>](https://github.com/tessel/tessel-av)
+
+### Step 1
+
+Make a directory inside your "tessel-code" folder called "camera", change directory into that folder, and initialize a tessel project:
+
+`mkdir camera; cd camera; t2 init`
+
+### Step 2
+</div>
+</div>
+
+<div class="row">
+<div class="large-6 columns">
+
+Plug Tessel into your computer via USB, then plug the camera module into either of Tessel's USB ports. You will also need a [UVC compatible USB camera](https://tessel.io/modules#tessel-av). 
+
+</div>
+<div class="large-6 columns">
+
+![](http://i.imgur.com/uifn1p7.jpg)
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+### Step 3
+
+Install by typing `npm install tessel-av` into the command line.
+
+### Step 4
+
+Rename "index.js" to "camera.js" and replace the file's contents with the following:
+
+{% highlight js %}
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/publicdomain/zero/1.0/
+
+/*********************************************
+Create a server that responds to every request by taking a picture and piping it directly to the browser.
+*********************************************/
+
+var av = require('tessel-av');
+var fs = require('fs');
+var os = require('os');
+var http = require('http');
+var port = 8080;
+var camera = new av.Camera();
+
+http.createServer((request, response) => {
+  response.writeHead(200, { 'Content-Type': 'image/jpg' });
+
+  camera.capture().pipe(response);
+
+}).listen(port, () => console.log(`http://${os.hostname()}.local:${port}`));
+
+{% endhighlight %}
+
+Save the file.
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+### Step 5
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-6 columns">
+
+In your command line, `t2 run camera.js`
+
+Hooray! You should see the following in your terminal: 
+
+![](http://i.imgur.com/8JdxCON.gif)
+
+
+> Note: `bishop` is just the name of my Tessel 2 board, yours will display whatever you've named your board!
+
+**Bonus:** EXTRA CHALLENGE FOR VIDEO
+
+To see what else you can do with the USB camera module, read the [tessel-av](https://github.com/tessel-av) documentation.
+
+- Try connecting a button to your Tessel 2 and use it as a shutter. 
+- Use an USB storage drive to store many photos.
+
+
+
+</div>
+<div class="large-6 columns">
+
+![](http://i.imgur.com/Yjvr1Uc.png)
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+### Step 6
+
+What else can you do with a camera module? Get inspired by a [community-created project.](http://tessel.io/projects)
+
+
+What are you making? [Share your invention!](//tessel.io/projects)
+
+If you run into any issues you can check out the [module forums](http://forums.tessel.io/c/modules).
+
+</div>
+</div>