Improve CameraViaUserMedia by adding observation eare in behavior

Signed-off-by: Liu, Xin <xinx.liu@intel.com>

diff --git a/tests/CameraViaUserMedia/index.html b/tests/CameraViaUserMedia/index.html
index 61f5e24..a811379 100755 (executable)
--- a/tests/CameraViaUserMedia/index.html
+++ b/tests/CameraViaUserMedia/index.html
@@ -44,13 +44,17 @@ Authors:
             <h1 id="main_page_title"></h1>
         </div>
         <div data-role="content">
+            <div id="observateEare" align="center" style="border: #000 solid 1px;height: 330px;line-height:330px;">
+              <p id="errormassage"></p>
+              <div align="center">
+                <video width="330px" height="330px" id="localView" autoplay="autoplay"></video>
+              </div>
+            </div>
             <div align="center">
-              <input id="getUserMeida" type="button" data-theme="a" data-inline="true" value="take a video" />
+              <input id="getUserMeida" type="button" value="Start camera preview" />
+              <input id="stopUserMeida" type="button" value="Stop camera preview" />
             </div>
-            <p id="errormassage"></p>
-        </div>
-        <div align="center">
-          <video width="330px" height="410px" id="localView" autoplay="autoplay"></video>
+
         </div>
         <div data-role="footer" data-position="fixed">
         </div>

diff --git a/tests/CameraViaUserMedia/js/main.js b/tests/CameraViaUserMedia/js/main.js
index 1bb9282..5e1556a 100755 (executable)
--- a/tests/CameraViaUserMedia/js/main.js
+++ b/tests/CameraViaUserMedia/js/main.js
@@ -30,6 +30,7 @@ Authors:
 */
 $(document).ready(function(){
     DisablePassButton();
+    $("#errormassage").html("No video");
     //getUserMedia
     $("#getUserMeida")[0].onclick = function() {
         try {
@@ -37,6 +38,7 @@ $(document).ready(function(){
             navigator.getUserMedia({video: true}, function(s){
                 var url = webkitURL.createObjectURL(s);
                 $("#localView")[0].src = url;
+                $("#localView").show();
                 $("#errormassage").hide();
                 EnablePassButton();
             }, function(error){
@@ -48,4 +50,18 @@ $(document).ready(function(){
             $("#errormassage").html("Get usr media occur error,with error message:<font color='red'>"+e.message+"</font>");
         }
     }
+
+    //stop getUserMedia
+    $("#stopUserMeida")[0].onclick = function() {
+        try {
+            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
+            navigator.getUserMedia();
+            $("#errormassage").show();
+            $("#errormassage").html("No video");
+        } catch (e) {
+            $("#localView").hide();
+            $("#errormassage").show();
+            $("#errormassage").html("No video");
+        }
+    }
 });