I have 2 webcam connected to my pc. I am using this library https://github.com/infusion/jQuery-webcam.
I am able to view the webcam no problem and I can also change to other camera by right clicking, and the Adobe Flash Player will popup where I can select other camera.
Following this website:
http://sshilko.com/examples/jQuery-AS3-Webcam/example.html
The example shown in that website, it can change the camera by selecting from the dropdownlist.
But my code stucks at
debug: function (type, string) {
if (type == 'error') {
$("#lblCameraList").html(string);
} else {
$("#lblCameraList").html('');
}
},
Error says "No camera mode present, falling back...".
Below that code is another code
cameraEnabled: function () {
this.debug('notice', 'Camera enabled');
var cameraApi = this;
if (cameraApi.isCameraEnabled) {
return;
} else {
cameraApi.isCameraEnabled = true;
}
var cams = cameraApi.getCameraList();
for (var i in cams) {
$("#cboCamera").append("<asp:ListItem Value='" + i + "'>" + cams[i] + "</asp:ListItem>");
}
$("#cboCamera").change(function () {
var success = cameraApi.setCamera($(this).val());
if (!success) {
//webcam.debug('error', 'Unable to select camera');
console.log("Failed to set camera");
} else {
//webcam.debug('notice', 'Camera Changed');
console.log("Success set camera");
}
});
The program wont event enter this cameraEnabled because of the error.
Any helps?
Problem solved. I followed exactly from this website http://sshilko.com/examples/jQuery-AS3-Webcam/example.html
The error was i was not using the same javascript file as the website.
Related
We use a 3rd part framework called AribaWeb where the UI HTML is rendered by backend server, but javascript is used to handle all the UI events on the client side.
Since I am unfamiliar with javascript, i am seeking help here.
The issue we are seeing happens only with following conditions:
Mozilla Firefox is the browser. Latest version included. Not reproducible in any other browsers.
Zoom level set is above 130%
Fairly long form hence there is vertical scrolling
Steps and issue:
when users go to the end of the form and select a button or select a radio button, the page "jumps", in other words the focus shifts to the top of the page.
This happens very inconsistently.
I found the following old stackoverflow article and tried the solution, but no luck. jQuery Focus fails on firefox
Any hints/clues will be helpful.
I have been debugging the following function to find out clues, but unfortunately the scroll to the top of the page happens much before this function is invoked:
/////////////////////////////////////////
// Precendence: //
// first text in focus region //
// current browser active element //
// first text on page if allowed //
/////////////////////////////////////////
focusOnActiveElement : function () {
if (AWFocusRegionId) {
var focusRegion = Dom.getElementById(AWFocusRegionId);
AWFocusRegionId = null;
if (focusRegion) {
var firstRegionText = this.findFirstText(focusRegion);
if (firstRegionText) {
AWActiveElementId = firstRegionText.id;
}
}
}
if (AWActiveElementId) {
try {
var activeElement = Dom.getElementById(AWActiveElementId);
if (Dom.elementInDom(activeElement) &&
!this.modallyDisabled(activeElement)) {
Debug.log("Focusing on element id: " + AWActiveElementId);
var activeElementId = AWActiveElementId;
function checkFocus () {
try {
// no active element, refocus
if (!Dom.getActiveElementId()) {
Debug.log("Refocusing on element id: " + activeElementId);
if (activeElement.focus) {
activeElement.focus();
activeElement.focus();
if (activeElement.select) {
activeElement.select();
}
}
}
}
catch (fe) {
Debug.log("Exceotion ",fe);
}
}
function fcs() {
if (activeElement.focus) {
activeElement.focus();
activeElement.focus();
if (activeElement.select) {
activeElement.select();
}
}
}
setTimeout(checkFocus, 1000);
setTimeout(fcs,0);
}
}
catch (e) {
Debug.log("Focusing exception: " + e);
}
finally {
AWActiveElementId = null;
}
}
if (!Dom.getActiveElementId() && AWAllowSelectFirstText) {
AWAllowSelectFirstText = false;
Debug.log("Focusing on first text: ");
this.selectFirstText();
}
}
here is the problem I am trying to solve - I am not sure it is possible at all. I have a web app and I need to enable data copy/paste from the app and to the app, and I have a problem with paste. If I past with CTRL + V shortcut I can get the data from the clipboard using
e.originalEvent.clipboardData.getData('text')
in 'paste' eventhandler and it works fine. What I need to enable is 'Paste' from custom context menu and my first try was to dispatch paste event manually like this
var event = new KeyboardEvent('paste', {
view: window,
bubbles: true,
cancelable: true
});
document.dispatchEvent(event);
and it actually hit paste eventhandler, but I couldn't get access to clipboard data like in the previous case. I understand that this is forbidden because of security issues - if this was allowed any page would be able to access data from the clipboard. My question is how to implement this - we are able to copy data from excel to e.g. google drive document and paste it there using a custom context menu (http://pokit.org/get/?1b5f6f4f0ef4b80bb8637649121bcd75.jpg), so I believe it is possible. Thank u all!
So, in my web application I have a custom context menu which has 'Paste' action (bunch of '<li>' tags in a popup). And when the user click on 'Paste' I call this function
if (browser === 'CHROME') {
var extensionId = 'some_id';
chrome.runtime.sendMessage(extensionId, { message: "getClipboardData" },
function (clipboardData) {
console.log('Clipboard data: ', clipboardData);
var txt = $('.helper_textarea');
$(txt).val(clipboardData);
// Call 'paste' function we have clipboard data
}
);
}
In my extension I have i paste.js file I have
function getDataFromClipboard() {
var bg = chrome.extension.getBackgroundPage();
var helperTextArea = bg.document.getElementById('sandbox');
if (helperTextArea == null) {
helperTextArea = bg.document.createElement('textarea');
document.body.appendChild(helperTextArea);
}
helperTextArea.value = '';
helperTextArea.select();
// Clipboard data
var clipboardData = '';
bg.document.execCommand("Paste");
clipboardData = helperTextArea.value;
helperTextArea.value = '';
return clipboardData;
}
chrome.runtime.onMessageExternal.addListener(
function(req, sender, callback) {
if (req) {
if (req.message) {
if (req.message == "installed") {
console.log('Checking is extension is installed!');
callback(true);
}
else if(req.message = "getClipboardData") {
console.log('Get clipboard data');
callback(getDataFromClipboard());
}
}
}
return true;
}
);
And in manifest file
"background" : {
"scripts" : [ "paste.js" ]
},
"externally_connectable": {
"matches": ["*://localhost:*/*"]
},
and of course
"permissions": ["clipboardRead" ],
I use this function to check if extension is added
isExtensionInstalled: function (extensionId, callback) {
chrome.runtime.sendMessage(extensionId, { message: "installed" },
function (reply) {
if (reply) {
callback(true);
} else {
callback(false);
}
});
},
And this is working great. Now the problem is how to port this to Edge. What is equivalent to 'chrome.runtime.sendMessage' in Edge? Thanks for your help.
i need following function to be execute in Firefox.., but it is working fine in chrome. the problem was when i do 'Inspect Element With Firebug' it is working fine. the method 'EditEncounterBillStatus' is also hitting correctly. but when i don't use 'Inspect Element With Firebug' the method EditEncounterBillStatus is not hitting.. i tried a lot to sort out this. but still i can't can any one help me to find solution thanks in advance.
else if (element.trim() == "Approved") {
var TestPin = prompt("Please Enter your PIN");
if (TestPin != null) {
if (isNaN(TestPin)) {
alert("Please Enter a Valid Pin");
return;
}
else if (TestPin == pin) {
var postVisitData = { VisitId: vid};
$.post("/Emr/WaitingRoom/EditEncounterBillStatus", { VisitId: vid }, function (data) {
});
window.location = "/Emr/Patients/Show?PID=" + pid;
}
else {
alert("Your Entered PIN Is Incorrect");
}
}
else {
return;
}
}
I would recommend doing it like this
else if (TestPin == pin) {
$.post("/Emr/WaitingRoom/EditEncounterBillStatus", { VisitId: vid }, function (data) {
window.location = "/Emr/Patients/Show?PID=" + pid;
});
return; // in case of side effects in unseen code
}
i.e. wait until the $.post has finished before changing the window.location
As the rest of your code is unseen there could be side effects of performing this in this way - hence the return where it is - but even then, not knowing the full call stack there could still be side effects - you have been warned
You should change location upon the success of the post call, so put that in your callback function body:
$.post("/Emr/WaitingRoom/EditEncounterBillStatus", { VisitId: vid },
function (data) {
window.location = "/Emr/Patients/Show?PID=" + pid;
});
This way you are sure you only change location when the post action was executed. Otherwise you risk that you change location before the post happens. In debug mode, and certainly when you step through the code, there is enough time for the post to finish in time, and so your original code then works.
I am trying to implement open tok for my video chat application.
I am using opentok.min.js v 2.2.9 with php SDK. It is working fine with google chrome and firefox.
According to their announcements, it should work in IE with 32 bit OS.
https://tokbox.com/opentok/libraries/client/js/release-notes.html
But it is not working for me at any version of IE.
Anybody knows how to implement it for IE?
// Detect whether this browser is IE
var isNotIE = function isIE() {
var userAgent = window.navigator.userAgent.toLowerCase(),
appName = window.navigator.appName;
return !(appName === 'Microsoft Internet Explorer' || // IE <= 10
(appName === 'Netscape' && userAgent.indexOf('trident') > -1)); // IE >= 11
};
function connect() {
if (isNotIE() && OT.checkSystemRequirements()) {
session = OT.initSession(apiKey, sessionId);
sendMessage("Session has initialized. Connecting to session ... ");
session.on({
streamCreated: function(event) {
sendMessage("New stream in the session: " + event.stream.streamId);
var parentDiv = document.getElementById(subscriberElement);
var replacementDiv = document.createElement("div"); // Create a div for the publisher to replace
replacementDiv.id = "opentok_subscriber";
parentDiv.appendChild(replacementDiv);
subscriber = session.subscribe(event.stream, replacementDiv, subscriberProperties, function(error) {
if (error) {
console.log(error);
} else {
console.log("Subscriber added.");
}
});
},
streamDestroyed: function(event) {
sendMessage("Stream stopped streaming. Reason: " + event.reason)
},
signal: function(event) {
sendMessage("Signal sent from connection " + event.from.id);
// Process the event.data property, if there is any data.
}
});
session.connect(token, function(error) {
if (error) {
sendMessage("Error connecting: ", error.code, error.message);
} else {
sendMessage("Connected to the session successfully.");
displayBtn('connected');
}
});
}else{
sendMessage("What Should I do if it is IE?? :(");
}
}
function sendMessage(message) {
message = '<br>' + message;
$("#statusbox").append(message);
}
Now that IE versions 8-11 are supported by the plugin, you shouldn't need to switch on the isNotIE() && OT.checkSystemRequirements() condition, you can just use the same code path for all of those browsers.
It may still be a good idea to detect IE versions that are outside that range to let the user know that the feature of your application that uses OpenTok is not supported with some suggestions to upgrade/install.
Otherwise, one code suggestion: In the streamCreated event handler, rather than using 4 lines of code to create a new DOM element and then add it to a container, you can use the insertMode: "append" option. This works for both Publishers and Subscribers.
Before:
var parentDiv = document.getElementById(subscriberElement);
var replacementDiv = document.createElement("div"); // Create a div for the publisher to replace
replacementDiv.id = "opentok_subscriber";
parentDiv.appendChild(replacementDiv);
subscriber = session.subscribe(event.stream, replacementDiv, subscriberProperties, function(error) {
if (error) {
console.log(error);
} else {
console.log("Subscriber added.");
}
});
After:
subscriber = session.subscribe(event.stream, document.getElementById(subscriberElement), { insertMode: "append" }, function (error) {
if (error) {
console.log(error);
} else {
console.log("Subscriber added.");
// Set the ID of the DOM element if thats used elsewhere in the code
subscriber.element.id = "opentok_subscriber";
}
});
i have developed online ticketing system
i need an alert pop up message on my desktop whenever a user request for technician
heres my jquery code for adding a request
function add_rec() {
var Technician = document.getElementById("txtTech").value;
var Name = document.getElementById("txtCaller").value;
var Office = document.getElementById("txtOffice").value;
//var Request = document.getElementById("Request").value;
var Pending = document.getElementById('Pending').checked;
var Finished = document.getElementById('Finished').checked;
if (Technician == '' || Name == '' || Office == '') {
alert('Please check your entries and try again.')
} else {
if (Pending == false && Finished == false) {
alert('Please check your entries and try again.')
} else {
action("Function2.asmx/add_rec?Technician='" + Technician + "'&Name='" + Name + "'&Office='" + Office + "'&Request=''&Pending='" + Pending + "'&Finished='" + Finished + "'");
window.setTimeout(function () {
//call your display function here to update the displayed data
get_TicketStats();
get_rec();
clear_rec();
}, 100);
}
}
}
You can't make a web page (reliably) pop up a notification on the user's desktop.
Browser settings often block popups, or force them to open in new tabs, instead. There's nothing you can do about these settings.
You could use JavaScript's native alert() function. In some browsers, it forces that tab to the foreground, if the browser isn't minified.