<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Face Detection Camera Example</title><linkhref="js_example_style.css"rel="stylesheet"type="text/css"/></head><body><h2>Face Detection Camera Example</h2><p>
Click <b>Start/Stop</b> button to start or stop the camera capture.<br>
The <b>videoInput</b> is a <video> element used as face detector input.
The <b>canvasOutput</b> is a <canvas> element used as face detector output.<br>
The code of <textarea> will be executed when video is started.
You can modify the code to investigate more.
</p><div><divclass="control"><buttonid="startAndStop"disabled>Start</button></div><textareaclass="code"rows="3"cols="80"id="codeEditor"spellcheck="false"></textarea></div><pclass="err"id="errorMessage"></p><div><tablecellpadding="0"cellspacing="0"width="0"border="0"><tr><td><videoid="videoInput"width=300height="400"></video></td><td><canvasid="canvasOutput"width=300height=400></canvas></td><td><canvasid="canvasOutput2"width=300height=400></canvas></td><td></td><td></td></tr><tr><td><divclass="caption">videoInput</div></td><td><divclass="caption">canvasOutput</div></td><td></td><td></td></tr></table></div><divid="timerBox">5</div><ahref="https://www.baidu.com">baidu</a><!--<script type="text/javascript" src="opencv.js"></script>--><scriptsrc="adapter-5.0.4.js"type="text/javascript"></script><scriptsrc="utils.js"type="text/javascript"></script><scripttype="text/javascript">let processIndex =3let sec =5let timerBox = document.getElementById('timerBox')let timer =setInterval(()=>{if(sec >0){
sec -=1
timerBox.innerText = sec
}else{clearInterval(timer)}},1000)let utils =newUtils('errorMessage');// utils.loadCode('codeSnippet', 'codeEditor');let streaming =false;let videoInput = document.getElementById('videoInput');let startAndStop = document.getElementById('startAndStop');let canvasOutput = document.getElementById('canvasOutput');let canvasContext = canvasOutput.getContext('2d');
startAndStop.addEventListener('click',()=>{if(!streaming){
utils.clearError();
utils.startCamera('qvga', onVideoStarted,'videoInput');}else{
utils.stopCamera();onVideoStopped();}});functiononVideoStarted(){
streaming =true;
startAndStop.innerText ='Stop';// videoInput.width = 300;// videoInput.width = videoInput.videoWidth;// videoInput.height = videoInput.videoHeight;// utils.executeCode('codeEditor');
utils.loadOpenCVprocess();}functiononVideoStopped(){
streaming =false;
canvasContext.clearRect(0,0, canvasOutput.width, canvasOutput.height);
startAndStop.innerText ='Start';}
utils.loadOpenCv(()=>{let faceCascadeFile ='haarcascade_frontalface_default.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile,()=>{
startAndStop.removeAttribute('disabled');});});</script></body></html>```