microsoft · aaronchong888 · Oct 26, 2018 · Oct 26, 2018 · Oct 26, 2018
diff --git a/JavaScript/LiveCameraSample/LiveCameraResult.html b/JavaScript/LiveCameraSample/LiveCameraResult.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>JavaScript - Live Camera Result</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+	</head>
+	<body onload="cameraStart()">
+
+		<h2> Microsoft Cognitive Services </h2>
+		<h2> Computer Vision API v2.0 - Describe Image </h2>
+
+		<!-- Main -->
+		<div id="main">
+			<div class="camera-div">
+				<video id="video"></video>
+				<canvas hidden id="canvas" width="640" height="480"></canvas>  
+				<photo hidden id ="photo" width="640" height="480"></photo>
+			</div>
+			<div class="result-div">
+				<h3>Captions:</h3>
+					<div class="captions"></div>
+
+				<h3>Tags:</h3>
+					<div class="tags"></div>
+			</div>
+		</div>
+
+		<!-- Scripts -->
+		<script src="jquery.min.js"></script>
+		<script src="camera.js"></script>
+
+	</body>
+</html>
diff --git a/JavaScript/LiveCameraSample/camera.js b/JavaScript/LiveCameraSample/camera.js
@@ -0,0 +1,102 @@
+// this sample API URL corresponds to Computer Vision API v2.0 - Describe Image
+// please refer to the Computer Vision API Reference for API usage
+var API_URL = 'https://westus.api.cognitive.microsoft.com/vision/v2.0/describe'
+
+// replace this with your own API KEY
+var API_KEY = '---YOUR_API_KEY---'
+
+// this is the rate of how frequent your camera image is sent to the Computer Vision API
+var CAPTURE_RATE = 3000  // milliseconds
+
+// camera settings
+var CONSTRAINTS = {
+  audio: false
+  , video: { facingMode: 'environment' }     // using the rear camera
+  //, video: { facingMode: 'user' }          // using the front camera
+  , video: { exact: {
+    height: 500      // change this to your desired image height
+    , width: 800 }      // change this to your desired image width
+  }
+}
+
+async function cameraStart() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia(CONSTRAINTS)
+
+    video.srcObject = stream
+    video.play()
+
+    var canvas = document.getElementById('canvas')
+    canvas.style.display = 'none'
+    var context = canvas.getContext('2d')
+
+    setInterval(
+      function () {
+        context.drawImage(video, 0, 0, 680, 480)
+        sendImageToAPI()   // invoke the call to Computer Vision API
+      }
+      , CAPTURE_RATE
+    )
+
+  } catch (err) {
+    throw err
+  }
+}
+
+// send your camera image to Computer Vision API
+function sendImageToAPI() {
+
+  var payload = dataURItoBlob()
+  console.log(payload)
+
+  $.ajax({
+    type: 'POST'
+    , url: API_URL
+    , headers: {
+      'Content-Type': 'application/octet-stream'
+      , 'Ocp-Apim-Subscription-Key': API_KEY
+    }
+    , data: payload
+    , processData: false
+    , success: function (data) {
+        console.log(data)
+
+        var captionsResult = ''
+        $.each(data.description.captions, function(index, value) {
+          captionsResult = captionsResult + '<p>' + value.text + ' [confidence: ' + value.confidence + '] </p>'
+        })
+        changeInnerHtml('.captions', captionsResult)
+
+        var tagsResult = ''
+        $.each(data.description.tags, function(index, value) {
+          tagsResult = tagsResult + value + '  '
+        })
+        changeInnerHtml('.tags', tagsResult)
+    }
+    , error: function (xhr, status) {
+        alert('API POST Error.')
+    }
+  })
+}
+
+// helper functions - DO NOT CHANGE IF YOU DONT UNDERSTAND THE CODE BELOW
+function dataURItoBlob() {
+  var dataUri = canvas.toDataURL('image/jpeg')
+  var data = dataUri.split(',')[1]
+  var mimeType = dataUri.split('')[0].slice(5)
+
+  var bytes = window.atob(data)
+  var buf = new ArrayBuffer(bytes.length)
+  var byteArr = new Uint8Array(buf)
+
+  for (var i = 0; i < bytes.length; i++) {
+      byteArr[i] = bytes.charCodeAt(i)
+  }
+  return byteArr
+}
+
+function changeInnerHtml(elementPath, newText){
+  $(elementPath).fadeOut(500, function() {
+      $(this).html(newText).fadeIn(500)
+  })
+}
diff --git a/JavaScript/LiveCameraSample/jquery.min.js b/JavaScript/LiveCameraSample/jquery.min.js
diff --git a/JavaScript/LiveCameraSample/screenshot.png b/JavaScript/LiveCameraSample/screenshot.png
diff --git a/JavaScript/README.md b/JavaScript/README.md
@@ -0,0 +1,30 @@
+# Video Frame Analysis Sample - JavaScript
+
+<p align="center"><img alt="" src="https://github.com/aaronchong888/Cognitive-Samples-VideoFrameAnalysis/blob/javascript-implementation/JavaScript/LiveCameraSample/screenshot.png" width="50%"></p>
+
+## Description
+
+This sample demonstrates a simple HTML website with client side JavaScript codes for analyzing video frames from a webcam in near-real-time using Vision APIs from [Microsoft Cognitive Services][].
+
+[Microsoft Cognitive Services]: https://azure.microsoft.com/en-us/services/cognitive-services/
+
+## Getting Started
+
+1. Get API keys for the Vision APIs from [Microsoft Cognitive Services][]. For video frame analysis, the applicable APIs are:
+    - [Computer Vision API][]
+    - [Face API][]
+    - [Custom Vision][]
+
+2. Open `camera.js` in any code editor (e.g. [VSCode](https://code.visualstudio.com/)), change `API_URL` and `API_KEY` to your desired API and the corresponding key
+
+3. Open `LiveCameraResult.html` in any web browsers (e.g. [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge)) to run the sample and see the results!
+
+[Microsoft Cognitive Services]: https://azure.microsoft.com/en-us/services/cognitive-services/directory/vision/
+[Computer Vision API]: https://azure.microsoft.com/en-us/try/cognitive-services/?api=computer-vision
+[Face API]: https://azure.microsoft.com/en-us/try/cognitive-services/?api=face-api
+[Custom Vision]: https://www.customvision.ai/
+
+## Contributors
+
+* **Aaron Chong** - *Initial work* - [aaronchong888](https://github.com/aaronchong888)
+* **Claudia Leung** - *Initial work* - [calx3eung](https://github.com/calx3eung)