Cross Domain Tracking, My google Tag Manager [Decorate Form = True] its not working - cross-domain

I wanna cross domain tracking, 2 domains [google->Landing page(domain_1)->Website(Domain_2), I did follow some tutorials that set a variable on Google Tag Manager[Img bellow] to Google Analytics.
The issue is works just fine for links but my not to my Forms(Active Campaign Forms service).
The Decorate Form is set to true inside the variable but its not appending any code to the query when change domains.
My Code forms from embedded into my landpage from Optimaze Press
<style>
#_form_33_ { font-size:14px; line-height:1.6; font-family:arial, helvetica, sans-serif; margin:0; }
#_form_33_ * { outline:0; }
._form_hide { display:none; visibility:hidden; }
._form_show { display:block; visibility:visible; }
#_form_33_._form-top { top:0; }
#_form_33_._form-bottom { bottom:0; }
#_form_33_._form-left { left:0; }
#_form_33_._form-right { right:0; }
#_form_33_ input[type="text"],#_form_33_ input[type="date"],#_form_33_ textarea { padding:6px; height:auto; border:#979797 1px solid; border-radius:4px; color:#000 !important; font-size:14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#_form_33_ textarea { resize:none; }
#_form_33_ ._submit { -webkit-appearance:none; cursor:pointer; font-family:arial, sans-serif; font-size:14px; text-align:center; background:#527a4b !important; border:0 !important; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; border-radius:4px !important; color:#fff !important; padding:8px !important; }
#_form_33_ ._close-icon { cursor:pointer; background-image:url('https://d226aj4ao1t61q.cloudfront.net/esfkyjh1u_forms-close-dark.png'); background-repeat:no-repeat; background-size:14.2px 14.2px; position:absolute; display:block; top:11px; right:9px; overflow:hidden; width:16.2px; height:16.2px; }
#_form_33_ ._close-icon:before { position:relative; }
#_form_33_ ._form-body { margin-bottom:30px; }
#_form_33_ ._form-image-left { width:150px; float:left; }
#_form_33_ ._form-content-right { margin-left:164px; }
#_form_33_ ._form-branding { color:#fff; font-size:10px; clear:both; text-align:left; margin-top:30px; font-weight:100; }
#_form_33_ ._form-branding ._logo { display:block; width:130px; height:14px; margin-top:6px; background-image:url('https://d226aj4ao1t61q.cloudfront.net/hh9ujqgv5_aclogo_li.png'); background-size:130px auto; background-repeat:no-repeat; }
#_form_33_ ._form-label,#_form_33_ ._form_element ._form-label { font-weight:bold; margin-bottom:5px; display:block; }
#_form_33_._dark ._form-branding { color:#333; }
#_form_33_._dark ._form-branding ._logo { background-image:url('https://d226aj4ao1t61q.cloudfront.net/jftq2c8s_aclogo_dk.png'); }
#_form_33_ ._form_element { position:relative; margin-bottom:10px; font-size:0; max-width:100%; }
#_form_33_ ._form_element * { font-size:14px; }
#_form_33_ ._form_element._clear { clear:both; width:100%; float:none; }
#_form_33_ ._form_element._clear:after { clear:left; }
#_form_33_ ._form_element input[type="text"],#_form_33_ ._form_element input[type="date"],#_form_33_ ._form_element select,#_form_33_ ._form_element textarea:not(.g-recaptcha-response) { display:block; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#_form_33_ ._field-wrapper { position:relative; }
#_form_33_ ._inline-style { float:left; }
#_form_33_ ._inline-style input[type="text"] { width:150px; }
#_form_33_ ._inline-style:not(._clear) + ._inline-style:not(._clear) { margin-left:20px; }
#_form_33_ ._form_element img._form-image { max-width:100%; }
#_form_33_ ._clear-element { clear:left; }
#_form_33_ ._full_width { width:100%; }
#_form_33_ ._form_full_field { display:block; width:100%; margin-bottom:10px; }
#_form_33_ input[type="text"]._has_error,#_form_33_ textarea._has_error { border:#f37c7b 1px solid; }
#_form_33_ input[type="checkbox"]._has_error { outline:#f37c7b 1px solid; }
#_form_33_ ._error { display:block; position:absolute; font-size:14px; z-index:10000001; }
#_form_33_ ._error._above { padding-bottom:4px; bottom:39px; right:0; }
#_form_33_ ._error._below { padding-top:4px; top:100%; right:0; }
#_form_33_ ._error._above ._error-arrow { bottom:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #f37c7b; }
#_form_33_ ._error._below ._error-arrow { top:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #f37c7b; }
#_form_33_ ._error-inner { padding:8px 12px; background-color:#f37c7b; font-size:14px; font-family:arial, sans-serif; color:#fff; text-align:center; text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
#_form_33_ ._error-inner._form_error { margin-bottom:5px; text-align:left; }
#_form_33_ ._button-wrapper ._error-inner._form_error { position:static; }
#_form_33_ ._error-inner._no_arrow { margin-bottom:10px; }
#_form_33_ ._error-arrow { position:absolute; width:0; height:0; }
#_form_33_ ._error-html { margin-bottom:10px; }
.pika-single { z-index:10000001 !important; }
#_form_33_ input[type="text"].datetime_date { width:69%; display:inline; }
#_form_33_ select.datetime_time { width:29%; display:inline; height:32px; }
#media all and (min-width:320px) and (max-width:667px) { ::-webkit-scrollbar { display:none; }
#_form_33_ { margin:0; width:100%; min-width:100%; max-width:100%; box-sizing:border-box; }
#_form_33_ * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:1em; }
#_form_33_ ._form-content { margin:0; width:100%; }
#_form_33_ ._form-inner { display:block; min-width:100%; }
#_form_33_ ._form-title,#_form_33_ ._inline-style { margin-top:0; margin-right:0; margin-left:0; }
#_form_33_ ._form-title { font-size:1.2em; }
#_form_33_ ._form_element { margin:0 0 20px; padding:0; width:100%; }
#_form_33_ ._form-element,#_form_33_ ._inline-style,#_form_33_ input[type="text"],#_form_33_ label,#_form_33_ p,#_form_33_ textarea:not(.g-recaptcha-response) { float:none; display:block; width:100%; }
#_form_33_ ._row._checkbox-radio label { display:inline; }
#_form_33_ ._row,#_form_33_ p,#_form_33_ label { margin-bottom:0.7em; width:100%; }
#_form_33_ ._row input[type="checkbox"],#_form_33_ ._row input[type="radio"] { margin:0 !important; vertical-align:middle !important; }
#_form_33_ ._row input[type="checkbox"] + span label { display:inline; }
#_form_33_ ._row span label { margin:0 !important; width:initial !important; vertical-align:middle !important; }
#_form_33_ ._form-image { max-width:100%; height:auto !important; }
#_form_33_ input[type="text"] { padding-left:10px; padding-right:10px; font-size:16px; line-height:1.3em; -webkit-appearance:none; }
#_form_33_ input[type="radio"],#_form_33_ input[type="checkbox"] { display:inline-block; width:1.3em; height:1.3em; font-size:1em; margin:0 0.3em 0 0; vertical-align:baseline; }
#_form_33_ button[type="submit"] { padding:20px; font-size:1.5em; }
#_form_33_ ._inline-style { margin:20px 0 0 !important; }
}
#_form_33_ { position:relative; text-align:left; margin:25px auto 0; padding:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *zoom:1; background:transparent !important; border:0px solid #b0b0b0 !important; width:400px; -moz-border-radius:0px !important; -webkit-border-radius:0px !important; border-radius:0px !important; color:#fff !important; }
#_form_33_ ._form-title { font-size:22px; line-height:22px; font-weight:600; margin-bottom:0; }
#_form_33_:before,#_form_33_:after { content:" "; display:table; }
#_form_33_:after { clear:both; }
#_form_33_._inline-style { width:auto; display:inline-block; }
#_form_33_._inline-style input[type="text"],#_form_33_._inline-style input[type="date"] { padding:10px 12px; }
#_form_33_._inline-style button._inline-style { position:relative; top:27px; }
#_form_33_._inline-style p { margin:0; }
#_form_33_._inline-style ._button-wrapper { position:relative; margin:27px 12.5px 0 20px; }
#_form_33_ ._form-thank-you { position:relative; left:0; right:0; text-align:center; font-size:18px; }
#media all and (min-width:320px) and (max-width:667px) { #_form_33_._inline-form._inline-style ._inline-style._button-wrapper { margin-top:20px !important; margin-left:0 !important; }
}
</style>
<form method="POST" action="https://clickimoveis.activehosted.com/proc.php" id="_form_33_" class="_form _form_33 _inline-form _dark" novalidate>
<input type="hidden" name="u" value="33" />
<input type="hidden" name="f" value="33" />
<input type="hidden" name="s" />
<input type="hidden" name="c" value="0" />
<input type="hidden" name="m" value="0" />
<input type="hidden" name="act" value="sub" />
<input type="hidden" name="v" value="2" />
<div class="_form-content">
<div class="_form_element _x98738766 _full_width " >
<label class="_form-label">
Nome completo*
</label>
<div class="_field-wrapper">
<input type="text" name="fullname" placeholder="Digite seu nome" required/>
</div>
</div>
<div class="_form_element _x52697249 _full_width " >
<label class="_form-label">
E-mail*
</label>
<div class="_field-wrapper">
<input type="text" name="email" placeholder="Digite seu e-mail" required/>
</div>
</div>
<div class="_form_element _x23397806 _full_width " >
<label class="_form-label">
WhatsApp | Telefone*
</label>
<div class="_field-wrapper">
<input type="text" name="phone" placeholder="Digite seu telefone" required/>
</div>
</div>
<div class="_button-wrapper _full_width">
<button id="_form_33_submit" class="_submit" type="submit">
Quero olhar as OFERTAS EXCLUSIVAS !
</button>
</div>
<div class="_clear-element">
</div>
</div>
<div class="_form-thank-you" style="display:none;">
</div>
</form><script type="text/javascript">
window.cfields = [];
window._show_thank_you = function(id, message, trackcmp_url) {
var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you');
form.querySelector('._form-content').style.display = 'none';
thank_you.innerHTML = message;
thank_you.style.display = 'block';
if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {
// Site tracking URL to use after inline form submission.
_load_script(trackcmp_url);
}
if (typeof window._form_callback !== 'undefined') window._form_callback(id);
};
window._show_error = function(id, message, html) {
var form = document.getElementById('_form_' + id + '_'), err = document.createElement('div'), button = form.querySelector('button'), old_error = form.querySelector('._form_error');
if (old_error) old_error.parentNode.removeChild(old_error);
err.innerHTML = message;
err.className = '_error-inner _form_error _no_arrow';
var wrapper = document.createElement('div');
wrapper.className = '_form-inner';
wrapper.appendChild(err);
button.parentNode.insertBefore(wrapper, button);
document.querySelector('[id^="_form"][id$="_submit"]').disabled = false;
if (html) {
var div = document.createElement('div');
div.className = '_error-html';
div.innerHTML = html;
err.appendChild(div);
}
};
window._load_script = function(url, callback) {
var head = document.querySelector('head'), script = document.createElement('script'), r = false;
script.type = 'text/javascript';
script.charset = 'utf-8';
script.src = url;
if (callback) {
script.onload = script.onreadystatechange = function() {
if (!r && (!this.readyState || this.readyState == 'complete')) {
r = true;
callback();
}
};
}
head.appendChild(script);
};
(function() {
if (window.location.search.search("excludeform") !== -1) return false;
var getCookie = function(name) {
var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
var setCookie = function(name, value) {
var now = new Date();
var time = now.getTime();
var expireTime = time + 1000 * 60 * 60 * 24 * 365;
now.setTime(expireTime);
document.cookie = name + '=' + value + '; expires=' + now + ';path=/';
}
var addEvent = function(element, event, func) {
if (element.addEventListener) {
element.addEventListener(event, func);
} else {
var oldFunc = element['on' + event];
element['on' + event] = function() {
oldFunc.apply(this, arguments);
func.apply(this, arguments);
};
}
}
var _removed = false;
var form_to_submit = document.getElementById('_form_33_');
var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false;
var getUrlParam = function(name) {
var regexStr = '[\?&]' + name + '=([^&#]*)';
var results = new RegExp(regexStr, 'i').exec(window.location.href);
return results != undefined ? decodeURIComponent(results[1]) : false;
};
for (var i = 0; i < allInputs.length; i++) {
var regexStr = "field\\[(\\d+)\\]";
var results = new RegExp(regexStr).exec(allInputs[i].name);
if (results != undefined) {
allInputs[i].dataset.name = window.cfields[results[1]];
} else {
allInputs[i].dataset.name = allInputs[i].name;
}
var fieldVal = getUrlParam(allInputs[i].dataset.name);
if (fieldVal) {
if (allInputs[i].dataset.autofill === "false") {
continue;
}
if (allInputs[i].type == "radio" || allInputs[i].type == "checkbox") {
if (allInputs[i].value == fieldVal) {
allInputs[i].checked = true;
}
} else {
allInputs[i].value = fieldVal;
}
}
}
var remove_tooltips = function() {
for (var i = 0; i < tooltips.length; i++) {
tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);
}
tooltips = [];
};
var remove_tooltip = function(elem) {
for (var i = 0; i < tooltips.length; i++) {
if (tooltips[i].elem === elem) {
tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);
tooltips.splice(i, 1);
return;
}
}
};
var create_tooltip = function(elem, text) {
var tooltip = document.createElement('div'), arrow = document.createElement('div'), inner = document.createElement('div'), new_tooltip = {};
if (elem.type != 'radio' && elem.type != 'checkbox') {
tooltip.className = '_error';
arrow.className = '_error-arrow';
inner.className = '_error-inner';
inner.innerHTML = text;
tooltip.appendChild(arrow);
tooltip.appendChild(inner);
elem.parentNode.appendChild(tooltip);
} else {
tooltip.className = '_error-inner _no_arrow';
tooltip.innerHTML = text;
elem.parentNode.insertBefore(tooltip, elem);
new_tooltip.no_arrow = true;
}
new_tooltip.tip = tooltip;
new_tooltip.elem = elem;
tooltips.push(new_tooltip);
return new_tooltip;
};
var resize_tooltip = function(tooltip) {
var rect = tooltip.elem.getBoundingClientRect();
var doc = document.documentElement, scrollPosition = rect.top - ((window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0));
if (scrollPosition < 40) {
tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _below';
} else {
tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _above';
}
};
var resize_tooltips = function() {
if (_removed) return;
for (var i = 0; i < tooltips.length; i++) {
if (!tooltips[i].no_arrow) resize_tooltip(tooltips[i]);
}
};
var validate_field = function(elem, remove) {
var tooltip = null, value = elem.value, no_error = true;
remove ? remove_tooltip(elem) : false;
if (elem.type != 'checkbox') elem.className = elem.className.replace(/ ?_has_error ?/g, '');
if (elem.getAttribute('required') !== null) {
if (elem.type == 'radio' || (elem.type == 'checkbox' && /any/.test(elem.className))) {
var elems = form_to_submit.elements[elem.name];
if (!(elems instanceof NodeList || elems instanceof HTMLCollection) || elems.length <= 1) {
no_error = elem.checked;
}
else {
no_error = false;
for (var i = 0; i < elems.length; i++) {
if (elems[i].checked) no_error = true;
}
}
if (!no_error) {
tooltip = create_tooltip(elem, "Por favor, selecione uma opção.");
}
} else if (elem.type =='checkbox') {
var elems = form_to_submit.elements[elem.name], found = false, err = [];
no_error = true;
for (var i = 0; i < elems.length; i++) {
if (elems[i].getAttribute('required') === null) continue;
if (!found && elems[i] !== elem) return true;
found = true;
elems[i].className = elems[i].className.replace(/ ?_has_error ?/g, '');
if (!elems[i].checked) {
no_error = false;
elems[i].className = elems[i].className + ' _has_error';
err.push("Marcar %s é necessário".replace("%s", elems[i].value));
}
}
if (!no_error) {
tooltip = create_tooltip(elem, err.join('<br/>'));
}
} else if (elem.tagName == 'SELECT') {
var selected = true;
if (elem.multiple) {
selected = false;
for (var i = 0; i < elem.options.length; i++) {
if (elem.options[i].selected) {
selected = true;
break;
}
}
} else {
for (var i = 0; i < elem.options.length; i++) {
if (elem.options[i].selected && !elem.options[i].value) {
selected = false;
}
}
}
if (!selected) {
elem.className = elem.className + ' _has_error';
no_error = false;
tooltip = create_tooltip(elem, "Por favor, selecione uma opção.");
}
} else if (value === undefined || value === null || value === '') {
elem.className = elem.className + ' _has_error';
no_error = false;
tooltip = create_tooltip(elem, "Este campo é necessário.");
}
}
if (no_error && elem.name == 'email') {
if (!value.match(/^[\+_a-z0-9-'&=]+(\.[\+_a-z0-9-']+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/i)) {
elem.className = elem.className + ' _has_error';
no_error = false;
tooltip = create_tooltip(elem, "Digite um e-mail válido");
}
}
if (no_error && /date_field/.test(elem.className)) {
if (!value.match(/^\d\d\d\d-\d\d-\d\d$/)) {
elem.className = elem.className + ' _has_error';
no_error = false;
tooltip = create_tooltip(elem, "Digite uma data válida.");
}
}
tooltip ? resize_tooltip(tooltip) : false;
return no_error;
};
var needs_validate = function(el) {
if(el.getAttribute('required') !== null){
return true
}
if(el.name === 'email' && el.value !== ""){
return true
}
return false
};
var validate_form = function(e) {
var err = form_to_submit.querySelector('._form_error'), no_error = true;
if (!submitted) {
submitted = true;
for (var i = 0, len = allInputs.length; i < len; i++) {
var input = allInputs[i];
if (needs_validate(input)) {
if (input.type == 'text') {
addEvent(input, 'blur', function() {
this.value = this.value.trim();
validate_field(this, true);
});
addEvent(input, 'input', function() {
validate_field(this, true);
});
} else if (input.type == 'radio' || input.type == 'checkbox') {
(function(el) {
var radios = form_to_submit.elements[el.name];
for (var i = 0; i < radios.length; i++) {
addEvent(radios[i], 'click', function() {
validate_field(el, true);
});
}
})(input);
} else if (input.tagName == 'SELECT') {
addEvent(input, 'change', function() {
validate_field(this, true);
});
} else if (input.type == 'textarea'){
addEvent(input, 'input', function() {
validate_field(this, true);
});
}
}
}
}
remove_tooltips();
for (var i = 0, len = allInputs.length; i < len; i++) {
var elem = allInputs[i];
if (needs_validate(elem)) {
if (elem.tagName.toLowerCase() !== "select") {
elem.value = elem.value.trim();
}
validate_field(elem) ? true : no_error = false;
}
}
if (!no_error && e) {
e.preventDefault();
}
resize_tooltips();
return no_error;
};
addEvent(window, 'resize', resize_tooltips);
addEvent(window, 'scroll', resize_tooltips);
window._old_serialize = null;
if (typeof serialize !== 'undefined') window._old_serialize = window.serialize;
_load_script("//d3rxaij56vjege.cloudfront.net/form-serialize/0.3/serialize.min.js", function() {
window._form_serialize = window.serialize;
if (window._old_serialize) window.serialize = window._old_serialize;
});
var form_submit = function(e) {
e.preventDefault();
if (validate_form()) {
// use this trick to get the submit button & disable it using plain javascript
document.querySelector('#_form_33_submit').disabled = true;
var serialized = _form_serialize(document.getElementById('_form_33_'));
var err = form_to_submit.querySelector('._form_error');
err ? err.parentNode.removeChild(err) : false;
_load_script('https://clickimoveis.activehosted.com/proc.php?' + serialized + '&jsonp=true');
}
return false;
};
addEvent(form_to_submit, 'submit', form_submit);
})();
</script>

