const myvideo = document.getElementById("video");
const mycanvas = document.getElementById("canvas");
const mycontext = canvas.getContext("2d");
//----pipe
function onResults(results) {
videoStatus("status:ok");
if (!results.poseLandmarks) {
return;
}
mycontext.save();
mycontext.clearRect(0, 0, mycanvas.width, mycanvas.height);
mycontext.globalCompositeOperation = 'source-in';
mycontext.fillStyle = '#00FF00';
mycontext.fillRect(0, 0, mycanvas.width, mycanvas.height);
mycontext.globalCompositeOperation = 'destination-atop';
mycontext.drawImage(results.image, 0, 0, mycanvas.width, mycanvas.height);
mycontext.globalCompositeOperation = 'source-over';
drawConnectors(mycontext, results.poseLandmarks, POSE_CONNECTIONS, {color: '#00FF00', lineWidth: 4});
drawLandmarks(mycontext, results.poseLandmarks, {color: '#FF0000', lineWidth: 2});
mycontext.restore();
}
const pose = new Pose({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
}});
pose.setOptions({
modelComplexity: 1,
smoothLandmarks: true,
enableSegmentation: true,
smoothSegmentation: true,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
pose.onResults(onResults);
const camera = new Camera(myvideo, {
onFrame: async () => {
await pose.send({image: myvideo});
},
width: wid,
height: hei
});
//----SELECT
var selectSource = document.querySelector('select#videoSource');
selectSource.onchange = camChanged;
var constraints = undefined;
//----change camera
function camChanged(){
cameraid = selectSource.value;
document.cookie = 'cameraid=' + selectSource.value + ';max-age=86400';
location.reload();
}
//------DEVICE
function devStart(){
videoStatus('checking camera devices...');
if (!navigator.mediaDevices) {
videoStatus('mediaDevices is NOT supported.');
return false;
}
devInit().then(deviceGet).then(deviceEnum);
}
function devInit(){
videoSource = deviceGetCookie();
constraints = {
video: {deviceId: videoSource ? {exact: videoSource} : undefined},
};
return navigator.mediaDevices.getUserMedia(constraints);
}
function deviceGetCookie(){
if(cameraid != '')return cameraid;
var cookies = document.cookie;
var cookiesArray = cookies.split(';');
for(var c of cookiesArray){
var cArray = c.split('=');
if( cArray[0] == 'cameraid'){
return cArray[1];
break;
}
}
return undefined;
}
function deviceGet() {
return navigator.mediaDevices.enumerateDevices();
}
function deviceEnum(deviceInfos) {
window.deviceInfos = deviceInfos;
for (const deviceInfo of deviceInfos) {
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
//if(cameraid=='')cameraid = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label;
selectSource.appendChild(option);
}
}
videoStatus('
initializing ...(It may take 20 secs or more)');
camera.start();
}
//----change size
function sizeChanged(obj){
let aSize = obj.options[obj.selectedIndex].value.split(",");
window.location.href="?cmd=setsize&relcmd=pipeface&w=" + aSize[0] + "&h=" + aSize[1];
}
//------MISC
function videoStatus(s){
$("#dResult").html(s);
}
window.onload = function(){
devStart();
//camera.start();
}