session02/lab/html/objectives.html


<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />

  <title> Add video element to a HTML5 canvas </title>
  
  
  <link rel="stylesheet" href="./style/bootstrap.min.css" type="text/css">  
  <link rel="stylesheet" href="./style/clarity.css" type="text/css"> 

  <link rel="stylesheet" href="./style/highlight.css">
  <script src="./style/highlight.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

</head>

<body>
  <div class="container-fluid">

    <!----------------------------------------------------------------------------------------->
   <style> body  { padding-top: 60px; } </style>    <div class="navbar navbar-fixed-top">
      <p id="title">Add video element to a HTML5 canvas&nbsp;&nbsp;</p>
      <div class="navbar-inner">
        <ul class="nav">
          <li class="active"><a href="objectives.html">Objectives</a></li>
          <li><a href="step01.html">01</a></li>
          <li><a href="step02.html">02</a></li>
          <li><a href="step03.html">03</a></li>
        </ul>
        <p class="navbar-text pull-right"> <a href="http://miguelpdl.github.io/WebRTC-codelab/"> WebRTC Code Lab</a> &nbsp; &nbsp;</p>
      </div>
    </div>
    <!----------------------------------------------------------------------------------------->


<h2 id="get-video-from-your-webcam">Get video from your webcam</h2>
<ul>
<li><p>The purpose of this session is to get a video element in to a html canvas. Towards achieving this the session will:</p>
<ul>
<li>Create a blank HTML5 document</li>
<li>Add a video element to your page.</li>
<li>Add JavaScript to the script element on the HTML5 page, to enable the WebRTC API getUserMedia()</li>
<li>View your page from <em>localhost</em>.</li>
<li>Bonus points of the session.</li>
</ul></li>
</ul>


      <!----------------------------------------------------------------------------------------->
      <div id="footer">
        <p id="footertext">
          Prepared by  Miguel Ponce de Leon (miguelpdl@openrmc.org). Except where otherwise noted, this content is licensed under a 
          <a class="externalLink" href="http://creativecommons.org/licenses/by-nc/3.0/" 
            title="External link to http://creativecommons.org/licenses/by-nc/3.0/" 
            target="_blank">Creative Commons Attribution-NonCommercial 3.0 License
          </a>
        </p>
      </div>

    </div>
  </body>
</html>
 