Closed sabardotnet closed 8 years ago
Hi @sabardotnet ,
Can you post some code that reproduces this behavior?
var connection;
var webcam;
var datacam;
window.onload = function() {
var video = document.getElementById("video");
var mp3 = document.getElementById("mp3");
var canvas = document.getElementById("canvas");
var pictureButton = document.getElementById("takePicture");
var stopButton = document.getElementById("stop");
var depan = document.getElementById("depan");
var frame2 = document.getElementById("frame2");
var frame3 = document.getElementById("frame3");
var frame4 = document.getElementById("frame4");
var timer = document.getElementById("timer");
webcam = new Webcam(video, canvas);
webcam.initialize();
if (!webcam.isSupported()) {
alert("Your browser doesn't support webrtc");
return;
}
//alert(window.location.hostname);
connection = new WebSocket("ws://localhost:8081")
connection.onopen = function () {
document.getElementById("info_server").innerHTML="Node JS Running";
// document.getElementById("form").onsubmit = function (event) {
// var msg = document.getElementById("msg")
// if (msg.value)
// connection.send(msg.value)
// msg.value = ""
// event.preventDefault()
// }
}
connection.onclose = function () {
console.log("Connection closed")
document.getElementById("info_server").innerHTML="Node JS Closed / Terputus";
}
connection.onerror = function () {
console.error("Connection error")
document.getElementById("info_server").innerHTML="Node JS Error";
}
connection.onmessage = function (event) {
//alert(event.data);
if(event.data!=null){
shoot(event.data);
}
//alert(event.data);
// var div = document.createElement("div")
// div.textContent = event.data
// document.body.appendChild(div)
}
webcam.start();
/* pictureButton.addEventListener("click", function() {
console.log(location.hostname);
// webcam.capture()
$('#gambar_face').attr('src','sales_sinarmas/img/ready.png');
setTimeout(function(){
$('#gambar_face').attr('src','sales_sinarmas/img/face.png');
connection.send("awal");
}, 2000);
}); */
/* depan.addEventListener("click", function() {
$('#gambar_face').attr('src','ready.png');
setTimeout(function(){
$('#gambar_face').attr('src','face.png');
connection.send("awal");
}, 5000); //webcam.capture();
}); */
stopButton.addEventListener("click", function() {
webcam.end();
});
frame2.addEventListener("click", function() {
// connection.send("fr2");
// data=webcam.capture();
watermarkedDataURL(canvas,"fr2");
});
frame3.addEventListener("click", function() {
//connection.send("fr3");
// data=webcam.capture();
watermarkedDataURL(canvas,"fr3");
});
frame4.addEventListener("click", function() {
// connection.send("fr4");
//data=webcam.capture();
watermarkedDataURL(canvas,"fr4");
});
$('#run_node').on('click', function() {
$.ajax({
url : 'run.php'
}).done(function(data) {
console.log(data);
});
});
};
function watermarkedDataURL(canvas,text){
if(datacam==undefined){
alert('Tekan Take Picture Terlebih dulu');
return false;
}
var tempCanvas=document.getElementById("canvas2");
var tempCtx=tempCanvas.getContext('2d')
// var cw,ch;
cw=tempCanvas.width=canvas.width;
ch=tempCanvas.height=canvas.height;
tempCtx.drawImage(canvas,0,0);
// tempCtx.font="24px verdana";
var frame = document.getElementById(text);
tempCtx.drawImage(frame,0,0);
/* data2=tempCanvas.toDataURL('image/png');
$.ajax({
type: "POST",
url: 'kamera/simpan',
//dataType: 'text',
data: {
data : data2
}
}); */
// return data2;
//var textWidth=tempCtx.measureText(text).width;
//var img = new Image;
//img.src ='frame2.png';
//tempCtx.putImageData(10, 10, 70);
/* tempCtx.globalAlpha=.50;
tempCtx.fillStyle='white'
tempCtx.fillText(text,cw-textWidth-10,ch-20);
tempCtx.fillStyle='black'
tempCtx.fillText(text,cw-textWidth-10+2,ch-20+2);
*/
// just testing by adding tempCanvas to document
// document.body.appendChild(tempCanvas);
//return(tempCanvas.toDataURL());
}
function shoot(fr){
var counter=3;
id=setInterval(function() {
counter--;
if(counter < 0) {
counter=3;
mp3.play();
datacam=webcam.capture();
clearInterval(id);
setTimeout(function(){
$('#myModal').modal('show');
}, 1000);
setTimeout(function(){
$('#myModal').modal('hide');
}, 2000);
timer.innerHTML='3';
} else {
timer.innerHTML = counter.toString();
}
}, 1000);
}
my trigger
$('#takePicture').on("click", function() {
console.log(location.hostname);
// webcam.capture()
$('#gambar_face').attr('src','<?php echo base_url();?>img/ready.png');
setTimeout(function(){
$('#gambar_face').attr('src','<?php echo base_url();?>img/face.png');
connection.send("awal");
}, 1000);
});
your websocket chat
var http = require("http")
var ws = require("../../")
var fs = require("fs")
http.createServer(function (req, res) {
fs.createReadStream("index.html").pipe(res)
}).listen(8080)
var server = ws.createServer(function (connection) {
connection.nickname = null
connection.on("text", function (str) {
broadcast(str)
// if (connection.nickname === null) {
// connection.nickname = str
// broadcast(str)
// } else
// broadcast("["+connection.nickname+"] "+str)
})
connection.on("close", function () {
//broadcast(connection.nickname+" left")
})
})
server.listen(8081)
function broadcast(str) {
server.connections.forEach(function (connection) {
connection.sendText(str)
})
}
sorry the problem is setinterval. thanks for your response
I firing connection.send with button clik when I clik button with double clik, it process a function in connection.on("text, function(){ myfuntion })many times n never stop, how to prevent that case. sorh bad english..