|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> |
|
<script type="text/javascript"> |
|
function video() { |
|
var video = $("#live").get()[0]; |
|
var canvas = $("#canvas"); |
|
var canvas2 = $("#canvas2"); |
|
var ctx = canvas.get()[0].getContext('2d'); |
|
var ctx2 = canvas2.get()[0].getContext('2d'); |
|
|
|
navigator.mediaDevices.getUserMedia({ |
|
video: { width: 640, height: 480 } |
|
}).then(function(stream) { |
|
video.srcObject = stream; |
|
}); |
|
|
|
function draw() { |
|
ctx.drawImage(video, 0, 0, 640, 480); |
|
canvas[0].toBlob(function(blob){ |
|
blob.name = "blob.jpeg" |
|
var fd = new FormData(); |
|
fd.append('file', blob, "blob.jpeg"); |
|
$.ajax({ |
|
type: "POST", |
|
url: "http://localhost:8000/api/v1/detection/detect?face_plugins=landmarks2d106", |
|
data: fd, |
|
dataType: 'multipart/form-data', |
|
headers: { |
|
"x-api-key": "f5e06ab3-ef59-495e-9731-82cd52f28aa1" |
|
}, |
|
processData: false, |
|
contentType: false |
|
}).always(function( data ) { |
|
const evt = new Event("next_frame", {"bubbles":true, "cancelable":false}); |
|
document.dispatchEvent(evt); |
|
var body = JSON.parse(data.responseText); |
|
var box = JSON.parse(data.responseText).result[0].box; |
|
ctx2.clearRect(0, 0, 640, 480); |
|
ctx2.drawImage(video, 0, 0, 640, 480); |
|
ctx2.strokeStyle = 'green'; |
|
ctx2.strokeRect(box.x_min, box.y_min, box.x_max - box.x_min, box.y_max - box.y_min); |
|
}); |
|
}, 'image/jpeg', 0.95); |
|
} |
|
|
|
document.addEventListener("next_frame", draw); |
|
|
|
const evt = new Event("next_frame", {"bubbles":true, "cancelable":false}); |
|
document.dispatchEvent(evt); |
|
|
|
} |
|
|
|
|
|
</script> |
|
<title>test</title> |
|
</head> |
|
<body> |
|
<button onclick="video()">video</button> |
|
<video id="live" width="640" height="480" autoplay style="display:none;"></video> |
|
<canvas width="640" id="canvas" height="480" style="display:none;"></canvas> |
|
<canvas width="640" id="canvas2" height="480"></canvas> |
|
</body> |
|
</html> |
