<html>
<body>
<img id="img1">
<video id="webcam" width="400" height="300" autoplay></video>
<canvas id="overlay" width="400" height="300"></canvas>
<style>
#webcam, #overlay {position: absolute;top: 0;left: 0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/auduno/clmtrackr/dev/build/clmtrackr.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
const video = $('#webcam')[0];
const ctrack = new clm.tracker(); // ДОБАВЛЕНИЕ ЭТОЙ СТРОЧКИ ВЫЗЫВАЕТ ОШИБКУ
ctrack.init();
ctracker.start(videoElement);
function onStreaming(stream) {
video.srcObject = stream;
ctrack.start(video);
}
navigator.mediaDevices.getUserMedia({ video: true }).then(onStreaming);
});
var img1=document.getElementById("img1");
var img2=new Image(); // Создаём изображение
img2.src = '/8dfc376b.png';
var canvas=document.getElementById("overlay")
var image1=canvas.getContext("2d");
image1.drawImage(img1,110,70);
image1.drawImage(img1,10,10,70,70);
image1.drawImage(img1,0,90,110,70,10,200,100,50);
img2.onload = function() {
image1.drawImage(img2,120,105,150,45);
}
</script>
</body>
</html>
Добавляю в код строчку:
var ctracker = new clm.tracker();
получаю ошибку:
Uncaught ReferenceError: clm is not defined
at HTMLDocument.<anonymous> (new-fitting.php:15)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
Делаю по инструкции:
https://habr.com/ru/company/ruvds/blog/426055/
Поиск лица
Теперь давайте воспользуемся библиотекой clmtrackr.js для поиска лица на видео. Для начала инициализируем систему слежения за лицом, добавив следующий код после const video = ...:
const ctrack = new clm.tracker();
ctrack.init();
Теперь, в функции onStreaming(), мы подключаем систему поиска лица, добавляя туда следующую команду:
ctrack.start(video);
Это всё, что нам нужно. Теперь система сможет распознать лицо в видеопотоке.