Related

ZXing-js/browser returns a ChecksumError no matter what QR Code I use

I'm having an issue with ZXing-js. Its returning a ChecksumException no matter what QR Code I put into it. So its detecting the QRCode but throws an Exception. The following is my vuejs 2.0 code. Please help.
Almost all if this code works. Its just the reading of the QR code part that doesn't
import { BarcodeFormat, DecodeHintType, NotFoundException, ChecksumException, FormatException } from '#zxing/library';
const ZXing = require('#zxing/browser');
Vue.component('qr_scanner_modal',{
prop: [
'videoSource'
],
data: function ()
{
return {
qr_error: null,
qrcanvas: null,
context: null,
qrvideo: null,
hints: null,
formats: null,
videoSource: {},
qr: null,
selected_source: null,
polling: null,
localMediaStream: null,
scanLineDirect: 'down',
scanlineOffset: 0,
qr_title: "",
visible: false,
focused: true,
qr_result: ""
};
},
mixins: [ focusMixin ],
created: function ()
{
EventBus.$on('trigger-qrcode-scanner', (qrTitle) => this.show(qrTitle));
},
mounted: function ()
{
let self = this;
this.$root.$on('bv::modal::show', () => this.$nextTick(() => this.mountQRReader()));
},
methods: {
mountQRReader: function ()
{
const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
hints.set(DecodeHintType.TRY_HARDER, true);
hints.set(DecodeHintType.CHARACTER_SET, 'UTF-8');
hints.set(DecodeHintType.ALSO_INVERTED, true);
this.qr = new ZXing.BrowserQRCodeReader(hints);
this.qrcanvas = this.$refs['qrcanvas'];
this.qrcanvas.width = 400;
this.qrcanvas.height = 400;
// this.qrcanvas = this.$refs;
console.log(this.$refs['qrcanvas']);
this.context = this.$refs['qrcanvas'].getContext('2d');
this.qrvideo = this.$refs['qrvideo'];
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices)
{
this.qr_error = "This browser does not support MediaStreamTrack. Try Chrome.";
console.log("enumerateDevices() not supported.");
}
else
{
this.qr_error = null;
}
let self = this;
navigator.mediaDevices
.enumerateDevices()
.then(function (sourceInfos)
{
let videosource = [];
for (var index = 0; index !== sourceInfos.length; index++)
{
var sourceInfo = sourceInfos[index];
if (sourceInfo.kind === 'videoinput')
{
videosource.push({
id: sourceInfo.deviceId,
name: sourceInfo.label || 'Camera ' + index
});
console.log(sourceInfo);
console.log(videosource);
}
}
self.videoSource = videosource;
})
.catch(function (err)
{
console.log(err.name + ": " + err.message);
});
},
show: function (qrTitle)
{
console.log("Show modal called.");
this.qr_title = qrTitle + " - QR / Magstripe Reader";
this.$bvModal.show('qr_code_scanner');
},
dismiss: function()
{
this.stopScan();
this.$bvModal.hide('qr_code_scanner');
},
selectSource: function (source)
{
this.selected_source = source;
let constraints = {
audio: false,
video: {
facingMode: "environment",
sourceId: source
}
};
navigator.getUserMedia(constraints, this.startScan, this.scanError);
},
read: function (value)
{
console.log('read callback called.');
console.log(value);
if (value !== null && value !== undefined)
{
this.qr_result = value.text;
EventBus.$emit('qr_code_returned', value.text);
this.stopScan();
return;
}
},
startScan: function (stream)
{
this.qrvideo.srcObject = stream;
this.localMediaStream = stream;
this.qrvideo.play();
this.polling = setInterval(this.scan, 400);
},
scanError: function (err)
{
if (err)
{
this.qr_error = err;
}
},
stopScan: function ()
{
clearInterval(this.polling);
if (this.localMediaStream)
{
let track = this.localMediaStream.getVideoTracks();
track[0].stop();
}
},
transposeRect: function (width, height)
{
const rectWidth = width * 0.8;
const rectHeight = height * 0.8;
const xPos = (width - rectWidth) / 2;
const yPos = (height - rectHeight) / 2;
this.context.beginPath();
this.context.strokeStyle = 'red';
this.context.lineWidth = '3';
this.context.rect( xPos,
yPos,
rectWidth,
rectHeight);
this.context.stroke();
this.drawScanLine(yPos,
xPos,
xPos + rectWidth,
yPos + rectHeight);
},
drawScanLine: function (top, left, right, bottom)
{
if (this.scanLineDirect === 'down')
{
this.scanlineOffset = this.scanlineOffset + 4;
}
if (this.scanLineDirect === 'up')
{
this.scanlineOffset = this.scanlineOffset - 4;
}
if (top + this.scanlineOffset > bottom)
{
this.scanLineDirect = 'up';
this.scanlineOffset = this.scanlineOffset - 4;
}
if (top + this.scanlineOffset < top)
{
this.scanLineDirect = 'down';
this.scanlineOffset = this.scanlineOffset + 4;
}
this.context.beginPath();
this.context.strokeStyle = 'red';
this.context.lineWidth = '3';
this.context.moveTo(left, top + this.scanlineOffset);
this.context.lineTo(right, top + this.scanlineOffset);
this.context.closePath();
this.context.stroke();
},
scan: async function ()
{
try
{
if (this.localMediaStream)
{
console.log("Scanning Video Feed.");
const width = this.qrcanvas.getAttribute('width');
const height = this.qrcanvas.getAttribute('height');
this.context.drawImage(this.qrvideo, 0, 0, width, height);
console.log("width: " + width);
console.log("height: " + height);
const code = await this.qr.decodeFromCanvas(this.qrcanvas);
// const code = await this.qr.decode(this.qrcanvas);
this.read(code);
this.transposeRect(width, height);
}
}
catch(err)
{
if (err instanceof NotFoundException) {
console.log('No QR code found.')
}
if (err instanceof ChecksumException) {
console.log('A code was found, but it\'s read value was not valid.')
}
if (err instanceof FormatException) {
console.log('A code was found, but it was in a invalid format.')
}
}
}
},
template: `
<b-modal id="qr_code_scanner"
v-bind:title="qr_title"
v-bind:videoSource='videoSource'
hide-footer >
<div class="alert alert-danger" v-show="qr_error != null">
{{qr_error}}
</div>
<div>
<a href='#' v-for="source in videoSource" v-on:click='selectSource(source.id)' class='btn btn-primary'>#{{source.name}}</a>
</div>
<div class="large-centered col-lg-12 col-md-12 col-sm-12" style="overflow: hidden;">
<input type="text" ref="qr_result" name='qr_result' v-focus="focused" v-model='qr_result' class="form-control" />
<video id="qrvideo" ref="qrvideo" controls="false" style="display: none;"></video>
<canvas id="qrcanvas" ref='qrcanvas' style="overflow: hidden;" width="400" height="400"></canvas>
</div>
<div class="modal-footer">
<a href='#' v-on:click='dismiss()' class='btn btn-primary'>Cancel</a>
</div>
</b-modal>
`
});
I'm expecting it to return a QR Code.

