-
Notifications
You must be signed in to change notification settings - Fork 57
/
Copy pathESP32-CAM_MQTT_STILL_FLOW.html
90 lines (82 loc) · 3.75 KB
/
ESP32-CAM_MQTT_STILL_FLOW.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html><head><title>MQTT CLIENT</title><meta charset='utf-8'><script src='https://fustyles.github.io/webduino/SpBlocklyJS/GameElements_20190131/gameelements.js'></script><script src='https://unpkg.com/mqtt/dist/mqtt.min.js'></script></head><body><script>const delay=(seconds)=>{return new Promise((resolve)=>{setTimeout(resolve,seconds*1000);});};const main=async()=>{
var state, command, myTimerPublish;
state = false;
command = '';
head_add_viewport(0.95,0.95,2,"yes");
div_create('server',80,30,0,10,"none",1,'#000000','#ffffff','#000000',14,1,'Server',999,true);
text_create('server',250,30,100,10,'#ffffff','#000000',14,1,'wss://broker.emqx.io:8084/mqtt',999,true);
div_create('subscribe',80,30,0,40,"none",1,'#000000','#ffffff','#000000',14,1,'Subscribe',999,true);
text_create('subscribe',250,30,100,40,'#ffffff','#000000',14,1,'yourName/sendstill',999,true);
div_create('publish',80,30,0,70,"none",1,'#000000','#ffffff','#000000',14,1,'Publish',999,true);
text_create('publish',250,30,100,70,'#ffffff','#000000',14,1,'yourName/getstill',999,true);
div_create('format',80,30,0,110,"none",1,'#000000','#ffffff','#000000',14,1,'Format',999,true);
select_create('',100,30,100,110,'#ffffff','#000000',14,1,[['binary', 'binary'], ['base64', 'base64']],'binary',999,true);
checkbox_create('',210,110,12,'',true,1,999,true);
div_create('',100,30,230,110,"none",1,'#000000','#ffffff','#000000',14,1,'Master',999,true);
a_create('',80,30,280,110,"none",1,'#000000','#ffffff','#000000',12,1,'FIRMWARE','https://github.com/fustyles/Arduino/blob/master/ESP32-CAM_MQTT_STILL_FLOW/ESP32-CAM_MQTT_STILL_FLOW.ino',"_blank",999,true);
button_create('set',100,30,0,150,1,null,'Connect',12,999,true);
button_create('start',100,30,250,150,1,null,'Get Still',12,999,true);
div_create('state',100,30,120,150,"none",1,'#000000','#ffffff','#000000',18,1,'',999,true);
image_create_stream('','',0,190,999,true);
async function gamebutton_set_onclick (event) {
div_set('state',"innerHTML","");
const clientId = "mqtt_" + Math.random().toString(16).substr(2, 8);
const options = {
username: '',
password: '',
keepalive: 60,
clientId: clientId,
protocolId: "MQTT",
protocolVersion: 4,
clean: true,
reconnectPeriod: 1000,
connectTimeout: 30 * 1000
}
var mqtt_client = mqtt.connect((text_get('server',"value")),options);
mqtt_client.on("connect", ()=>{
div_set('state',"innerHTML","connected");
mqtt_client.subscribe((text_get('subscribe',"value")));
setInterval(async function(){
if (state == true) {
if (command == '') {
clearInterval(myTimerPublish);
command = 'getstill';
if ((checkbox_get('',"checked")) == true) {
mqtt_client.publish((text_get('publish',"value")), command);
}
myTimerPublish = setInterval(async function(){
if (command != '') {
if ((checkbox_get('',"checked")) == true) {
mqtt_client.publish((text_get('publish',"value")), command);
}
}
},30000);
}
} else {
clearInterval(myTimerPublish);
command = '';
//image_set('',"url",'');
}
},100);
mqtt_client.on("message", async function (topic, payload) {
if ((select_get('',"selectedValue")) == 'binary')
image_set('',"url",("data:image/jpeg;base64,"+ binarytobase64((payload))));
else if ((select_get('',"selectedValue")) == 'base64')
image_set('',"url",payload);
command = '';
})
}
)
};
document.getElementById("gamebutton_set").addEventListener("click", gamebutton_set_onclick, true);
async function gamebutton_start_onclick (event) {
if (state == true) {
state = false;
button_set('start',"value",'Get Still');
} else {
state = true;
button_set('start',"value",'Stop');
}
};
document.getElementById("gamebutton_start").addEventListener("click", gamebutton_start_onclick, true);
};main();</script></body></html>