guybrush/face-cam.html

## face-cam.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>face-landmark-cam-example</title>
</head>
<body>
<style>
#container {position:relative;}

#overlay {position:absolute; top:0; left:0;}
</style>
<h1>face-cam-detection</h1>
<div id="container">
<video id="video" autoplay playsinline></video>
<canvas id="overlay"></canvas>
</div>
<button id="play">play</button>
<div id="stats"></div>
<!-- <base href="https://rawgit.com/justadudewhohacks/face-api.js/master/"> -->
<base href="https://rawgit.com/guybrush/face-api.js/sourcemaps-built2/">
<script src="dist/face-api.js"></script>
<script>
let minConfidence = 0.7
var input
var loaded = false
var paused = true
var elButton = document.getElementById('play')
var elStats = document.getElementById('stats')
var elVideo = document.getElementById('video')
var elOverlay = document.getElementById('overlay')
var videoConstraints = {audia:false,video:{facingMode:'environment'}}
navigator.mediaDevices.getUserMedia(videoConstraints)
.then((stream)=>{
  elVideo.srcObject = stream
  // ;(async function(){
  //   console.log('vid -> netInput')
  //   input = await faceapi.toNetInput(elVideo)
  //   console.log('input ready')
  // })()
})
.catch((err)=>{
  console.log('error',err)
})
load()

elButton.addEventListener('click',onClick)

function onClick(){
  if (paused) {
    if (!loaded || elVideo.paused || elVideo.ended || !elVideo.srcObject)
      return
    paused = false
    elButton.innerHTML = 'pause'
    play()
  } else {
    paused = true
    elButton.innerHTML = 'play'
  }
}

async function load() {
  elButton.innerHTML = 'loading models ..'
  await faceapi.loadFaceDetectionModel('weights/')
  console.log('did load detection-model')

  // await faceapi.loadFaceLandmarkModel('weights/')
  // console.log('did load landmark-model')

  elOverlay.width = elVideo.videoWidth
  elOverlay.height = elVideo.videoHeight
  loaded = true
  elButton.innerHTML = 'play'
}

async function play() {
  if (paused || !loaded || elVideo.paused || elVideo.ended || !elVideo.srcObject)
    return
  var input = await faceapi.toNetInput(elVideo)
  var {videoWidth,videoHeight} = elVideo
  var t0 = Date.now()

  var faces = await faceapi.locateFaces(input, minConfidence)
  var t1 = Date.now()

  // var landmarks = await faceapi.detectLandmarks(elVideo)
  var t2 = Date.now()

  var context = elOverlay.getContext('2d')
  context.clearRect(0, 0, elOverlay.width, elOverlay.height)
  faceapi.drawDetection(elOverlay,faces.map(det=>det.forSize(videoWidth,videoHeight)))

  stats.innerHTML=`<pre>
detect faces:     ${t1-t0}ms
detect landmarks: ${t2-t1}ms</pre>`

  requestAnimationFrame(play)
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>face-landmark-cam-example</title>
	</head>
	<body>
	<style>
	#container {position:relative;}

	#overlay {position:absolute; top:0; left:0;}
	</style>
	<h1>face-cam-detection</h1>
	<div id="container">
	<video id="video" autoplay playsinline></video>
	<canvas id="overlay"></canvas>
	</div>
	<button id="play">play</button>
	<div id="stats"></div>
	<!-- <base href="https://rawgit.com/justadudewhohacks/face-api.js/master/"> -->
	<base href="https://rawgit.com/guybrush/face-api.js/sourcemaps-built2/">
	<script src="dist/face-api.js"></script>
	<script>
	let minConfidence = 0.7
	var input
	var loaded = false
	var paused = true
	var elButton = document.getElementById('play')
	var elStats = document.getElementById('stats')
	var elVideo = document.getElementById('video')
	var elOverlay = document.getElementById('overlay')
	var videoConstraints = {audia:false,video:{facingMode:'environment'}}
	navigator.mediaDevices.getUserMedia(videoConstraints)
	.then((stream)=>{
	elVideo.srcObject = stream
	// ;(async function(){
	// console.log('vid -> netInput')
	// input = await faceapi.toNetInput(elVideo)
	// console.log('input ready')
	// })()
	})
	.catch((err)=>{
	console.log('error',err)
	})
	load()

	elButton.addEventListener('click',onClick)

	function onClick(){
	if (paused) {
	if (!loaded \|\| elVideo.paused \|\| elVideo.ended \|\| !elVideo.srcObject)
	return
	paused = false
	elButton.innerHTML = 'pause'
	play()
	} else {
	paused = true
	elButton.innerHTML = 'play'
	}
	}

	async function load() {
	elButton.innerHTML = 'loading models ..'
	await faceapi.loadFaceDetectionModel('weights/')
	console.log('did load detection-model')

	// await faceapi.loadFaceLandmarkModel('weights/')
	// console.log('did load landmark-model')

	elOverlay.width = elVideo.videoWidth
	elOverlay.height = elVideo.videoHeight
	loaded = true
	elButton.innerHTML = 'play'
	}

	async function play() {
	if (paused \|\| !loaded \|\| elVideo.paused \|\| elVideo.ended \|\| !elVideo.srcObject)
	return
	var input = await faceapi.toNetInput(elVideo)
	var {videoWidth,videoHeight} = elVideo
	var t0 = Date.now()

	var faces = await faceapi.locateFaces(input, minConfidence)
	var t1 = Date.now()

	// var landmarks = await faceapi.detectLandmarks(elVideo)
	var t2 = Date.now()

	var context = elOverlay.getContext('2d')
	context.clearRect(0, 0, elOverlay.width, elOverlay.height)
	faceapi.drawDetection(elOverlay,faces.map(det=>det.forSize(videoWidth,videoHeight)))

	stats.innerHTML=`<pre>
	detect faces: ${t1-t0}ms
	detect landmarks: ${t2-t1}ms</pre>`

	requestAnimationFrame(play)
	}

	</script>
	</body>
	</html>