Vue3 Object - than is not a function

I have a problem with my slider on vue3:
SlideShow
<template>
<div class="slides-wrapper">
<button
class="btn btn-primary btn-action btn-lg slides-prev"
#click="changePhoto(-1)"
:disabled="prevBtn">
<i class="icon icon-arrow-left"></i>
</button>
<div class="slides">
<Slide
:url="activeUrl"
:text="infoSlides"/>
</div>
<button
class="btn btn-primary btn-action btn-lg slides-next"
#click="changePhoto(+1)"
:disabled="nextBtn">
<i class="icon icon-arrow-right"></i>
</button>
</div>
</template>
<script>
import { ref, computed } from 'vue';
import Slide from './Slide.vue';
import { loader } from '#/helpers/loader';
export default {
name: 'SlideShow',
components: {
Slide,
},
props: {
images: {
type: Array,
},
},
setup(props) {
const numberPhoto = ref(0);
const lenghtTablePhotos = ref(+props.images.length - 1);
const activeUrl = computed(() => props.images[numberPhoto.value].url);
const nextBtn = computed(() => numberPhoto.value === lenghtTablePhotos.value);
const prevBtn = computed(() => numberPhoto.value === 0);
const infoSlides = computed(() => `${numberPhoto.value + 1}/${lenghtTablePhotos.value + 1}`);
function changePhoto(param) {
const index = numberPhoto.value + param;
const slide = props.images[index];
if (slide !== undefined) {
loader(props.images[index].url)
.than((url) => console.log(url))
.catch(console.log('err'));
}
}
return {
numberPhoto,
activeUrl,
lenghtTablePhotos,
changePhoto,
nextBtn,
prevBtn,
infoSlides,
};
},
};
</script>
<style lang="scss" scoped>
.slides-wrapper {
width: 500px;
position: relative;
}
.slides-next,
.slides-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slides-prev {
left: 0;
}
.slides-next {
right: 0;
}
</style>
and my js file:
loader.js
export function loader(url) {
const img = document.createElement('img');
return new Promise((resolve, reject) => {
// eslint-disable-next-line no-unused-vars
img.onload = () => resolve(url);
img.onerror = () => reject(url);
img.src = url;
});
}
but it doesnt work, can someone help ?
enter image description here
you have to use reactive on your variable to use Composition API,
u can access
https://v3.vuejs.org/api/basic-reactivity.html#reactive
you have a typo at calling the .then function. You wrote than instead of then!

