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>
Related
When hovering over the picture, hide information about the link that will appear at the bottom left. When adding this script, the image became unclickable. I think the main problem is the incorrect connection of the js file or the execution of this script. I have added the code of 3 files below
openUrl(url: string): void {
window.open(url, '_blank');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roshan Timing</title>
<script src="eel.js"></script>
<link rel="icon" type="image/ico" href="/Roshan.ico"></link>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- TIMER -->
<p class="timer">Timer</p>
<!-- CHAT(INPUT) -->
<!-- created by dankYbat -->
<div class="about_right">
<div class="text_wrap">
<p class="noselect">created by dankYoff</p>
</div>
<!--Connect js to tage image -->
<div class="image_wrap">
<a><img src="github.svg" (click)="openUrl('https://github.com/dankYoff')" width="50"></a>
</div>
</div>
</body>
</html>
You can not use openUrl(url: string): void in a *.js file, looks like you want to use TypeScript. If you want to create a faster vanilla typescript project you can use vite.
Anyway the a solution can be this:
const imgProfile = document.querySelector('#img-profile');
const openUrl = (url) => {
window.open(url, '_blank');
};
imgProfile.addEventListener('click', () => {
openUrl('https://github.com/dankYoff');
});
.img-profile {
cursor: pointer;
}
.img-profile img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
transition: 0.3s;
}
.img-profile img:hover {
transform: scale(1.1);
}
<a class="img-profile" id="img-profile">
<img src="https://cdn.pixabay.com/photo/2022/09/16/13/07/woman-7458584_960_720.jpg" />
</a>
I have a hidden class fadeThis, which does not appear when I hover over the button.
Perhaps it is clashing with another class/div?
What I'm essentially trying to do is create a red fade in over the grey box, when the cursor hovers over the button, and then when the cursor leaves the box(not the button), I want it to return back to it's original state.
I've also added the CSS to help demonstrate
HTML
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
CSS
.imageOne{
height: 300px;
width: 400px;
background-color: grey;
}
.centerButton{
display: flex;
justify-content:center;
padding-top:150px;
}
.btn{
height: 30px;
width:170px;
}
.onClickThis{
height: 300px;
width: 400px;
background-color: tomato;
}
JavaScript
$(document).ready(function () {
$(".onClickThis").hide();
$(".fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(this).addClass("fadeThis onClickThis");
$(".btn").remove();
});
$(".onClickThis").mouseleave(function () {
$(this).removeClass("fadeThis onClickThis");
});
});
});
I don't understand exactly what you are looking for. Maybe you could provide more details.
Here is a demo started from your code with some changes added.
$(document).ready(function () {
$(".onClickThis, .fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(".onClickThis, .fadeThis").fadeIn( 250 );
$(".btn").fadeOut();
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
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
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 want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.
Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?
This is how it should look (just an iframe).
<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>
<div id="body"></div>
In fact, JSFiddle does the same, so there must be a way. Ideas?
You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:
Editor document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit iframe example</title>
<style>
.editors, .preview { float: left; display: block; }
.editors { width: 500px; margin-right: 25px; }
.editors textarea { width: 100%; height: 300px; }
.preview { width: 800px; }
.preview iframe { width: 100%; height: 800px; }
</style>
</head>
<body>
<div class="editors">
<p>
<label>CSS</label>
</p>
<p>
<textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
</p>
<p>
<label>HTML</label>
</p>
<p>
<textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
</p>
</div>
<div class="preview">
<iframe id="preview" src="preview.html"></iframe>
</div>
<script>
function updatePreviewHTML(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.body.innerHTML = content;
}
function updatePreviewCSS(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;
}
</script>
</body>
</html>
The "preview" document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Preview iframe example</title>
<style></style>
</head>
<body>
</body>
</html>
I've only tried this locally, on Firefox 31, so caveat emptor.