|
|
|
var socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port, { |
|
transports: ['websocket'] |
|
}); |
|
|
|
socket.on('connect', function () { |
|
console.log("Connected...!", socket.connected) |
|
}); |
|
|
|
|
|
var gender = document.getElementById('gender') |
|
var age = document.getElementById('age') |
|
var emotion = document.getElementById('emotion') |
|
socket.on('result',(data) =>{ |
|
|
|
gender.innerHTML = data['gender'] |
|
age.innerHTML = data['age'] |
|
emotion.innerHTML = data['emotion'] |
|
}); |
|
|
|
|
|
var video = document.getElementById('videoElement'); |
|
var canvas = document.getElementById('canvas'); |
|
var context = canvas.getContext('2d'); |
|
var send_data; |
|
|
|
video.width = 400; |
|
video.height = 300; |
|
|
|
const FPS = 10; |
|
|
|
function send() { |
|
width = video.width; |
|
height = video.height; |
|
context.drawImage(video, 0, 0, width, height); |
|
var data = canvas.toDataURL('image/jpeg', 0.5); |
|
context.clearRect(0, 0, width, height); |
|
socket.emit('image', data); |
|
}; |
|
|
|
function start_camera() { |
|
send_data = setInterval(send, 1000 / FPS) |
|
let devices = navigator.mediaDevices |
|
if (!devices || !devices.getUserMedia) { |
|
console.log("getUserMedia() not supported."); |
|
return; |
|
} |
|
devices.getUserMedia({ |
|
video: true |
|
}) |
|
.then(function (vidstream) { |
|
if ("srcObject" in video) { |
|
video.srcObject = vidstream; |
|
|
|
} else { |
|
video.src = window.src = window.URL.createObjectURL(vidstream); |
|
|
|
} |
|
video.onloadeddata = function (e) { |
|
video.play(); |
|
}; |
|
|
|
}) |
|
.catch(function (e) { |
|
console.log(e.name + ": " + e.massage); |
|
}); |
|
}; |
|
|
|
function stop_camera() { |
|
video.srcObject.getTracks()[0].stop(); |
|
video.srcObject = null; |
|
clearInterval(send_data); |
|
}; |