Update webcam.js

akmamun · Feb 13, 2019 · 143a0b2 · 143a0b2
1 parent eedc2d5
commit 143a0b2
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/react-js/webcam.js b/react-js/webcam.js
@@ -1,8 +1,15 @@
-if (navigator.getUserMedia) {   // navigator.getUserMedia pass three arguments
-            navigator.getUserMedia({video: true}, //if want audio can be true 
+// Class baised component
+import React, { Component } from 'react';
+
+class Webcam extends Component {
+
+    render() {
+
+        if (navigator.getUserMedia) {
+            navigator.getUserMedia({video: true},
                 stream => {
-                    let camera = document.getElementById('camera'); //class or id for load stream on html
-                    camera.srcObject = stream;  //src of stream
+                    let camera = document.getElementById('camera');
+                    camera.srcObject = stream;
                     camera.onloadedmetadata = () => {
                         camera.play();
                     }
@@ -11,18 +18,24 @@ if (navigator.getUserMedia) {   // navigator.getUserMedia pass three arguments
                 }
             );
         }
-
- // <video id="camera" width="640" height="480" autoPlay/>
-// if want a component
-// class Webcam extends Component {
 
-//     render() {
 
-//         if (navigator.getUserMedia) {
-//             navigator.getUserMedia({video: true},
+        return (
+            <div>
+                <video id="camera" width="640" height="480" autoPlay/>
+            </div>
+        );
+
+
+    }
+}
+export default Webcam;
+// stream snippet
+// if (navigator.getUserMedia) {   // navigator.getUserMedia pass three arguments
+//             navigator.getUserMedia({video: true}, //if want audio can be true 
 //                 stream => {
-//                     let camera = document.getElementById('camera');
-//                     camera.srcObject = stream;
+//                     let camera = document.getElementById('camera'); //class or id for load stream on html
+//                     camera.srcObject = stream;  //src of stream
 //                     camera.onloadedmetadata = () => {
 //                         camera.play();
 //                     }
@@ -31,14 +44,3 @@ if (navigator.getUserMedia) {   // navigator.getUserMedia pass three arguments
 //                 }
 //             );
 //         }
-
-
-//         return (
-//             <div>
-//                 <video id="camera" width="640" height="480" autoPlay/>
-//             </div>
-//         );
-
-
-//     }
-// }