I am able to download content of HTML page but page contain image of QR code, which is not visible in my downloaded image instead of that I am getting blank space
My HTML and jQuery code is in the following fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="html-content-holder" align="center" style="background-color:lightcyan; color:black; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="content">
<form method="post" id="qrForm">
<center>
<h4 style="color:red">Generate QR Code using Google Chart API</h4>
<br>
<b>Type Website URL:</b>
<!--Create TextBox Code-->
<input type="text" id="QRCode" value="https://www.google.com" size="25">
<br><br>
<h3>Output QR Image:</h3> <img id='qrImage' style='display:inline;' src="Images/chart.png" />
<img id="embedImage" />
<img id="embedImage" />
<!--<!--<!-- Create Button Code-->
<center>
<input type="button" value="Make QR Code" onclick="javascript: generateQRCode();">
</center>
</center>
<center>
<a id="btn-Convert-Html2Image" href="#">Download QR Png</a>
<br />
<!--Print Preview Img In this Div-->
<h3>Preview :</h3>
<div id="previewImage">
</div>
</center>
</form>
</div>
</div>
<script>
//Generate QR Code Function
function generateQRCode() {
this.qrImage.style.display = 'none';
//GoogleAPI + TextBox Value= Create QR Image.
this.qrImage.src = "https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=" +
encodeURIComponent(QRCode.value.trim());
this.qrImage.style.display = 'inline';
//Convert Html To Png
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
$("#QRCanvas").append(canvas);
getCanvas = canvas;
}
});
//jQuery: Download HTML to IMAGE
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream" + "Image/chart.png");
$("#btn-Convert-Html2Image").attr("download", "QRCodeImage.png").attr("href", newData);
//<img class="preload_img" src="../../dbfhrael6egb5.cloudfront.net/wp-content/themes/qr/img-V2/modal/download_preloader.gif"/>
});
}
</script>
I found your html a bit complicated so I changed it to fit with my style. I did not use html2canvas, I was doing some annoying stuff for some reason, so I used another library that does the same thing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Download QR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.5.2/dom-to-image.min.js"></script>
</head>
<body>
<div style="background-color:lightgrey; padding: 25px;">
<h3>Generate QR Code using Google Chart API</h3>
<form>
<label for="QRCode">Type url:</label>
<input type="text" id="QRCode" value="https://www.google.com">
<button type="button" id="btn-generateQR">Generate QR</button>
</form>
<div id="displayImg"> </div>
<button id="btn-downloadQR" style="display:none;">Download QR</button>
</div>
<script>
$(document).ready(function () {
$('#btn-generateQR').click(function () {
let inputValue = $('#QRCode').val().trim()
$('#displayImg').html(
`
<h4>Output QR Image:</h4>
<img id="linkQR" src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=${inputValue}"/>
`
)
$('#btn-downloadQR').show()
})
$('#btn-downloadQR').click(function () {
domtoimage
.toJpeg(document.getElementById('linkQR'), {
quality: 0.95
})
.then(function (dataUrl) {
let link = document.createElement('a')
link.download = 'imageQR.jpeg'
link.href = dataUrl
link.click()
})
})
})
</script>
</body>
</html>
TRY THIS
$('#btn-generateQR').click(function () {
html2canvas(document.getElementById('displayImg'), {
onrendered: function(canvas) {
var data = canvas.toDataURL("image/png");
var docDefinition = {
content: [{
image: data,
width: 500,
height:400,
}],
pageMargins: [ 50, 20, 20, 10 ]
};
pdfMake.createPdf(docDefinition).download("budget.pdf");
},
logging: true,
useCORS:true,
});
});
Related
This is my first approach with js and html coding, please be as much simple as possible!
I want to improve the form developed in my web App making possible to upload image. My goal is to:
Add input type file on my web App
Send the file to server side
Save the file in the G Drive, take the link and save it in Google Sheet
To do this I have already added in my html a file input area, but I'm not sure about how I may manage it in script section.
All the information added in the form are send to server in an object called measureInfo and I want to maintain this routine. When I try to add
measureInfo.media = document.getElementById('fileUpload').files
it doesn't run and console return `Failed due to illegal value in property: media.
Here I report some string of code that may help to answer. If you have some suggests about how manage file in server side with DriveApp please share!
<script>
measureInfo.media= document.getElementById('fileUpload').files
google.script.run.sendToDatabase(measureInfo);
</script>
<form action="#">
<!-- Upload File -->
<div class="file-field input-field">
<div class="btn-large blue darken-3">
<span>Media</span>
<input type="file" id= 'fileUpload' name ='fileUpload'>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder = 'Upload Media'>
</div>
</div>
</form>
You could use FileReader.onload event to build an object that can be passed server-side:
const file = document.getElementById('fileUpload').files[0];
const fr = new FileReader();
fr.onload = (e) => {
const data = e.target.result.split(",");
measureInfo.media = {fileName: file.name, mimeType: file.type, data: data[1]};
google.script.run.sendToDatabase(measureInfo);
}
fr.readAsDataURL(file);
Reference:
FileReader.onload
Uploading Multiple Files From Local To Google Drive using Google Apps Script
Here's some code I use for saving receipts:
HTML with JS:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(rObj){
$('#dt').val(rObj.date);
})
.initForm();
});
function fileUploadJs(frmData) {
var amt=$('#amt').val();
var vndr=$('#vndr').val();
var img=$('#img').val();
if(!amt){
window.alert('No amount provided');
$('#amt').focus();
return;
}
if(!vndr) {
window.alert('No vendor provided');
$('#vndr').focus();
return;
}
if(!img) {
window.alert('No image chosen');
$('#img').focus();
}
document.getElementById('status').style.display ='inline';
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('status').innerHTML=hl;
})
.uploadTheForm(frmData)
}
console.log('My Code');
</script>
<style>
input,textarea{margin:5px 5px 5px 0;}
</style>
</head>
<body>
<h3 id="main-heading">Receipt Information</h3>
<div id="formDiv">
<form id="myForm">
<br /><input type="date" name="date" id="dt"/>
<br /><input type="number" name="amount" placeholder="Amount" id="amt" />
<br /><input type="text" name="vendor" placeholder="Vendor" id="vndr"/>
<br /><textarea name="notes" cols="40" rows="2" placeholder="NOTES"></textarea>
<br/>Receipt Image
<br /><input type="file" name="receipt" id="img" />
<br /><input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
</form>
</div>
<div id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Uploading. Please wait...
</div>
</body>
</html>
GS:
function uploadTheForm(theForm) {
var rObj={};
rObj['vendor']=theForm.vendor;
rObj['amount']=theForm.amount;
rObj['date']=theForm.date;
rObj['notes']=theForm.notes
var fileBlob=theForm.receipt;
var fldr = DriveApp.getFolderById(receiptImageFolderId);
rObj['file']=fldr.createFile(fileBlob);
rObj['filetype']=fileBlob.getContentType();
Logger.log(JSON.stringify(rObj));
var cObj=formatFileName(rObj);
Logger.log(JSON.stringify(cObj));
var ss=SpreadsheetApp.openById(SSID);
ss.getSheetByName('Receipt Information').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
return html;
}
function formatFileName(rObj) {
if(rObj) {
Logger.log(JSON.stringify(rObj));
var mA=rObj.date.split('-');
var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
rObj.file.setName(name);
}else{
throw('Invalid or No File in formatFileName() upload.gs');
}
return rObj;
}
function initForm() {
var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
return {date:datestring};
}
<script>
function preventFormSubmit(){
var forms=document.querySelectorAll('form');
for (var i=0;i<forms.length;i++){
forms[i].addEventListener('submit',function(event){
event.preventDefault();
});
}
}
window.addEventListener('load',preventFormSubmit);
function handleFormSubmit(formObject){
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
<script>
function uploadTheForm(theForm) {
var rObj={};
rObj['vendor']=theForm.vendor;
rObj['amount']=theForm.amount;
rObj['date']=theForm.date;
rObj['notes']=theForm.notes
var fileBlob=theForm.receipt;
var fldr = DriveApp.getFolderById(receiptImageFolderId);
rObj['file']=fldr.createFile(fileBlob);
rObj['filetype']=fileBlob.getContentType();
Logger.log(JSON.stringify(rObj));
var cObj=formatFileName(rObj);
Logger.log(JSON.stringify(cObj));
var ss=SpreadsheetApp.openById(SSID);
ss.getSheetByName('Receipt Information').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
return html;
}
function formatFileName(rObj) {
if(rObj) {
Logger.log(JSON.stringify(rObj));
var mA=rObj.date.split('-');
var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
rObj.file.setName(name);
}else{
throw('Invalid or No File in formatFileName() upload.gs');
}
return rObj;
}
function initForm() {
var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
return {date:datestring};
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<?!= include('JavaScript'); ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<head>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(rObj){
$('#dt').val(rObj.date);
})
.initForm();
});
function fileUploadJs(frmData) {
var amt=$('#amt').val();
var vndr=$('#vndr').val();
var img=$('#img').val();
if(!amt){
window.alert('No amount provided');
$('#amt').focus();
return;
}
if(!vndr) {
window.alert('No vendor provided');
$('#vndr').focus();
return;
}
if(!img) {
window.alert('No image chosen');
$('#img').focus();
}
document.getElementById('status').style.display ='inline';
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('status').innerHTML=hl;
})
.uploadTheForm(frmData)
}
console.log('My Code');
</script>
</head
<body>
<div class="form-row">
<div class="form-group col-md-12">
<h5 style="text-align:center;">Upload Photo</h5>
<div class="form-row">
<div class="form-group col-md-4" style="word-wrap: break-word">
<p3 style="text-align:left; color:red">
Notice! Please doff eyewear & mask and avoid sunlight exposure when taking selfie!</p>
</div>
<div class="form-group col-md-6"><img id="output" width="200" height="200" src="https://www.citypng.com/public/uploads/small/116395943260tji5ordfujy44njydzhlidv8reqpmtun7ggx1oszpz1dcistzxnmag7do6vxkjxphlsgueuurkg9pkpbwgorvv9lratpxm38rp5.png" alt="photo" style="border:gray; border-width:2px; border-style:solid;"/></div>
<div class="form-group col-md-12">
<center>
                        <input class="file-path validate" type="file" id="fileUpload" name="fileUpload" value='fileUpload' accept="image/*" onchange="loadFile(event)">
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
};
</script>
</div>
</body>
</html>
[1]: https://i.stack.imgur.com/98vPf.png
I have a problem with cv.threshold() function in opencv.js library.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="opencv.js" type="text/javascript"></script>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasInput" ></canvas>
</div>
<div class="inputoutput2">
<canvas id="canvasOutput" ></canvas>
</div>
</div>
<script type="text/javascript">
let image1=cv.imread('bookpage.jpg');
let threshold;
cv.threshold(image1,threshold,12,250,THRESH_BINARY);
cv.imshow('canvasInput',image);
cv.imshow('canvasOutput',threshold);
</script>
</body>
</html>
Error:
Uncaught Error: Please input the valid canvas or img id.
at Object.Module.imread (/C:/Users/q/Desktop/web/opencv.js/4-)Thresholding/opencv.js:56:20361)
How can I fix that error?
You need to pass in a canvas or image ID as stated in the error message. You're passing it a file name. Sample code from the docs
OpenCV docs
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.
function doGet() {
return HtmlService
.createHtmlOutputFromFile('index')
}
function criarDocument(){
var doc = DocumentApp.create('Doc');
}
function criarSheet(){
var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
var presentation =
Slides.Presentations.create({"title": "Presentation"});
Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<title>CRIE</title>
<script>
function criarDocument(){
google.script.run.criarDocument();
}
function criarSheet(){
google.script.run.criarSheet();
}
function createPresentation(){
google.script.run.createPresentation();
}
function titulo(){
var st = document.getElementById('student').value;
var te = document.getElementById('teacher').value;
var wo = document.getelementById('work').value;
document.getElementById('student' + 'teacher' + 'work').value;
}
</script>
</head>
<body>
<h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
<div>
<form id = 'form' onsubmit="titulo">
<h2><p align = "center"> Student:</p></h2><p align = "center">
<input type="text" name="estudante" id="student">
<h2><p align = "center">Teacher: </p></h2><p align = "center">
<input type="text" name="professor" id="teacher">
<h2><p align = "center">Work Name</p></h2><p align = "center">
<input type="text" name="trabalho" id="work">
<br><br>
<button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
<button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
<button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
</form>
</div>
</body>
</html>
Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.
Code.gs
function onOpen()
{
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea><br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>
I have a upload-file-form in home.php. When a file is uploaded successfully the home.php loads the upload.php where I have a form there the user can write the information about the mp3 file, info like artist name and things like that. I want to implement the Autocomplete script by jQuery. But the autocomplete don't work when it get loaded through javascript code but it work when I visit the page upload.php. What can be the problem?
Home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>
<body style="margin-top:-60px;">
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<div>
<input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
<input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
</div>
</form>
<div style="padding:0px 10px 0px 10px;">
<div id="upload_response"></div>
</div>
</body>
</html>
Upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = ["html", "php"];
$("#artistInput").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
<input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
<input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
<input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
</form>
</div>
</body>
</html>
Script.js
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
$("#upload").animate({
height: '765px'
}, 350);
$('#errormessage').slideUp('fast');
}
You're executing the script before the DOM element is ready.
You can do several different things to solve it, for example:
Load your script at the bottom of the page
Move your script inside document ready event, so the DOM element is available
$(document).ready(function() { -your script here- });
you can use ajax to use auto complete type plug-in..
<style>
label._tags {
padding:5px 10px;
margin:0px;
border:solid thin #ccc;
border-radius:3px;
display: inline-block;
}
label._tags span {
padding:2px 10px;
margin: 0px 10px;
color:#FFF;
border-radius:700px;
font-family:"calibri",verdana,serif;
background-color:teal;
}
</style>
<script type="text/javascript">
var request;
var tag=new Array();
function getXMLObject(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest);
}else if(window.ActiveXObject){
return(new ActiveXObject("Microsoft.XMLHttp"));
}else{
return (null);
}
}
function getCategory(){
var address="Ajax_testing";
request=getXMLObject();
var data=document.getElementById("multitag").value;
var nwadd=address+"?text="+data;
request.onreadystatechange=showResultsubject;
request.open("GET",nwadd,true);
request.send();
}
function close()
{
var y=document.getElementById("p");
var myNode = document.getElementById("p");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
y.setAttribute("style","dispaly:none;");
}
function removetag(id)
{
var y=document.getElementById("l");
var z=document.getElementById(id.substr(3));
tag.pop();
y.removeChild(z);
}
function gettag(id){
tag.push(id);
var f="";
for (var i=0;i<tag.length;i++)
{
var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";
f=f.concat(s);
}
document.getElementById("l").innerHTML=f;
}
<tr>
<td>Keyword :
</td>
<td><input type="text" id="multitag" name="multitag" onkeyup="getCategory()" onclick="close()">
<div id="l">
</div>
<div id="p" style="display: none;z-index:11;" >
</div>
</td>
</tr>
I have an ASP.NET web application with a jw player embedded inside
I have this function that calls the player. It loads, but it doesn't play the video.
function watchMovie() {
$("#vidRecorderHolder").html("<span id='vidRecorderDIV'></span>");
var flashvars = {};
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/streams/vid_undefined.flv";
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/flv:streams/vid_undefined.flv";
flashvars.file = "C:\\Red5\\webapps\\irreducibleVideoRecorder\\streams\\vid_undefined.flv";
flashvars.bufferLength = 2;
flashvars.autostart = "false";
var parameters = {};
var attributes = {};
attributes.id = "audioPlayer";
attributes.name = "audioPlayer";
swfobject.embedSWF("jwplayer/player.swf", "vidRecorderDIV", "400", "320", "11.2.0", "scripts/expressInstall", flashvars, parameters, attributes);
}
For the first two commented-out lines designating the file, it gives me a "not found" error, but as it is now, the player only has a "play" symbol, but pressing it does nothing.
\ is an escape character, so I figured I'd put double slashes there, because when I viewed the page source with Chrome, it omitted the characters.
Now the page source reads
<param name="flashvars" value="file=C:\Red5\webapps\irreducibleVideoRecorder\streams\vid_undefined.flv&bufferLength=2&autostart=false">
Which still looks weird, but I'm not sure if that's relevant or not
I can confirm that the file is in the directory, and is playable.
Page source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA2NTIwMDgwNw9kFgJmD2QWAgIDDxYCHgdlbmN0eXBlBRNtdWx0aXBhcnQvZm9ybS1kYXRhZGQlAX0mmeHCCAuOdpcUwBxGH14XJq01zIbI4uCjZlatCw==" />
</div>
<script src="/WebResource.axd?d=MJP5xkYPuyWBAjVU2xsV-Ap2JP1L220SBXlo3NjcDd8nogK0ORiSjVtryfppfDDGc0ng66U7H1aIS7AXhxSYzmap9_sZlZB7JlPbjfVnsV41&t=635067596440015508" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwL3msvyAgKbwpb7BgKQ27PvDeRlS3bV+I+t0mZfoGe3YHVdQS6I+/ddesy6Gg5KpxvT" />
</div>
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
[ Log In ]
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=T_8NFTKgMGpmwN-MxtBGLhNPWQQCQCTOa8uoBDlXGQ-NVWkd3uGFEJgng62cCcewoNt4jyQGp3B6P2tEJPk51WuRKvO1gE1qzDp5lWaAI9c1&t=635067596440015508" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<input name="ctl00$MainContent$File1" type="file" id="MainContent_File1" />
<input type="submit" name="ctl00$MainContent$b1" value="Upload" id="MainContent_b1" />
<link href="vid.css" rel="stylesheet">
<object width="400" height="400">
<embed src="commercialtribe.swf" type="application/x-shockwave-flash" width="400" height="400" allowscriptaccess: "always" name="vidRecorder" Attributes.name="vidRecorder"/>
</object>
<input type="button" value="next" onclick="DoNext()" />
<input type="button" value="watch" onclick="watchMovie()" />
<img src="" id="imagebox" height=400 width=400/>
<input type="hidden" name="ctl00$MainContent$fetch" id="MainContent_fetch" />
<div id="vidRecorderHolder"><span id="vidRecorderDIV"></span></div>
<script type="text/javascript">
var index = 1;
document.getElementById("imagebox").src = "./Data/image1.png";
function DoNext() {
var get = document.getElementById('MainContent_fetch').value;
var getInt = parseInt(get);
if(index<getInt){
index++;
document.getElementById("imagebox").src = "./Data/image"+(index)+".png";
}else{
index=1;
document.getElementById("imagebox").src = "./Data/image1.png";
}
thisMovie("vidRecorder").addTimeStamp();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
var timeArr = Array();
function timeArray(x) {
alert("Your time array is " + x);
x = timeArr;
}
function watchMovie() {
$("#vidRecorderHolder").html("<span id='vidRecorderDIV'></span>");
var flashvars = {};
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/streams/vid_undefined.flv";
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/flv:streams/vid_undefined.flv";
flashvars.file = "C:\\Red5\\webapps\\irreducibleVideoRecorder\\streams\\vid_undefined.flv";
flashvars.bufferLength = 2;
flashvars.autostart = "false";
var parameters = {};
var attributes = {};
attributes.id = "audioPlayer";
attributes.name = "audioPlayer";
swfobject.embedSWF("jwplayer/player.swf", "vidRecorderDIV", "400", "320", "11.2.0", "scripts/expressInstall", flashvars, parameters, attributes);
}
</script>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
I found the solution.
I replaced
flashvars.file = "C:\\Red5\\webapps\\irreducibleVideoRecorder\\streams\\vid_undefined.flv";
With this:
flashvars.file = "http://localhost:5080/irreducibleVideoRecorder/streams/vid_undefined.flv";
Before the absolute file-system path, it was previously rtmp://, and that didn't work, but then when I changed it to http, then it worked.
I was going off this tutorial, but perhaps I don't have an rtmp server. I thought Red5 was one, but now I see it only supports it.