diff --git a/samples/face-detection-wasm/css/style.css b/samples/css/style.css similarity index 100% rename from samples/face-detection-wasm/css/style.css rename to samples/css/style.css diff --git a/samples/face-detection-wasm/README.txt b/samples/face-detection-wasm/README.txt deleted file mode 100644 index 7bece37..0000000 --- a/samples/face-detection-wasm/README.txt +++ /dev/null @@ -1,3 +0,0 @@ -A Pen created at CodePen.io. You can find this one at http://codepen.io/huningxin/pen/ZJyOBW. - - \ No newline at end of file diff --git a/samples/face-detection-wasm/js/index.js b/samples/face-detection-wasm/js/index.js deleted file mode 100644 index 417b892..0000000 --- a/samples/face-detection-wasm/js/index.js +++ /dev/null @@ -1,190 +0,0 @@ -let videoWidth, videoHeight; - -let qvga = {width: {exact: 320}, height: {exact: 240}}; - -let vga = {width: {exact: 640}, height: {exact: 480}}; - -let resolution = window.innerWidth < 640 ? qvga : vga; - -// whether streaming video from the camera. -let streaming = false; - -let video = document.getElementById('video'); -let canvasOutput = document.getElementById('canvasOutput'); -let canvasOutputCtx = canvasOutput.getContext('2d'); -let stream = null; - -let detectFace = document.getElementById('face'); -let detectEye = document.getElementById('eye'); - -let info = document.getElementById('info'); -if (!window.WebAssembly) { - info.innerHTML = 'WebAssembly is not supported.' -} - -function startCamera() { - if (streaming) return; - navigator.mediaDevices.getUserMedia({video: resolution, audio: false}) - .then(function(s) { - stream = s; - video.srcObject = s; - video.play(); - }) - .catch(function(err) { - console.log("An error occured! " + err); - }); - - video.addEventListener("canplay", function(ev){ - if (!streaming) { - videoWidth = video.videoWidth; - videoHeight = video.videoHeight; - video.setAttribute("width", videoWidth); - video.setAttribute("height", videoHeight); - canvasOutput.width = videoWidth; - canvasOutput.height = videoHeight; - streaming = true; - } - startVideoProcessing(); - }, false); -} - -let faceClassifier = null; -let eyeClassifier = null; - -let src = null; -let dstC1 = null; -let dstC3 = null; -let dstC4 = null; - -let canvasInput = null; -let canvasInputCtx = null; - -let canvasBuffer = null; -let canvasBufferCtx = null; - -function startVideoProcessing() { - if (!streaming) { console.warn("Please startup your webcam"); return; } - stopVideoProcessing(); - canvasInput = document.createElement('canvas'); - canvasInput.width = videoWidth; - canvasInput.height = videoHeight; - canvasInputCtx = canvasInput.getContext('2d'); - - canvasBuffer = document.createElement('canvas'); - canvasBuffer.width = videoWidth; - canvasBuffer.height = videoHeight; - canvasBufferCtx = canvasBuffer.getContext('2d'); - - srcMat = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC4); - grayMat = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC1); - - faceClassifier = new cv.CascadeClassifier(); - faceClassifier.load('haarcascade_frontalface_default.xml'); - - eyeClassifier = new cv.CascadeClassifier(); - eyeClassifier.load('haarcascade_eye.xml'); - - requestAnimationFrame(processVideo); -} - -function processVideo() { - stats.begin(); - canvasInputCtx.drawImage(video, 0, 0, videoWidth, videoHeight); - let imageData = canvasInputCtx.getImageData(0, 0, videoWidth, videoHeight); - srcMat.data.set(imageData.data); - cv.cvtColor(srcMat, grayMat, cv.COLOR_RGBA2GRAY); - let faces = []; - let eyes = []; - let size; - if (detectFace.checked) { - let faceVect = new cv.RectVector(); - let faceMat = new cv.Mat(); - if (detectEye.checked) { - cv.pyrDown(grayMat, faceMat); - size = faceMat.size(); - } else { - cv.pyrDown(grayMat, faceMat); - if (videoWidth > 320) - cv.pyrDown(faceMat, faceMat); - size = faceMat.size(); - } - faceClassifier.detectMultiScale(faceMat, faceVect); - for (let i = 0; i < faceVect.size(); i++) { - let face = faceVect.get(i); - faces.push(new cv.Rect(face.x, face.y, face.width, face.height)); - if (detectEye.checked) { - let eyeVect = new cv.RectVector(); - let eyeMat = faceMat.getRoiRect(face); - eyeClassifier.detectMultiScale(eyeMat, eyeVect); - for (let i = 0; i < eyeVect.size(); i++) { - let eye = eyeVect.get(i); - eyes.push(new cv.Rect(face.x + eye.x, face.y + eye.y, eye.width, eye.height)); - } - eyeMat.delete(); - eyeVect.delete(); - } - } - faceMat.delete(); - faceVect.delete(); - } else { - if (detectEye.checked) { - let eyeVect = new cv.RectVector(); - let eyeMat = new cv.Mat(); - cv.pyrDown(grayMat, eyeMat); - size = eyeMat.size(); - eyeClassifier.detectMultiScale(eyeMat, eyeVect); - for (let i = 0; i < eyeVect.size(); i++) { - let eye = eyeVect.get(i); - eyes.push(new cv.Rect(eye.x, eye.y, eye.width, eye.height)); - } - eyeMat.delete(); - eyeVect.delete(); - } - } - canvasOutputCtx.drawImage(canvasInput, 0, 0, videoWidth, videoHeight); - drawResults(canvasOutputCtx, faces, 'red', size); - drawResults(canvasOutputCtx, eyes, 'yellow', size); - stats.end(); - requestAnimationFrame(processVideo); -} - -function drawResults(ctx, results, color, size) { - for (let i = 0; i < results.length; ++i) { - let rect = results[i]; - let xRatio = videoWidth/size.width; - let yRatio = videoHeight/size.height; - ctx.lineWidth = 3; - ctx.strokeStyle = color; - ctx.strokeRect(rect.x*xRatio, rect.y*yRatio, rect.width*xRatio, rect.height*yRatio); - } -} - -function stopVideoProcessing() { - if (src != null && !src.isDeleted()) src.delete(); - if (dstC1 != null && !dstC1.isDeleted()) dstC1.delete(); - if (dstC3 != null && !dstC3.isDeleted()) dstC3.delete(); - if (dstC4 != null && !dstC4.isDeleted()) dstC4.delete(); -} - -function stopCamera() { - if (!streaming) return; - stopVideoProcessing(); - document.getElementById("canvasOutput").getContext("2d").clearRect(0, 0, width, height); - video.pause(); - video.srcObject=null; - stream.getVideoTracks()[0].stop(); - streaming = false; -} - -function initUI() { - stats = new Stats(); - stats.showPanel(0); - document.getElementById('container').appendChild(stats.dom); -} - -function opencvIsReady() { - console.log('OpenCV.js is ready'); - info.innerHTML = ''; - initUI(); - startCamera(); -} diff --git a/samples/face-detection-wasm/license.txt b/samples/face-detection-wasm/license.txt deleted file mode 100644 index c8a5051..0000000 --- a/samples/face-detection-wasm/license.txt +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/samples/face-detection/css/style.css b/samples/face-detection/css/style.css deleted file mode 100644 index 1cbf60d..0000000 --- a/samples/face-detection/css/style.css +++ /dev/null @@ -1,25 +0,0 @@ -canvas { - border: 1px solid black; -} -.invisible { - display: none; -} -.text-center { - text-align: center; -} -div { - margin: 10px; -} -#info { - font: 16px 'Lucida Grande', sans-serif; -} -.center-block { - display: block; - margin: auto; -} -label { - padding-right: 10px; - width: 25%; - vertical-align: top; - font: 16px 'Lucida Grande', sans-serif; -} \ No newline at end of file diff --git a/samples/face-detection-wasm/index.html b/samples/face-detection/index-wasm.html similarity index 88% rename from samples/face-detection-wasm/index.html rename to samples/face-detection/index-wasm.html index 8dbfa6f..f9d010e 100644 --- a/samples/face-detection-wasm/index.html +++ b/samples/face-detection/index-wasm.html @@ -4,7 +4,7 @@ OpenCV.js Face Detection (WebAssembly) - + @@ -26,6 +26,11 @@ + + + - diff --git a/samples/face-detection/index.html b/samples/face-detection/index.html index 5458ab6..84a56be 100644 --- a/samples/face-detection/index.html +++ b/samples/face-detection/index.html @@ -4,7 +4,7 @@ OpenCV.js Face Detection - +
@@ -25,6 +25,11 @@ + + + - diff --git a/samples/face-detection/js/index.js b/samples/face-detection/js/index.js index de9d2fb..f7752f0 100644 --- a/samples/face-detection/js/index.js +++ b/samples/face-detection/js/index.js @@ -181,7 +181,11 @@ function initUI() { function opencvIsReady() { console.log('OpenCV.js is ready'); + if (!featuresReady) { + console.log('Requred features are not ready.'); + return; + } info.innerHTML = ''; initUI(); startCamera(); -} \ No newline at end of file +} diff --git a/samples/index.html b/samples/index.html index d3387ef..ce64e89 100644 --- a/samples/index.html +++ b/samples/index.html @@ -18,19 +18,19 @@
diff --git a/samples/libs/utils.js b/samples/libs/utils.js new file mode 100644 index 0000000..04d03d0 --- /dev/null +++ b/samples/libs/utils.js @@ -0,0 +1,30 @@ +function checkFeatures(info, features) { + var wasmSupported = true, webrtcSupported = true; + if (features.webrtc) { + if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { + webrtcSupported = false; + } + } + if (features.wasm && !window.WebAssembly) { + wasmSupported = false; + } + + if (!webrtcSupported || !wasmSupported) { + var text = "Your web browser doesn't support "; + var len = text.length; + if (!webrtcSupported) { + text += "WebRTC"; + } + if (!wasmSupported) { + if (text.length > len) { + text += " and "; + } + text += "WebAssembly" + } + text += "."; + info.innerHTML = text; + return false; + } + + return true; +} \ No newline at end of file diff --git a/samples/video-processing-wasm/README.txt b/samples/video-processing-wasm/README.txt deleted file mode 100644 index 1849d5e..0000000 --- a/samples/video-processing-wasm/README.txt +++ /dev/null @@ -1,3 +0,0 @@ -A Pen created at CodePen.io. You can find this one at http://codepen.io/huningxin/pen/NvjdeN. - - \ No newline at end of file diff --git a/samples/video-processing-wasm/css/style.css b/samples/video-processing-wasm/css/style.css deleted file mode 100644 index 42f8a0b..0000000 --- a/samples/video-processing-wasm/css/style.css +++ /dev/null @@ -1,25 +0,0 @@ -canvas { - border: 1px solid black; -} -.invisible { - display: none; -} -.text-center { - text-align: center; -} -.center-block { - display: block; - margin: auto; -} -.row { - margin: 10px; -} -#info { - font: 14px 'Lucida Grande', sans-serif; -} -tr td { - padding-right: 10px; - width: 25%; - vertical-align: top; - font: 14px 'Lucida Grande', sans-serif; -} \ No newline at end of file diff --git a/samples/video-processing-wasm/js/index.js b/samples/video-processing-wasm/js/index.js deleted file mode 100644 index ddc5bd0..0000000 --- a/samples/video-processing-wasm/js/index.js +++ /dev/null @@ -1,543 +0,0 @@ -let width = 0; -let height = 0; - -let qvga = {width: {exact: 320}, height: {exact: 240}}; - -let vga = {width: {exact: 640}, height: {exact: 480}}; - -let resolution = window.innerWidth < 640 ? qvga : vga; - -// whether streaming video from the camera. -let streaming = false; - -let video = document.getElementById("video"); -let stream = null; -let vc = null; - -let info = document.getElementById('info'); -let container = document.getElementById('container'); -if (!window.WebAssembly) { - info.innerHTML = 'WebAssembly is not supported.' -} - -function startCamera() { - if (streaming) return; - navigator.mediaDevices.getUserMedia({video: resolution, audio: false}) - .then(function(s) { - stream = s; - video.srcObject = s; - video.play(); - }) - .catch(function(err) { - console.log("An error occured! " + err); - }); - - video.addEventListener("canplay", function(ev){ - if (!streaming) { - height = video.videoHeight; - width = video.videoWidth; - video.setAttribute("width", width); - video.setAttribute("height", height); - streaming = true; - vc = new cv.VideoCapture(video); - } - startVideoProcessing(); - }, false); -} - -let lastFilter = ''; -let src = null; -let dstC1 = null; -let dstC3 = null; -let dstC4 = null; - -function startVideoProcessing() { - if (!streaming) { console.warn("Please startup your webcam"); return; } - stopVideoProcessing(); - src = new cv.Mat(height, width, cv.CV_8UC4); - dstC1 = new cv.Mat(height, width, cv.CV_8UC1); - dstC3 = new cv.Mat(height, width, cv.CV_8UC3); - dstC4 = new cv.Mat(height, width, cv.CV_8UC4); - requestAnimationFrame(processVideo); -} - -function passThrough(src) { - return src; -} - -function gray(src) { - cv.cvtColor(src, dstC1, cv.COLOR_RGBA2GRAY); - return dstC1; -} - -function hsv(src) { - cv.cvtColor(src, dstC3, cv.COLOR_RGBA2RGB); - cv.cvtColor(dstC3, dstC3, cv.COLOR_RGB2HSV); - return dstC3; -} - -function canny(src) { - cv.cvtColor(src, dstC1, cv.COLOR_RGBA2GRAY); - cv.Canny(dstC1, dstC1, controls.cannyThreshold1, controls.cannyThreshold2, controls.cannyApertureSize, controls.cannyL2Gradient); - return dstC1; -} - -function inRange(src) { - let lowValue = controls.inRangeLow; - let lowScalar = new cv.Scalar(lowValue, lowValue, lowValue, 255); - let highValue = controls.inRangeHigh; - let highScalar = new cv.Scalar(highValue, highValue, highValue, 255); - let low = new cv.Mat(height, width, src.type(), lowScalar); - let high = new cv.Mat(height, width, src.type(), highScalar); - cv.inRange(src, low, high, dstC1); - low.delete(); high.delete(); - return dstC1; -} - -function threshold(src) { - cv.threshold(src, dstC4, controls.thresholdValue, 200, cv.THRESH_BINARY); - return dstC4; -} - -function adaptiveThreshold(src) { - let mat = new cv.Mat(height, width, cv.CV_8U); - cv.cvtColor(src, mat, cv.COLOR_RGBA2GRAY); - cv.adaptiveThreshold(mat, dstC1, 200, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, Number(controls.adaptiveBlockSize), 2); - mat.delete(); - return dstC1; -} - -function gaussianBlur(src) { - cv.GaussianBlur(src, dstC4, {width: controls.gaussianBlurSize, height: controls.gaussianBlurSize}, 0, 0, cv.BORDER_DEFAULT); - return dstC4; -} - -function bilateralFilter(src) { - let mat = new cv.Mat(height, width, cv.CV_8UC3); - cv.cvtColor(src, mat, cv.COLOR_RGBA2RGB); - cv.bilateralFilter(mat, dstC3, controls.bilateralFilterDiameter, controls.bilateralFilterSigma, controls.bilateralFilterSigma, cv.BORDER_DEFAULT); - mat.delete(); - return dstC3; -} - -function medianBlur(src) { - cv.medianBlur(src, dstC4, controls.medianBlurSize); - return dstC4; -} - -function sobel(src) { - var mat = new cv.Mat(height, width, cv.CV_8UC1); - cv.cvtColor(src, mat, cv.COLOR_RGB2GRAY, 0); - cv.Sobel(mat, dstC1, cv.CV_8U, 1, 0, controls.sobelSize, 1, 0, cv.BORDER_DEFAULT); - mat.delete(); - return dstC1; -} - -function scharr(src) { - var mat = new cv.Mat(height, width, cv.CV_8UC1); - cv.cvtColor(src, mat, cv.COLOR_RGB2GRAY, 0); - cv.Scharr(mat, dstC1, cv.CV_8U, 1, 0, 1, 0, cv.BORDER_DEFAULT); - mat.delete(); - return dstC1; -} - -function laplacian(src) { - var mat = new cv.Mat(height, width, cv.CV_8UC1); - cv.cvtColor(src, mat, cv.COLOR_RGB2GRAY); - cv.Laplacian(mat, dstC1, cv.CV_8U, controls.laplacianSize, 1, 0, cv.BORDER_DEFAULT); - mat.delete(); - return dstC1; -} - -let contoursColor = []; -for (let i = 0; i < 10000; i++) { - contoursColor.push([Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255), 0]); -} - -function contours(src) { - cv.cvtColor(src, dstC1, cv.COLOR_RGBA2GRAY); - cv.threshold(dstC1, dstC4, 120, 200, cv.THRESH_BINARY); - let contours = new cv.MatVector(); - let hierarchy = new cv.Mat(); - cv.findContours(dstC4, contours, hierarchy, Number(controls.contoursMode), Number(controls.contoursMethod), {x: 0, y: 0}); - dstC3.delete(); - dstC3 = cv.Mat.ones(height, width, cv.CV_8UC3); - for (let i = 0; i diff --git a/samples/video-processing-wasm/index.html b/samples/video-processing/index-wasm.html similarity index 90% rename from samples/video-processing-wasm/index.html rename to samples/video-processing/index-wasm.html index 890a38c..b16c265 100644 --- a/samples/video-processing-wasm/index.html +++ b/samples/video-processing/index-wasm.html @@ -42,6 +42,11 @@ + + + - diff --git a/samples/video-processing/index.html b/samples/video-processing/index.html index 5257189..1a2b01b 100644 --- a/samples/video-processing/index.html +++ b/samples/video-processing/index.html @@ -43,7 +43,11 @@ - + + + diff --git a/samples/video-processing/js/index.js b/samples/video-processing/js/index.js index c60a5ad..e5b2eb1 100644 --- a/samples/video-processing/js/index.js +++ b/samples/video-processing/js/index.js @@ -533,6 +533,10 @@ function initUI() { function opencvIsReady() { console.log('OpenCV.js is ready'); + if (!featuresReady) { + console.log('Requred features are not ready.'); + return; + } info.innerHTML = ''; container.className = ''; initUI();