I have done one webcam project which will supports view live webcam images.I am using "ENTER USB 2.0" locally its working fine..when i upload it to the webserver and test with client browser..Its not working..its getting errors as "No devices Found"..is there any server settings to detect the webcams?..
How can we detect any type of webcams in asp.net..?Or is there any activeX plug-ins for detecting the webcam on client browsers..
Its very important to me..please share with me..if you have any ideas?
thanks in advance..
I used jpegcam once to upload photo from webcam. Hope this helps. Basic code is like (using jquery):
<script type="text/javascript" src="<path to webcam.js (inside jpegcam)>"></script>
<script type="text/javascript">
$(function () {
webcam.set_swf_url('path to webcam.swf(inside jpegcam)');
webcam.set_api_url(document.URL);
webcam.set_quality(90); // JPEG quality (1 - 100)
webcam.set_shutter_sound(false);
$("#imgWrapper").css({ height: "262px",
width: "215px",
border: "solid 1px #aaa"
});
var pb = $("#tp");
pb.addClass("spbtn");
pb.click(function () {
$("#fc").html(webcam.get_html(215, 262));
viewCam(true);
});
});
function viewCam(show) {
if (show) {
$("#sc").hide();
$("#iUploadFrame").fadeIn();
}
else {
$("#iUploadFrame").hide();
$("#sc").fadeIn();
}
}
function camReset() {
webcam.reset();
setCamInstruction("Adjust, snap, then upload", "#666");
}
function setCamInstruction(msg, c) {
$("#upStatus").html(msg).css("color", c);
}
function handleUpload() {
var gi = $("#ghimg");
gi.css("visibility", "visible")
webcam.upload(document.URL, function () {
gi.css("visibility", "hidden")
setCamInstruction("Upload complete!", "green");
});
}
</script>
html:
<div id="sc" style="width: 218px">
<div id="imgWrapper">
<img src="<path to a placeholder image>" alt="no photo" id="imgPhoto"
runat="server" height="262" width="215" />
</div>
<br />
<div style="text-align: center">
<span id="tp">Open Webcam</span>
</div>
<br />
</div>
<div id="iUploadFrame" style="display: none;">
<div id="fc">
-- Cam Content --
</div>
<div id="upStatus" style="padding: 5px 0; color: #666;">
Adjust, snap, then upload</div>
<input type="button" value="Snap" onclick="webcam.freeze()" />
<input type="button" value="Reset" onclick="camReset();" />
<input type="button" value="Upload" onclick="handleUpload()" />
<div class="progress_beside_inline" id="ghimg">
</div>
</div>
Related
I have a problem using both cropper and caman together.
I copied the code provided by fengyanchen, and modified it a bit for Meteor. The Caman works, but the cropper doesn't initiate.
Code:
http://codepen.io/chenfengyuan/pen/wMrVQY
HTML
<template name="Test">
{{ > index }}
<div class="container">
<h1 class="page-header">Use Cropper with CamanJS</h1>
<p id="upload">
<input id="file" type="file">
</p>
<p id="handle" style="display:none">
<button class="btn btn-primary" id="brightness">Brightness</button>
<button class="btn btn-primary" id="contrast">Contrast</button>
</p>
<p>
<canvas id="canvas" style="max-width:100%;"></canvas>
</p>
</div>
My events handler:
...(functions copied as provided in link)
Template.Test.events({
'change #file':function(event,template){
if (URL) {
var files = event.target.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
startCaman(URL.createObjectURL(file));
} else {
window.alert('Please choose an image file.');
}
}
} else {
$file.prop('disabled', true);
}
}
})
It worked when I did the following:
giving the canvas a width & height
removing var $canvas at the topmost level and replacing it with the real canvas selector everywhere
My code is working for a local URL, but not for an Internet URL:
<div style="margin-top: 8px; display: Block">
<input type="text" class="form-control input-sm" id="Txtlink" placeholder="Enter or Paste a Link" style="width: 84%; float: left;"><a style="border-radius: 5px; float: right" class="btn btn-primary" onclick="isValidURL()" type="button">Add</a>
<iframe id="urliframe" src="" width="404" height="250" scrolling="no" style="display:none;">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
jQuery:
function isValidURL() {
var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
var url = document.getElementById("Txtlink").value
if (RegExp.test(url)) {
$(document).ready(function () {
$("#urliframe").show();
var loc = url;
alert(loc);
document.getElementById('urliframe').setAttribute('src', loc);
});
}
else {
alert("Error");
}
}
If it's a 3rd party site, they may have a denied access by using the X-FRAME-OPTIONS header.
https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
If it is your site, you may need to set the correct header to allow the page to be visible within the frame.
I am facing a very weird issue here. I am calling an action (which is a view) and there I have got two buttons. There are separate handles for these buttons in javascript which is placed in the same .cshtml file. The code as mentioned below:
#model fbpm.Models.UserDetail
#{
ViewBag.Title = "My View"; }
<style type="text/css">
#top
{
width:360px;
float: left;
height:100px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#right
{
width:360px;
float: left;
height:100px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
} </style>
<div id="top" class="display-field">
Name : #Html.DisplayFor(model => model.UserName)
<br />
<br />
<input id="userid" type="hidden" value = #Html.DisplayFor(model => model.UserID)></input>
Address : #Html.DisplayFor(model => model.FullAddress) <br />
#Html.DisplayFor(model => model.State) <br />
#Html.DisplayFor(model => model.Country)
<br />
<br />
</div>
<div id="top" class="display-field">
PAN # : #Html.DisplayFor(model => model.PANNo)
<br /><br />
Booked Date : #Html.DisplayFor(model => model.BookedDate)
<br />
<br />
<br />
<br />
</div>
<div id="right" class="display-field">
Booked Amount : INR #Html.DisplayFor(model => model.BookedAmount)
<br /><br />
Remaining Amount : INR
<label id="ramt"/>
<br />
<br />
<br />
<br />
</div>
<div id="display" style="clear:both;">
<button type="button"style="width:150px" id="paysched" name="paysched" onclick="handleflat();">Payment Schedule</button>
<button type="button" style="width:150px" id="flat" name="flat" onclick="handleps();"> Flat </button>
</div>
<br />
<div id="container" style="clear:both;"> Click on the above button to display Flat/Payment Schedule </div> <script type="text/javascript" language="javascript">
$.get('#Url.Action("GetRamt", "Customer")?id=' + document.getElementById("userid").value,
function (amount) {
document.getElementById("ramt").innerHTML = amount;
});
function handleflat() {
$.get('#Url.Action("GetFlat", "Customer")?id=' + document.getElementById("userid").value,
function (viewResult) {
$("#container").html(viewResult);
});
}
function handleps() {
$.get('#Url.Action("paysched", "Customer")?id=' + document.getElementById("userid").value,
function (viewResult) {
$("#container").html(viewResult);
});
} </script>
However, When I click on the second button (Payment Schedule), its calling the Flat button action. And when i keep clicking the second button, sometimes it works! And when it works, I click on some other area in the window, the first button's function is called.
Please can someone help?
*EDIT: The first button is always highlighted and I guess, thats the problem why the first button's function is always called. I dont want this behavior *
EDIT2: Meanwhile, i was just playing around with the code and I changed the Button to Radio buttons! Initially, both the radio buttons were not selected and when I click on the second button, the second button is getting selected. Now, is the interesting part => When I click on any part of the result view, the first radio button is getting selected!!! And now, both the radio buttons are ON!!! :(
*EDIT3: And I named both the radio buttons with the same name. Now, clicking on any part of the result div is making the first radio button selected! *
Placing the mouse over the DIV - CONTAINER, highlights the First button and thats why that button is getting clicked.
Regards,
Hari
Apart from the fact that your html could use some cleaning up for example:
<input id="userid" type="hidden" value = #Html.DisplayFor(model => model.UserID)></input>
Becomes:
#Html.HiddenFor(model => model.UserID)
Also ... nbsp; among other things.
And the javascript could be something like this:
$(function () {
// get the user id
var userId = $('#UserID').val();
// get 'Remaining Amount' -> this should be included in your view model frankly speaking
// getting it like this is not "ideal"
$.get('#Url.Action("GetRamt", "Customer")?id = ' + userId, function (responseData) {
$('#ramt').text(responseData);
});
// bind the button events
$('#flat').click(function() {
var flatUrl = '#Url.Action("GetFlat", "Customer")?id = ' + userId;
getCustomerData(flatUrl);
});
$('#paysched').click(function () {
var paySchedUrl = '#Url.Action("paysched", "Customer")?id = ' + userId;
getCustomerData(paySchedUrl);
});
// handle the response from the server for the customer data
var getCustomerData = function(url) {
$.get(url, function(responseData) {
$('#container').html(responseData);
});
};
});
I hope this helps.
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.
So currently, on all elements that require the theme color, I have given them the css class has-main-color.
In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.
All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.
Currently, I'm trying the following:
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
As you could probably guess, this doesn't work so well.
So what would be the best approach to solve this problem using AngularJS?
Look at the documentation page for ngStyle. It has almost exactly what you want.
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
I don't think you can use a class to do this, however try this
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
Demo: Fiddle
Another easy fix
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
Demo: Fiddle
If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.
https://github.com/deanmcpherson/angular-inline-style
Allows for
body { background-color: {{bgColor}}; }
With bg color attached to the appropriate scope.
First time programmer here, writing simple program on HTML5. Can't seem to get image to display when button is clicked. Here is my code:
<p>
<center>
<button onclick="DeadTest()">
<img src="BeginTest.gif"/></button></center></p>
<script language="javascript" type="text/javascript">
function DeadTest()
{
<img style="border-width: 0px;" src="White.jpg" width="768" height="1280" />
}
</script>
Have looked through countless sites and forums but just can't seem to get it to work. Have tried an alert() function and it is working. I think it must be something to do with the code to call on the image.
First time programmer so it might look idiotic. Teach me, oh guru's...
Learn the basics first on how to properly call the javascript function and how to change the properties.
See my sample demo. Hope you will learn from it.
http://jsfiddle.net/NgryM/1/
<script type="text/javascript">
function ButtonClick()
{
alert('Button was clicked');
}
function ImageClick(){
alert('Image was clicked');
}
function ChangeImageSrc(){
var img = document.getElementById('myImage');
img.src = "http://www.ivankristianto.com/wp-content/uploads/2011/05/Javascript.gif";
}
function ChangeSize(){
var img = document.getElementById('myImage');
img.height = "80";
img.width = "40";
}
</script>
<p>
<center>
<input type="button" onclick="ChangeImageSrc()" value="Change Image Src"/>
<input type="button" onclick="ButtonClick()" value="Test Button Click"/>
<input type="button" onclick="ChangeSize()" value="Change Size"/>
<img id="myImage" src="http://www.mmncs.com/wp-content/uploads/javascript_logo.gif" onclick="ImageClick()"/>
</center>
</p>
<p><center><button style="background:url('Login_Button.png');width:86px;height:45px" onclick="DeadTest()"></button></p>
<div><img id="img1" style="visibility:hidden" src="a3.jpg" width="768" height="1280" /></div>
<script>
function DeadTest(){
document.getElementById('img1').style.visibility='visible';
}
</script>