Js SIP code does not work on Web Page - javascript

'use strict';
/**
* Created by tqcenglish on 15-8-12.
* 若请静态文件使用默认账号，若添加参数则需要服务器动态生成此文件
*/
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'location/rtcninja.js';
urls.jquery = 'location/jquery.js';
urls.i18n = "location/jquery.i18n.js";
urls.messagestore = "location/jquery.i18n.messagestore.js";
urls.jssip = 'location/jssip.js';
urls.init = 'location/init.js';
urls.gui = 'location/gui.js';
urls.css = 'location/style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
The above code is perfectly working on a HTTPS web server. The problem is, our website is running on HTTP server. I have done some few alterations, experimentation and a lot of research but the same result occurs. Button does not appear when I am embedding it on our website. I cannot track any error regarding these codes. Anything wrong with it? Any suggestion would be a great help for me. Thanks.
By the way, this code should be able to call through our phones on our office. clicking the button would direct user to the web rtc which would directly call our office.


Chrome doesn't allow WebRTC on HTTP. You must use HTTPS or test with Firefox.

Related

javascript webservice call and settimeout

i'm currently developing an application that relies on webservice calls in order to create a tree-like "menu", everything works as intended but i realized not all the target audience has a fast internet connection like i have right now on the development environment. my goal is to show a loading "screen" while the javascript function creates and then adds the elements to the DOM, the flowchart is as follows:
user click on the "expand" image of a node
user sees a div loading gif
user is presented with the childnodes
i'm not sure where i should put the timeout
my code:
...
elemento_tema_imagem_esconde_mostra.addEventListener("click", Get_Feat);
...
function Get_Feat(event) {
Tema_Expandido = event.target.parentNode;
if (typeof (Tema_Expandido.getElementsByTagName("ul")[0]) === "undefined") {
sMNID = event.target.parentNode.getElementsByTagName("a")[0].getAttribute("mnid");
var service = new WebJSON;
service.GetFeat(sMNID, SuccessCallback_Get_Feat, OnfailureCallback_Get_Feat);
} else {
//debugger;
var elemento = Tema_Expandido.getElementsByTagName("ul")[0];
var imagem_esconder_mostar = elemento.parentNode.childNodes[0];
var style = window.getComputedStyle(elemento, null);
if (style.display == "block") {
elemento.style.display = "none";
imagem_esconder_mostar.src = "Content/Images/img_abrir_22_22.png";
} else if (style.display == "none") {
elemento.style.display = "block";
imagem_esconder_mostar.src = "Content/Images/img_fechar_22_22.png";
}
}
};
function SuccessCallback_Get_Feat(Resultado_Get_Feat) {
var colleccao_Feat = JSON.parse(Resultado_Get_Feat);
var lista_feat = document.createElement("ul");
lista_feat.setAttribute("class", "lista-sem-bullets");
for (var i = 0; i < colleccao_Feat.length; i++) {
var elemento_feat = document.createElement("li");
var elemento_feat_imagem_esconde_mostra = document.createElement("img");
var elemento_feat_imagem_no = document.createElement("img");
var elemento_feat_link = document.createElement("a");
if (colleccao_Feat[i].FILHOS > 0) {
elemento_feat_imagem_esconde_mostra.src = "Content/Images/img_abrir_22_22.png";
elemento_feat_imagem_esconde_mostra.addEventListener("click", Get_Compo);
} else if (colleccao_Feat[i].FILHOS = 0) {
elemento_feat_imagem_esconde_mostra.src = "Content/Images/seta_dir_26_20.png";
}
//elemento_feat_imagem_esconde_mostra.addEventListener("click", Get_Feat);
//elemento_feat_imagem_no.src = "Content/Images/feat.png"
elemento_feat_link.setAttribute("FNID", colleccao_Feat[i].FNID);
elemento_feat_link.innerText = colleccao_Feat[i].NAMEDESC;
elemento_feat.appendChild(elemento_feat_imagem_esconde_mostra);
elemento_feat.appendChild(elemento_feat_imagem_no);
elemento_feat.appendChild(elemento_feat_link);
lista_feat.appendChild(elemento_feat);
};
document.getElementById("myModal_Loading").style.display = "none";
Tema_Expandido.appendChild(lista_feat);
Tema_Expandido.childNodes[0].src = "Content/Images/img_fechar_22_22.png";
};
function OnfailureCallback_Get_Feat(error) {
//displaying error on alert box
alert(error);
};
any help will be much appreciated

certain global(class) variables disappearing in javascript? (photoshop)