Upload stream to Dropbox session upload

I have a form that accepts a file to pass on to Dropbox using the session upload. I've wrapped the code in a Fastify server but always end up with an error in append:
{"error_summary": "closed/..", "error": {".tag": "closed"}}.
Here's the Fastify server:
require("dotenv").config()
const https = require("https")
const JSONbig = require("json-bigint")
const TOKEN = process.env.DROPBOX_ACCESS_TOKEN
const fastify = require("fastify")({
logger: {
level: "info"
}
})
fastify.addContentTypeParser("*", function (req, done) {
done()
})
// Promisify https request
const httpRequest = (url, options, data) => {
return new Promise((resolve, reject) => {
const req = https.request(url, options, (res) => {
let body = ""
res.on("data", (chunk) => {
console.log("SDSDSDSDASDASDSAD")
body += chunk.toString()
})
res.on("error", reject)
res.on("end", () => {
if (res.statusCode >= 200 && res.statusCode <= 299) {
resolve({ statusCode: res.statusCode, headers: res.headers, body: JSON.parse(body) })
} else {
reject("Request failed. status: " + res.statusCode + ", body: " + body)
}
})
})
req.on("error", reject)
if (data) req.write(data)
req.end()
})
}
fastify.register(require("fastify-cors"))
fastify.post("/", async (req, reply) => {
const stream = req.raw
const initResponse = await httpRequest(
"https://content.dropboxapi.com/2/files/upload_session/start",
{
method: "post",
headers: {
Authorization: `Bearer ${TOKEN}`,
"Dropbox-API-Arg": JSON.stringify({
close: false
}),
"Content-Type": "application/octet-stream"
}
}
)
const sessionId = initResponse.body.session_id
req.log.info(`Initiating session ${sessionId}`)
let offset = 0
stream.on("data", async (chunk) => {
req.log.info("Sending chunk")
stream.pause()
const appendResponse = await httpRequest(
`https://content.dropboxapi.com/2/files/upload_session/append_v2`,
{
method: "post",
headers: {
Authorization: `Bearer ${TOKEN}`,
"Dropbox-API-Arg": JSONbig.stringify({
cursor: {
session_id: sessionId,
offset
},
close: false
}),
"Content-Type": "application/octet-stream"
}
},
chunk
)
stream.resume()
offset += chunk.length
})
stream.on("end", async () => {
const terminateResponse = await httpRequest(
`https://content.dropboxapi.com/2/files/upload_session/finish`,
{
method: "post",
headers: {
Authorization: `Bearer ${TOKEN}`,
"Dropbox-API-Arg": JSONbig.stringify({
cursor: {
session_id: sessionId,
offset: offset
},
commit: {
path: "/Upload/test-large.txt",
mode: "add",
autorename: true,
mute: false,
strict_conflict: false
}
}),
"Content-Type": "application/octet-stream"
}
}
)
req.log.info("upload session finished")
reply.code(204).send()
})
})
fastify.listen(3000, (err) => {
if (err) {
fastify.log.fatal(err)
process.exit(1)
}
console.log(`server listening on ${fastify.server.address().port}`)
})
And here's the form:
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Upload with Progress Bar | CodingNepal</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<style>
/* Import Google font - Poppins */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #6990f2;
}
::selection {
color: #fff;
background: #6990f2;
}
.wrapper {
width: 430px;
background: #fff;
border-radius: 5px;
padding: 30px;
box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.05);
}
.wrapper header {
color: #6990f2;
font-size: 27px;
font-weight: 600;
text-align: center;
}
.wrapper form {
height: 167px;
display: flex;
cursor: pointer;
margin: 30px 0;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 5px;
border: 2px dashed #6990f2;
}
form :where(i, p) {
color: #6990f2;
}
form i {
font-size: 50px;
}
form p {
margin-top: 15px;
font-size: 16px;
}
section .row {
margin-bottom: 10px;
background: #e9f0ff;
list-style: none;
padding: 15px 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
section .row i {
color: #6990f2;
font-size: 30px;
}
section .details span {
font-size: 14px;
}
.progress-area .row .content {
width: 100%;
margin-left: 15px;
}
.progress-area .details {
display: flex;
align-items: center;
margin-bottom: 7px;
justify-content: space-between;
}
.progress-area .content .progress-bar {
height: 6px;
width: 100%;
margin-bottom: 4px;
background: #fff;
border-radius: 30px;
}
.content .progress-bar .progress {
height: 100%;
width: 0%;
background: #6990f2;
border-radius: inherit;
}
.uploaded-area {
max-height: 232px;
overflow-y: scroll;
}
.uploaded-area.onprogress {
max-height: 150px;
}
.uploaded-area::-webkit-scrollbar {
width: 0px;
}
.uploaded-area .row .content {
display: flex;
align-items: center;
}
.uploaded-area .row .details {
display: flex;
margin-left: 15px;
flex-direction: column;
}
.uploaded-area .row .details .size {
color: #404040;
font-size: 11px;
}
.uploaded-area i.fa-check {
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>File Uploader JavaScript</header>
<form action="#">
<input class="file-input" type="file" name="file" hidden />
<i class="fas fa-cloud-upload-alt"></i>
<p>Browse File to Upload</p>
</form>
<section class="progress-area"></section>
<section class="uploaded-area"></section>
</div>
<script>
const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area")
// form click event
form.addEventListener("click", () => {
fileInput.click()
})
fileInput.onchange = ({ target }) => {
let file = target.files[0] //getting file [0] this means if user has selected multiple files then get first one only
if (file) {
let fileName = file.name //getting file name
if (fileName.length >= 12) {
//if file name length is greater than 12 then split it and add ...
let splitName = fileName.split(".")
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1]
}
uploadFile(fileName) //calling uploadFile with passing file name as an argument
}
}
// file upload function
function uploadFile(name) {
let xhr = new XMLHttpRequest() //creating new xhr object (AJAX)
xhr.open("POST", "http://localhost:3000") //sending post request to the specified URL
xhr.upload.addEventListener("progress", ({ loaded, total }) => {
//file uploading progress event
let fileLoaded = Math.floor((loaded / total) * 100) //getting percentage of loaded file size
let fileTotal = Math.floor(total / 1000) //gettting total file size in KB from bytes
let fileSize
// if file size is less than 1024 then add only KB else convert this KB into MB
fileTotal < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB")
let progressHTML = `<li class="row">
<i class="fas fa-file-alt"></i>
<div class="content">
<div class="details">
<span class="name">${name} • Uploading</span>
<span class="percent">${fileLoaded}%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: ${fileLoaded}%"></div>
</div>
</div>
</li>`
// uploadedArea.innerHTML = ""; //uncomment this line if you don't want to show upload history
uploadedArea.classList.add("onprogress")
progressArea.innerHTML = progressHTML
if (loaded == total) {
progressArea.innerHTML = ""
let uploadedHTML = `<li class="row">
<div class="content upload">
<i class="fas fa-file-alt"></i>
<div class="details">
<span class="name">${name} • Uploaded</span>
<span class="size">${fileSize}</span>
</div>
</div>
<i class="fas fa-check"></i>
</li>`
uploadedArea.classList.remove("onprogress")
// uploadedArea.innerHTML = uploadedHTML; //uncomment this line if you don't want to show upload history
uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML) //remove this line if you don't want to show upload history
}
})
let data = new FormData(form) //FormData is an object to easily send form data
xhr.send(data) //sending form data
}
</script>
</body>
</html>
Does need an app created on DB to get oauth token to run example.
Anyone see the issue here? I've worked from a number of examples online but all of them assume I am using some dummy static file rather than incoming uploaded file.
Ok figured it out. Basically in my example I am terminating the session on end but it turns out the end event is fired at the same time as the last data event so I am effectively closing the session in the midst of the last chunk append. I refactored things to have a flag isEnd that gets set in the end event handler and moved the terminate session and resolve code inside of the data handler to be fired from there once isEnd is set.

