Open ryanacon opened 4 years ago
You need to set the canvas size the same as the size of the video element. const videoEl = document.getElementById('video'); document.getElementById('overlay').style.display = "block"; const dims = faceapi.matchDimensions(canvas, videoEl, true); dims.height = videoEl.offsetHeight; dims.width = videoEl.offsetWidth; canvas.height = videoEl.offsetHeight; canvas.width = videoEl.offsetWidth; const resizedResult = faceapi.resizeResults(result, dims); faceapi.draw.drawDetections(canvas, resizedResult);
Mactas, thanks! , but did´t fix the problem
I think, the function of the api named "matchDimensions" do the same that you approach. In the web browser when I test the responsiveness of the app, it´´s Ok, but when a I Test on mobile, the face landmarks and the bounding box the size changes exceeding the face limits.
video.addEventListener('play', () => { const canvas = faceapi.createCanvasFromMedia(video); const displaySize = { width: video.width, height: video.height } document.body.append(canvas) faceapi.matchDimensions(canvas, displaySize) setInterval(async () => { const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions() const resizeDetections = faceapi.resizeResults(detections, displaySize) canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height) faceapi.draw.drawDetections(canvas, resizeDetections) faceapi.draw.drawFaceLandmarks(canvas, resizeDetections) faceapi.draw.drawFaceExpressions(canvas, resizeDetections) }, 100)
I solved this issue by adding css style:
<video id="video" width="960" height="1280" style="width: 960px;height: 1280px;" autoplay muted></video>
The canvas draw it on the face, change dimentions (width and height sizes) when I use it on mobile phone cam (for example `iphone).