Skip to content

F
face
Commit 674e0cda by vincent
Options

fixed face detection examples + video face detection example (debug)

parent 18f23a1c
Showing with 120 additions and 10 deletions
examples/public/commons.js
...@@ -100,13 +100,13 @@ function renderFaceImageSelectList(selectListId, onChange, initialValue) { ...@@ -100,13 +100,13 @@ function renderFaceImageSelectList(selectListId, onChange, initialValue) {
} }
function renderImageSelectList(selectListId, onChange, initialValue) { function renderImageSelectList(selectListId, onChange, initialValue) {
const images = [1, 2, 3, 4, 5] const images = [1, 2, 3, 4, 5].map(idx => `bbt${idx}.jpg`)
function renderChildren(select) { function renderChildren(select) {
images.forEach(imageName => images.forEach(imageName =>
renderOption( renderOption(
select, select,
`${imageName}.jpg`, imageName,
getImageUri(`${imageName}.jpg`) getImageUri(imageName)
) )
) )
} }
...@@ -114,7 +114,7 @@ function renderImageSelectList(selectListId, onChange, initialValue) { ...@@ -114,7 +114,7 @@ function renderImageSelectList(selectListId, onChange, initialValue) {
renderSelectList( renderSelectList(
selectListId, selectListId,
onChange, onChange,
getImageUri(`${initialValue}.jpg`), getImageUri(initialValue),
renderChildren renderChildren
) )
} }
\ No newline at end of file
examples/public/styles.css
...@@ -32,3 +32,9 @@ ...@@ -32,3 +32,9 @@
.margin { .margin {
margin: 20px; margin: 20px;
} }
#overlay {
position: absolute;
top: 0;
left: 0;
}
\ No newline at end of file
examples/views/faceDetection.html
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<div style="position: relative" class="margin"> <div style="position: relative" class="margin">
<img id="img" src="" /> <img id="img" src="" style="max-width: 800px;" />
<canvas id="overlay" style="position: absolute; top: 0; left: 0;" /> <canvas id="overlay" />
</div> </div>
<div class="row side-by-side"> <div class="row side-by-side">
<div id="selectList"></div> <div id="selectList"></div>
...@@ -57,12 +57,17 @@ ...@@ -57,12 +57,17 @@
} }
async function updateResults() { async function updateResults() {
const imgEl = $(`#img`).get(0)
result = await net.locateFaces( result = await net.locateFaces(
await facerecognition.mediaSrcToImageData($(`#img`).get(0).src), await facerecognition.mediaSrcToImageData(imgEl.src),
minConfidence minConfidence
) )
facerecognition.drawMediaToCanvas('overlay', 'img') const canvas = $('#overlay').get(0)
facerecognition.drawDetection('overlay', result) const width = $(`#img`).width()
const height = $(`#img`).height()
canvas.width = width
canvas.height = height
facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height)))
} }
async function onSelectionChanged(uri) { async function onSelectionChanged(uri) {
...@@ -84,7 +89,7 @@ ...@@ -84,7 +89,7 @@
async (uri) => { async (uri) => {
await onSelectionChanged(uri) await onSelectionChanged(uri)
}, },
1 'bbt1.jpg'
) )
run() run()
}) })
......
examples/views/faceDetectionVideo.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<script src="face-recognition.min.js"></script>
<script src="axios.min.js"></script>
<script src="commons.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
<div style="position: relative" class="margin">
<video src="media/bbt.mp4" onplay="onPlay(this)" autoplay muted></video>
<canvas id="overlay" />
</div>
<div class="row side-by-side">
<div id="selectList"></div>
<div class="row">
<label for="minConfidence">Min Confidence:</label>
<input disabled value="0.7" id="minConfidence" type="text" class="bold">
</div>
<button
class="waves-effect waves-light btn"
onclick="onDecreaseThreshold()"
>
<i class="material-icons left">-</i>
</button>
<button
class="waves-effect waves-light btn"
onclick="onIncreaseThreshold()"
>
<i class="material-icons left">+</i>
</button>
</div>
</div>
<script>
let minConfidence = 0.7
let net, result
function onIncreaseThreshold() {
minConfidence = Math.min(facerecognition.round(minConfidence + 0.1), 1.0)
$('#minConfidence').val(minConfidence)
updateResults()
}
function onDecreaseThreshold() {
minConfidence = Math.max(facerecognition.round(minConfidence - 0.1), 0.1)
$('#minConfidence').val(minConfidence)
updateResults()
}
async function onPlay(videoEl) {
if(videoEl.paused || videoEl.ended)
return false
console.time('frame')
const width = $(videoEl).innerWidth()
const height = $(videoEl).innerHeight()
videoEl.width = width
videoEl.height = height
const canvas = $('#overlay').get(0)
canvas.width = width
canvas.height = height
const fromPixelsCanvas = document.createElement('canvas')
fromPixelsCanvas.width = videoEl.width
fromPixelsCanvas.height = videoEl.height
fromPixelsCanvas.getContext('2d').drawImage(
videoEl, 0, 0, videoEl.width, videoEl.height)
result = await net.locateFaces(fromPixelsCanvas, minConfidence)
console.timeEnd('frame')
console.log(facerecognition.tf.memory())
facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height)))
setTimeout(() => onPlay(videoEl))
}
async function run() {
net = await initFaceDetectionNet()
$('#loader').hide()
}
$(document).ready(function() {
renderNavBar('#navbar', 'face_detection_video')
run()
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment