Canvas on Video Streaming dont match correctly on the face in mobile phone cam

[ryanacon]

The canvas draw it on the face, change dimentions (width and height sizes) when I use it on mobile phone cam (for example `iphone).

[Mactacs]

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);

[ryanacon]

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)

[aboutZZ]

I solved this issue by adding css style: <video id="video" width="960" height="1280" style="width: 960px;height: 1280px;" autoplay muted></video>