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) {
}
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) {
images.forEach(imageName =>
renderOption(
select,
`${imageName}.jpg`,
getImageUri(`${imageName}.jpg`)
imageName,
getImageUri(imageName)
)
)
}
......@@ -114,7 +114,7 @@ function renderImageSelectList(selectListId, onChange, initialValue) {
renderSelectList(
selectListId,
onChange,
getImageUri(`${initialValue}.jpg`),
getImageUri(initialValue),
renderChildren
)
}
\ No newline at end of file
examples/public/styles.css
......@@ -31,4 +31,10 @@
.margin {
margin: 20px;
}
#overlay {
position: absolute;
top: 0;
left: 0;
}
\ No newline at end of file
examples/views/faceDetection.html
......@@ -16,8 +16,8 @@
<div class="indeterminate"></div>
</div>
<div style="position: relative" class="margin">
<img id="img" src="" />
<canvas id="overlay" style="position: absolute; top: 0; left: 0;" />
<img id="img" src="" style="max-width: 800px;" />
<canvas id="overlay" />
</div>
<div class="row side-by-side">
<div id="selectList"></div>
......@@ -57,12 +57,17 @@
}
async function updateResults() {
const imgEl = $(`#img`).get(0)
result = await net.locateFaces(
await facerecognition.mediaSrcToImageData($(`#img`).get(0).src),
await facerecognition.mediaSrcToImageData(imgEl.src),
minConfidence
)
facerecognition.drawMediaToCanvas('overlay', 'img')
facerecognition.drawDetection('overlay', result)
const canvas = $('#overlay').get(0)
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) {
......@@ -84,7 +89,7 @@
async (uri) => {
await onSelectionChanged(uri)
},
1
'bbt1.jpg'
)
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