I'm working on a plug-in script for photoshop and I'm encountering a really weird problem, the closest person to have this problem is here : Why do class variables in Javascript disappear when trying to call them multiple times or assigning them to local variables?
So reading his solution I combed over my syntax and I can't find any issues that I didn't correct and try again. I'll include the full code in a bit but here is the gist of the problem, I'm declaring this object in global space by declaring it and it's members outside of functions:
prefs = new Object();
prefs.db_file = "";
prefs.bk_file = "";
prefs.text = new Object();
prefs.text.top = 0.6;
prefs.text.bottom = 0.9;
prefs.text.padding = 0.05;
prefs.text.size = 12;
prefs.text.shadow = true;
basic outline (pseudocode):
declare global variables
main() {
Dialogue()
do stuff with the variables
}
Dialogue() {
declare new window
accept user interaction
store in global variable
}
I've run through this several times, step by step in the extendscript debugger watching the variables, every time the variables exist and the values are correct, until they exit the Dialogue() function then the only variables that exist are prefs.text.shadow and prefs.text.size
everything I've tried, including removing the ".text." part has returned the same. I can't find if my syntax is wrong, if it is wrong than why don't all the prefs. variables disappear? and I'm fairly certain that all the variables are treated the same way.
Update 10-22-2013: To help rule out syntax issues I found JSlint and ran my code through it and went through and corrected the issues it presented. The only issues left are grouping 'var' selections. It changed my object declaration method, some code ordering, unnecessary ';'s standardizing my indents. The Result: The same. The same variables are dropped and the same output is returned.
Here is the full code:
#target photoshop
app.bringToFront();
prefs = new Object();
prefs.db_file = "";
prefs.bk_file = "";
prefs.text = new Object();
prefs.text.top = 0.6;
prefs.text.bottom = 0.9;
prefs.text.padding = 0.05;
prefs.text.size = 12;
prefs.text.shadow = true;
function main() {
Dialogue();
var db_file2 = new File(prefs.db_file);
db_file2.open('r');
var data = Array();
var str = "";
var data_str = "";
while(!db_file2.eof) {
str = db_file2.readln();
data.push(str.split(","));
data_str += str;
};
db_file2.close();
alert(data_str);
};
function Dialogue() {
var dlg = new Window ("dialog","Create New Slide Set");
dlg.orientation = "row";
dlg.alignChildren = "fill";
dlg.pref_group = dlg.add("group");
dlg.pref_group.orientation = "column";
dlg.pref_group.alignChildren = "fill";
dlg.pref_group.db_val = dlg.pref_group.add("edittext",undefined,prefs.db_file);
dlg.pref_group.db_find = dlg.pref_group.add("button",undefined,"select data file");
dlg.pref_group.db_find.onClick = function() {
selectedFile = File.openDialog("Please select CSV file.","CSV File:*.csv");
if(selectedFile != null) {
dlg.pref_group.db_val.text = decodeURI(selectedFile.fsName);
prefs.db_file = dlg.pref_group.db_val.text;
};
};
dlg.pref_group.db_val.onChange = function() {
prefs.db_file = dlg.pref_group.db_val.value;
alert("db_file has been changed!");
};
dlg.pref_group.bk_val = dlg.pref_group.add("edittext",undefined,prefs.bk_file);
dlg.pref_group.bk_find = dlg.pref_group.add("button",undefined,"select background image");
dlg.pref_group.bk_find.onClick = function() {
selectedFile = File.openDialog("Please select PNG file.","Image File:*.png");
if(selectedFile != null) {
dlg.pref_group.bk_val.text = decodeURI(selectedFile.fsName);
prefs.bk_file = dlg.pref_group.bk_val.text;
};
};
dlg.pref_group.bk_val.onChange = function() {
prefs.bk_file = dlg.pref_group.bk_val.value;
};
dlg.pref_group.tt_grp = dlg.pref_group.add("group");
dlg.pref_group.tt_grp.orientation = "row";
dlg.pref_group.tt_grp.alignChildren = "fill";
dlg.pref_group.tt_grp.tt = dlg.pref_group.tt_grp.add("statictext",undefined,"Text Top");
dlg.pref_group.tt_grp.tt_dsp = dlg.pref_group.tt_grp.add("edittext",undefined,prefs.text.top);
dlg.pref_group.tt_grp.tt_dsp.preferredsize = [100,200];
dlg.pref_group.tt_grp.tt_dsp.onChange = function() {
prefs.text.top = dlg.pref_group.tt_grp.tt_dsp.value;
};
dlg.pref_group.bt_grp = dlg.pref_group.add("group");
dlg.pref_group.bt_grp.orientation = "row";
dlg.pref_group.bt_grp.alignChildren = "fill";
dlg.pref_group.bt_grp.bt = dlg.pref_group.bt_grp.add("statictext",undefined,"Text bottom");
dlg.pref_group.bt_grp.bt_dsp = dlg.pref_group.bt_grp.add("edittext",undefined,prefs.text.bottom);
dlg.pref_group.bt_grp.bt_dsp.preferredsize = [100,200];
dlg.pref_group.bt_grp.bt_dsp.onChange = function() {
prefs.text.bottom = dlg.pref_group.bt_grp.bt_dsp.value;
};
dlg.pref_group.pd_grp = dlg.pref_group.add("group");
dlg.pref_group.pd_grp.orientation = "row";
dlg.pref_group.pd_grp.alignChildren = "fill";
dlg.pref_group.pd_grp.pd = dlg.pref_group.pd_grp.add("statictext",undefined,"Padding");
dlg.pref_group.pd_grp.pd_dsp = dlg.pref_group.pd_grp.add("edittext",undefined,prefs.text.padding);
dlg.pref_group.pd_grp.pd_dsp.preferredsize = [100,200];
dlg.pref_group.pd_grp.pd_dsp.onChange = function() {
prefs.text.padding = dlg.pref_group.pd_grp.pd_dsp.value;
};
dlg.pref_group.sd_grp = dlg.pref_group.add("group");
dlg.pref_group.sd_grp.orientation = "row";
dlg.pref_group.sd_grp.alignChildren = "fill";
dlg.pref_group.sd_grp.sd = dlg.pref_group.sd_grp.add("statictext",undefined,"Shadow");
dlg.pref_group.sd_grp.sd_dsp = dlg.pref_group.sd_grp.add("checkbox",undefined,"");
dlg.pref_group.sd_grp.sd_dsp.value = prefs.text.shadow;
dlg.pref_group.sd_grp.sd_dsp.onChange = function() {
prefs.text.shadow = dlg.pref_group.sd_grp.sd_dsp.value;
};
dlg.ok_group = dlg.add('group');
dlg.ok_group.orientation = "column";
dlg.ok_group.ok_btn = dlg.ok_group.add("button",undefined,"ok");
dlg.ok_group.ok_btn.onClick = function() {
prefs.text.shadow = dlg.pref_group.sd_grp.sd_dsp.value;
prefs.text.padding = dlg.pref_group.pd_grp.pd_dsp.value;
prefs.text.bottom = dlg.pref_group.bt_grp.bt_dsp.value;
prefs.text.top = dlg.pref_group.tt_grp.tt_dsp.value;
prefs.bk_file = dlg.pref_group.bk_val.value;
prefs.db_file = dlg.pref_group.db_val.value;
dlg.close(0);
};
dlg.center();
dlg.show();
};
main();

