html2canvas renders blank white image while capturing image of RTSP streaming - javascript

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

Not connect js to html

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>

jQuery - hidden class is not being displayed with fadeIn

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>

Why aren't included scripts working on the Android browser?

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

Store image from webcam in javascript and php

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>

Use an iframe with editable website

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.

Categories

Resources