How to show all clients including sender connected to a room in socket.io?

Below is the code for connecting a room named chat1. I'm able to show the connected clients except for sender by clicking on Chat Room 1 button in Active Users Window of index.html. I want to show sender's name also to be displayed in active users window along with other clients.
socket.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
usernames1 = [];
usernames2 = [];
usernames3 = [];
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
// var nsp = io.of('/chatroom');
// nsp.on('connection', function(socket) {
// console.log('ChatRoom namespace is created');
// // socket.on('hi',function(data){
// // console.log("Hi incoming")
// // })
// // nsp.emit('hi', 'Hello everyone!');
// });
io.of('/chatroom').on('connection', function(socket){ console.log("Connection establied")
socket.on('new user1',function(data, callback){
if(usernames1.indexOf(data)!=-1){
callback(false);
}
else
{
callback(true);
socket.username = data;
usernames1.push(socket.username);
socket.join('chat1',function(data)
{
console.log("In username "+usernames1)
console.log("\nIn socket.username "+socket.username+"\n")
updateUsernames();
});
}
// socket.join('chat1',function(data){
// console.log("Chat room 1 connected")
// });
})
function updateUsernames(){
console.log(usernames1);
socket.in('chat1').emit('comeon',usernames1)
}
});
http.listen(3000, function() {
console.log('listening on localhost:3000');
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<style>
#inp{
height:30px;
border:solid 1px #ccc;
}
.button1,.button2,.button3
{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#mainWrapper{
display:none;
}
#chatWrapper{
float:left;
border:1px #ccc solid;
border-radius:10px;
background:#f4f4f4;
padding:10px;
}
#chatWindow{
height:300px;
}
#userWrapper{
float:left;
border:1px #ccc solid;
border-radius:10px;
background:#f4f4f4;
padding:10px;
margin-left:20px;
width:150px;
max-height:200px;
}
body{
background:#f9f9f9;
}
#form2,#form1,#form3{
display: inline-block;
margin-top:30px;
margin-left: 5%;
padding-left: 12px;
height: 140px;
width: 325px;
border:solid rgb(0, 0, 0)
}
error{
border:#101999
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<script src = "/socket.io/socket.io.js"></script>
<script>
$(function () {
var socket = io('/chatroom');
var $form1= $('#form1');
var $form2= $('#form2');
var $form3= $('#form3');
var $username1=$('#username1');
var $username2=$('#username2');
var $username3=$('#username3')
var $users = $('#users');
var $error = $('#error');
$form1.submit(function(e){
e.preventDefault();
socket.emit('new user1', $username1.val(), function(data){
if(data){
// alert("Clicked")
$('.button1').hide();
$('.button2').hide();
$('.button3').hide();
$('#mainWrapper').show();
$form1.hide();
$form2.hide();
$form3.hide();
}
else
{
$('#error1 ').html("UserName is taken").effect("shake");
$('#error1 ').hide()
}
});
});
$form2.submit(function(e){
e.preventDefault();
socket.emit('new user2', $username.val(), function(data){
if(data){
// alert("Clicked")
$('.button1').hide();
$('.button2').hide();
$('.button3').hide();
$('#mainWrapper').show();
$form1.hide();
$form2.hide();
$form3.hide();
}
else
{
$('#error1').html("UserName is taken").effect("shake");
$('#error1').hide()
}
});
});
$form3.submit(function(e){
e.preventDefault();
$('.button1').hide();
$('.button2').hide();
$('.button3').hide();
$('#mainWrapper').show();
$form1.hide();
$form2.hide();
$form3.hide();
socket.emit('ch3');
});
socket.on('comeon', function(data){
alert("reached here")
var html = '';
for(i = 0; i < data.length; i++){
html += data[i] + '<br>';
}
console.log("Reached in usernames1")
console.log(data)
$users.html(html);
});
socket.on('comeon2', function(data){
alert("reached here")
var html = '';
for(i = 0; i < data.length; i++){
html += data[i] + '<br>';
}
console.log("Reached in usernames1")
$users.html(html);
});
})
</script> <div id="mainWrapper">
<h2>ChatIO</h2>
<body>
<div id="chatWrapper">
<div id="chatWindow"></div>
<form id="messageForm">
<input id="inp" type="text" size="35" id="message" placeholder="Say Something...">
<input id="inp" type="submit" value="Submit">
</form>
<button type="submit">Leave Room</button>
</div>
<div id="userWrapper"><strong>List of Active users</strong>
<div id="users"></div>
</div>
</div>
<div id="namesWrapper">
<div id="error1"></div>
<form id="form1">
Enter a username<input type="text" size="35" id="username1">
<input type="submit" class="button1" value="Chat Room 1">
</form></div><br>
<div id="namesWrapper">
<div id="error2"></div>
<form id="form2">
Enter a username<input type="text" size="35" id="username2">
<input type="submit" class="button2" value="Chat Room 2">
</form></div><br>
<div id="namesWrapper">
<div id="error3"></div>
<form id="form3">
Enter a username<input type="text" size="35" id="username3">
<input type="submit" class="button3" value="Chat Room 3">
</form></div>
</body>
</html>

Unity3D Webplayer extension on pure Node.js server

I can't run my Unity3D applications on my node.js server. It says "failed to download data file". I think it's because of MIME types. Here are my codes. I'm new to Javascript and Node.js, sorry for that.
Server.js:
var http = require("http");
var url = require('url');
var fs = require('fs');
var io = require('socket.io');
var five = require("johnny-five"),board, led, button;
board = new five.Board();
board.on("ready", function() {
button = new five.Button(2);
});
var server = http.createServer(function(request, response){
console.log('Connection');
var path = url.parse(request.url).pathname;
switch(path){
case '/':
response.writeHead(200, {'Content-Type': 'text/html'});
response.write('hello world', function(err) { response.end(); });
break;
case '/index.html':
fs.readFile(__dirname + path, function(error, data){
if (error){
response.writeHead(404);
response.write("opps this doesn't exist - 404");
}
else{
response.writeHead(200, {"Content-Type": "text/html"});
response.write(data, function(err) { response.end(); });
}
});
break;
default:
response.writeHead(404);
response.write("opps this doesn't exist - 404", function(err) { response.end(); });
break;
}
});
server.listen(8001);
var ios = io.listen(server);
ios.listen(server);
ios.sockets.on('connection', function (socket) {
if (board.isReady) {
button.on("down",function(){
console.log("down");
socket.emit('news', { hello: 'world' });
});
socket.on('toggleLed', function(data){
led = new five.Led(13);
led.strobe(1000);
});
setInterval(function(){
socket.emit('date', {'date': new Date()});
});
socket.on('client_data', function(data){
process.stdout.write(data.letter);
});
}
});
Index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | UnityArduino</title>
<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
<script type="text/javascript">
<!--
var config = {
width: 960,
height: 600,
params: { enableDebugging:"0" }
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "ArduinoWebPlayer.unity3d");
});
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 960px;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 600px;
width: 960px;
}
-->
</style>
</head>
<body>
<p class="header"><span>Unity Web Player | </span>UnityArduino</p>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<p class="footer">« created with Unity »</p>
</body>
</html>
Thank you for your help.
I found that it is because of this server code.
var server = http.createServer(function(request, response){
console.log('Connection');
var path = url.parse(request.url).pathname;
switch(path){
case '/':
response.writeHead(200, {'Content-Type': 'text/html'});
response.write('hello world', function(err) { response.end(); });
break;
case '/index.html':
fs.readFile(__dirname + path, function(error, data){
if (error){
response.writeHead(404);
response.write("opps this doesn't exist - 404");
}
else{
response.writeHead(200, {"Content-Type": "text/html"});
response.write(data, function(err) { response.end(); });
}
});
break;
default:
response.writeHead(404);
response.write("opps this doesn't exist - 404", function(err) { response.end(); });
break;
}
});
I followed this code and found the solution.
https://github.com/jwanga/node-static-http-server

Resources