it was so simple...
'edittext' boxes don't have .value properties they have .text properties, trying to access .value returned a null and destroyed the variable.
my research took me into a lot of areas, syntax conventions, JSlint, object definitions, ironically looking into a different problem (onChange functions aren't being called) made me realize that the only variables that weren't being disregarded were the shadow checkbox, and the font size parameter, but the font size parameter wasn't being edited at all at this point, and the shadow was the only thing being defined by a checkbox. Lesson learned: when something is partially working compare the similarities of the working part

Creating a software synth with dynamically created dom elements and a variable that I can't seem to pass

Here is a JSfiddle. http://jsfiddle.net/ZttnJ/5/
The issue is I simply need a variable in one scope accessible to another, but if I put the variable in a higher scope it breaks the dynamic creation of the element.This seems like something that would be a reoccurring issue with dynamically created dom elements and I am very curious if there is a boiler plate way to solve this without recreating the code into constructors with prototypes or something. I commented the code for clarity. There is only one comment.
var SynthCreationModule = (function(){
context = new webkitAudioContext();
var orangeButton;
var applicationArea = document.getElementById("applicationArea"),
orangeButton = document.getElementById("orangeButton"),
counterSynth = 1;
counterSynthMuteButton = 1;
counterSynthParameters = 1;
counterPitchInput = 1;
orangeButton.addEventListener("click",createSynth, false);
function createSynth () {
var pitchInput = document.createElement('input').value; // I need this to be accessible to the function called synth.onmousedown
pitchInput.type = "range";
pitchInput.className = "pitchInputClass";
pitchInput.id = "pitchInput" + (counterPitchInput++);
var synth = document.createElement("div");
synth.className = "synth";
synth.id = "synth" + (counterSynth++);
var synthMute = document.createElement("div");
synthMute.className = "synthMute";
synthMute.id = "synthMute" + (counterSynthMuteButton++);
applicationArea.appendChild(synth);
synth.appendChild(synthMute);
synth.appendChild(pitchInput);
$(synth).draggable({ snap: true });
$(synth).draggable({ grid: [ 20,20 ]});
synth.onmousedown= function () {
oscillator = context.createOscillator(),
oscillator.type = 2;
oscillator.frequency.value = pitchInput;
oscillator.connect(context.destination);
oscillator.noteOn(0);
};
synth.onmouseup = function () {
oscillator.disconnect();
};

The answer was to modify the above code like this:
function createSynth () {
var pitchInput = document.createElement('input');
pitchInput.type = "range";
pitchInput.className = "pitchInputClass";
pitchInput.id = "pitchInput" + (counterPitchInput++);
var synth = document.createElement("div");
synth.className = "synth";
synth.id = "synth" + (counterSynth++);
var synthMute = document.createElement("div");
synthMute.className = "synthMute";
synthMute.id = "synthMute" + (counterSynthMuteButton++);
applicationArea.appendChild(synth);
synth.appendChild(synthMute);
synth.appendChild(pitchInput);
$(synth).draggable({ snap: true });
$(synth).draggable({ grid: [ 20,20 ]});
synth.addEventListener("mousedown",playSynth, false);
function playSynth() {
//var pitchState = document.getElementById('oscPitch1').value;
oscillator = context.createOscillator(), // Creates the oscillator
oscillator.type = 2;
oscillator.frequency.value = pitchInput.value;
oscillator.connect(context.destination); // Connects it to output
oscillator.noteOn(0);
};

Reopenprogram function returns type error "Cannot read property 'style' of null"

I have the following javascript code which should be able to create a dialog box triggered by an onclick event in the html file.
But strangely I alway get the error Uncaught TypeError: Cannot read property 'style' of null. By the way the TypeError concerns the reopenprogram(element) function!!! I have already checked whether the element is really null but putting it in alert showed me the usual element name. I know the code looks a little bit rough but I am free for any suggestions. Here is the jsfiddle code. I am pretty new to javascript so I would be really glad if you could fully adjust the code yourself.
Please help me!
function executeprogram(element) {
var program = document.createElement("div");
var toolbar = document.createElement("div");
var title = document.createElement("div");
var minimize = document.createElement("div");
var close = document.createElement("div");
var iframe = document.createElement("iframe");
var container = document.getElementById("container");
// Create program Div //
program.id = element;
program.className = "dialog";
program.width = iframe.width;
add(element);
program.setAttribute("onmousedown", "dragstart(this)");
container.appendChild(program);
// Toolbar //
toolbar.id = "toolbar";
toolbar.width = iframe.width;
program.appendChild(toolbar);
// Title //
title.id = "title";
title.innerHTML = element;
toolbar.appendChild(title);
// Minimize //
minimize.id = "minimize";
minimize.innerHTML = "-";
minimize.onclick = minimizeprogram(element);
toolbar.appendChild(minimize);
// Close //
close.id = "close";
close.innerHTML = "x";
close.onclick = closeprogram(element);
toolbar.appendChild(close);
// Create Iframe //
iframe.frameBorder = 1;
iframe.width = "500px";
iframe.height = "250px";
iframe.id = "iframe";
iframe.src = "#";
program.appendChild(iframe);
}
// Minimize program //
function minimizeprogram(element) {
document.getElementById(element).style.display = "hidden";
}
function reopenprogram(element) {
document.getElementById(element).style.visibility = "visible";
}
// Close program //
function closeprogram(element) {
var container = document.getElementById("container");
var app = document.getElementById(element);
container.removeChild(app);
remove(element);
}
// Tabs //
function add(element) {
var tabs = document.createElement("li");
tabs.id = ""+element+"tab";
alert(element);
tabs.onclick = reopenprogram(element);
var add = document.getElementById("tabs");
add.appendChild(tabs);
}
function remove(element) {
var add = document.getElementById("tabs");
var app = document.getElementById(element+"tab");
add.removeChild(app);
}

In your fiddle, you never add an element with the id of the element argument value to the document. That is the cause.

Why the js code works in a web page but fails in GreaseMonkey?

I created a hidden frame as follows:
var oHiddenFrame = null;
if(oHiddenFrame == null){
oHiddenFrame = document.createElement("iframe");
oHiddenFrame.name = "hiddenFrame";
oHiddenFrame.id = "hiddenFrame";
oHiddenFrame.style.height = "0px";
oHiddenFrame.style.width = "0px";
oHiddenFrame.style.position = "absolute";
oHiddenFrame.style.visbility = "hidden";
document.body.appendChild(oHiddenFrame);
}
then listener:
var fnLocation = function(){
frames["hiddenFrame"].location.href = "http://meckmeck.cn";
}
var oButton = document.getElementById("mb_submit");
oButton.addEventListener("click", fnLocation, false);
It works fine in a web page,but will report frames.hiddenFrame is undefined when written in GreaseMonkey

Have you tried,
document.getElementById('hiddenFrame').location.href = "http://meckmeck.cn";

Categories

Resources