I have a web page that has to open the webcam. On the PC browser It works, but on the Android browser doesn't work. If I try to open the console debug I see that
It doesn't load the JS files (Only on phone).
Any ideas what the issue is?
function take_snapshot() {
//Scatto
Webcam.snap( function(data_uri) {
// dove far apparire l'immagine
document.getElementById('results').innerHTML =
'<h2>Sorpreso è:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
// WebcamJS v1.0.24 - http://github.com/jhuckaby/webcamjs - MIT Licensed
Webcam.set({
width: 320,
height: 240,
dest_width: 640,
dest_height: 480,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<div id="results">Magicamente apparirà qua</div>
<h1>Web-cam Ale culo</h1>
<div id="my_camera"></div>
<!-- libreria per la webcam-->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Settaggi della webcam -->
<!-- BOTTONE PER CATTURARE -->
<form>
<input type=button value="Fota qualcosa" onClick="take_snapshot()">
</form>
</body>
</html>
Try to replace
src="webcam.min.js"
by
src="./webcam.min.js"
Maybe paths aren't the same as computer
Related
Here is my code. I am playing RTSP streaming. I want to take snap shot on click of button.
Although my code takes picture but it is blank white. I need help to diagnose the issue in my code. The play button plays the RTSP streaming and "Take Photo" button capture image.
I need help so that when I press click, the image could be rendered properly.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Script included -->
<script type="text/javascript" src="flashphoner.js"></script>
<script type="text/javascript" src="player-min.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script>
<!-- Main function to take picture -->
function takeshot()
{
window.scrollTo(0, 0);
let div = document.getElementById('play');
html2canvas(div, {
allowTaint: true,
useCORS: true
}).then(
function (canvas)
{
document.body.appendChild(canvas);
document.getElementById('snapshotImg').appendChild(canvas);
})
html2canvas(div, {
onrendered: function(canvas)
{
$("#canvas").append(canvas);
getCanvas = canvas;
}
});
}
</script>
</head>
<!-- CSS -->
<style>
.fp-Video
{
border: 1px double black;
width: 322px;
height: 242px;
}
.display
{
width: 100%;
height: 100%;
display: inline-block;
}
.display > video,
object {
width: 100%;
height: 100%;
}
</style>
<body onload="init_api()">
<!-- section will paly strp straming -->
<div class="fp-Video">
<div id="play" class="display"></div>
</div>
<!-- Button for play and take photo -->
<button id="playBtn">PLAY</button>
<button id="takephoto" onclick="takeshot();">Take Photo</button>
<div><img id="snapshotImg"></div>
<div id="canvas"></div>
<div id="snapshotBtn"></div>
</body>
</html>
Following is my code. It works perfectly well on local host. Somehow when I upload it on server image does not get save.
index.php:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Capture Web camera image </title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 16px; }
form > input { margin-right: 16px; }
#img_output { float:right; margin:21px; padding:21px; border:1px solid; background:#3d3d3d; }
</style>
</head>
<body>
<div id="img_output">Live captured image will Display here...</div>
<h1>jQuery Capture Web camera image </h1>
<h3>Live Demo And Example Demonstrates simple Images 600x460 capture & display here</h3>
<div id="live_camera"></div>
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
Webcam.set({
width: 600,
height: 460,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#live_camera' );
</script>
<form>
<input type=button value="Take Snapshot" onClick="get_take_snap()">
</form>
<script language="JavaScript">
function get_take_snap() {
// Simple call the take some your selfi and some get your live image data
Webcam.snap( function(data_uri) {
// display img_output in page
Webcam.upload( data_uri, 'storeImage.php', function(code, text) {
document.getElementById('img_output').innerHTML =
'<h2>Here is your Display image:</h2>' +
'<img src="'+text+'"/>';
} );
} );
}
</script>
</body>
</html>
PHP Code
<?php
$myfilename = time() . '.jpg';
$livefilepath = 'upload/';
move_uploaded_file($_FILES['webcam']['tmp_name'], $livefilepath.$myfilename);
echo $livefilepath.$myfilename;
?>
The Hosting Provider's Server Admin Team resolved the issue. A complete permission fix from the backend was done for this, so that all the permissions are fixed including the root directory.
I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>
I want to save captured image in a folder from webcam. My code captures image only but how can I store it in a folder. This is my first time to do this. If anyone mention that it will be helpful for me. Thanks in advance.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
I am learning JavaScript and CSS and made a test project in Visual Studio 2015 Community Edition. The problem that I have is, the function changeTitleCSSStyle isn't called when using Visual Studio 2015 Community Edition. At online editor https://js.do/ and in Google Chrome browser the function call works properly. My code:
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/default.css">
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button onclick="javascript: changeTitleCSSStyle();">Change style</button>
</body>
</html>
default.css
h1 {
color: red;
background-color: lightGreen;
border: 12px solid violet;
padding: 5px;
border-radius: 15px;
text-align: center;
}
p, h1 {
font-family: cursive;
}
p, img, button {
margin-left: 50px;
}
Not sure why it doesn't work when using VS. Maybe inline click events are not supported for some reason.
Perhaps it works if you try setting the event in your script itself like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById('change_style_button')
button.addEventListener('click', function(){
changeTitleCSSStyle()
});
});
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button id="change_style_button">Change style</button>
</body>
</html>
You can try
<button onclick="changeTitleCSSStyle();">Change style</button>