I have tried to increase the quality and resolution of the CanvasRecorder in HTML Element Recording using RecordRTC but it doesn't change. I need the highest video quality to record CSS animations inside an HTML element. Did I miss something?
Update: I have tried to increase the dpi/scale in html2canvas library by adding {scale: 2} as well but the video is still blurry.
Updated code:
https://jsfiddle.net/ztgqbu6x/
var options = {
type: 'canvas', // Mandatory STRING
video: {
width: 1920,
height: 1280
},
canvas: {
width: 1920,
height: 1280
},
timeSlice: 10,
// used by CanvasRecorder and WhammyRecorder
// it is kind of a "frameRate"
frameInterval: 90,
// used by CanvasRecorder and WhammyRecorder
// you can pass {width:640, height: 480} as well
//video: HTMLVideoElement,
// used by WebAssemblyRecorder
frameRate: 90,
// used by WebAssemblyRecorder
bitrate: 128000
};
var recorder = new RecordRTC(canvas2d, options);
Related
I'm trying out HTML2PDF javascript.
function createPDF(){
var element = document.getElementById('printMe');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
When I use this the pdf converts etc but it appears halfway down the first page. All of the content is encapsulated in a div
<div id="printMe" style="padding: 20px;padding-right:30px;">.....</div>
I've tried setting the height and removing almost all the content but it still seems to be placing it in the middle of the page as the starting point.
Is there some way of forcing the code to start at the top of the page?
Add scrollY: 0 to the html2canvas object in the html2pdf options:
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1, scrollY: 0 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
I solved the issue.
The movement in position of the print is affected by the scroll position of the window. So if the button to create the PDF is at the top of the page and you click it places the text at the top of the PDF. If the button is placed in the visible area of the page and you scroll down until it is at the top of the page - the amount you've scrolled is added to the top of the PDF document.
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
I used this code snippet to solve the issue. When I go to print I scroll to the top of the document before creating the PDF.
A combination of scrollX, scrollY, x and y worked for me to force the PDF generation from the top left:
const opts = {
margin: 0,
filename 'result.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: {
backgroundColor: "#fff",
scale: window.devicePixelRatio,
y: 0,
x: 0,
scrollY: 0,
scrollX: 0,
windowWidth: 800,
},
jsPDF: { unit: 'px', format: [800, 1600], orientation: 'portrait', precision: 32 }
};
A hack to enforce the same result over all devices is to temporarily set the screen width to the configured windowWidth (this case 800px), e.g., using document.body.style.width = '800px', before creating the PDF, and setting it back to 100% after creating the PDF.
I have set the Capacitor camera plugin with the following options
const image = await Camera.getPhoto({
quality: 20,
width : 200,
height : 200,
allowEditing: false,
source: CameraSource.Camera,
resultType: CameraResultType.Base64
});
After that I take the base64 and upload it to the server. However I am getting images in the 2-5MB range of size (Android). Is there any way of reducing/compressing the size further?
Already checked this and other similar postings but they seem to adjust the size by reducing the quality param and the width and height (which are already low in my case)
I am working on an encoding flow that adds an overlay image to the video. I want this watermark to be in the bottom right corner. No matter what I try with the position parameter, the watermark is positioned in the top left.
Can someone point me to a sample that covers that scenario? The Microsoft docs and samples are vague about positioning the overlay and setting the opacity.
Here is a snippet of code that contains my transform definition. Regardless of the overlay settings, I can use any values for the rectangle position element and nothing changes. The watermark ends up in the upper right of the video. Its like the position and opacity properties are being ignored.
new AMSModels.TransformOutput(
new AMSModels.StandardEncoderPreset(
filters: new AMSModels.Filters
{
Overlays = new List<AMSModels.Overlay>
{
new AMSModels.VideoOverlay()
{
InputLabel = "tbvvideooverlay",
Opacity = .5,
Position = new AMSModels.Rectangle(){ Left = "100", Top = "100", Width = "100", Height = "100"} //**I've tried all types of values here including percentages, nothing changes when I reencode the video.**
}
}
},
codecs: new AMSModels.Codec[]
{
// Add an AAC Audio layer for the audio encoding
new AMSModels.AacAudio(
channels: 2,
samplingRate: 48000,
bitrate: 128000,
profile: AMSModels.AacAudioProfile.AacLc
),
// Next, add a H264Video for the video encoding
new AMSModels.H264Video (
// Set the GOP interval to 2 seconds for all H264Layers
keyFrameInterval:TimeSpan.FromSeconds(2),
// Add H264Layers. Assign a label that you can use for the output filename
layers: new AMSModels.H264Layer[]
{
new AMSModels.H264Layer (
bitrate: 3600000, // Units are in bits per second and not kbps or Mbps - 3.6 Mbps or 3,600 kbps
width: "1280",
height: "720",
label: "3600" // This label is used to modify the file name in the output formats
),
new AMSModels.H264Layer (
bitrate: 1600000, // Units are in bits per second and not kbps or Mbps - 1.6 Mbps or 1600 kbps
width: "960",
height: "540",
label: "1600" // This label is used to modify the file name in the output formats
),
new AMSModels.H264Layer (
bitrate: 600000, // Units are in bits per second and not kbps or Mbps - 0.6 Mbps or 600 kbps
width: "640",
height: "360",
label: "600" // This label is used to modify the file name in the output formats
),
}
),
// Also generate a set of PNG thumbnails
new AMSModels.PngImage(
start: "10%",
step: "10%",
range: "90%",
layers: new Microsoft.Azure.Management.Media.Models.PngLayer[]{
new AMSModels.PngLayer(
width: "100%",
height: "100%"
)
}
),
new AMSModels.JpgImage(
start: "10%",
step: "10%",
range: "90%",
layers: new Microsoft.Azure.Management.Media.Models.JpgLayer[]{
new AMSModels.JpgLayer(
quality: 100,
width: "100%",
height: "100%"
)
}
)
},
// Specify the format for the output files - one for video+audio, and another for the thumbnails
formats: new AMSModels.Format[]
{
// Mux the H.264 video and AAC audio into MP4 files, using basename, label, bitrate and extension macros
// Note that since you have multiple H264Layers defined above, you have to use a macro that produces unique names per H264Layer
// Either {Label} or {Bitrate} should suffice
new AMSModels.Mp4Format(
filenamePattern:"{Basename}_{Resolution}_{Bitrate}{Extension}"
),
new AMSModels.PngFormat(
filenamePattern:"Thumbnail-{Basename}-{Index}{Extension}"
),
new AMSModels.JpgFormat(
filenamePattern:"Thumbnail-{Basename}-{Index}{Extension}"
)
}
),
onError: AMSModels.OnErrorType.StopProcessingJob,
relativePriority: AMSModels.Priority.Normal
)
};
string description = "A simple custom encoding transform with 2 MP4 bitrates";
// Create the custom Transform with the outputs defined above
transform = await client.Transforms.CreateOrUpdateAsync(resourceGroupName, accountName, transformName, outputs, description);
}
Thank you!
Thank you very much for identifying this concern and pointing it out. We took a look at this and have confirmed that there is indeed a bug that you have found here! First off, thank you for finding this issue and reporting it.
Now the bad news, right now we are going to have to look at fixing that and redeploying a fix to production. That could take some time on our side, so if you are in need of a quick solution the only thing I can suggest is to use the older v2 API (yes, the one we announced deprecation on) to work around this issue until we can get a code fix out to production.
Here is the older method of doing this in v2 if that works for you - https://learn.microsoft.com/en-us/azure/media-services/previous/media-services-advanced-encoding-with-mes#overlay
Thanks for confirming this. I've already migrated and committed to v3 so turning back would be messy.
I am still working on it, but I do have a workaround that will get me by. If I make and image the same size as my largest video size, I can then position the watermark in the bottom right in that image. As long as its a transparent PNG, it "looks" like the watermark is bottom right justified.
I have to put this solution to the test across all the video assets I have, but so far I think it will work until the patch above will work. Once that is fixed, I plan on allowing our users to pick from a variety of watermarks.
Thanks again!
Eric
I am creating an app window like this:
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
//Create the app window
chrome.app.window.create(
'test.html',
{
frame: "none",
bounds:
{
width: 700,
height: 600,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
},
maxWidth: 700,
maxHeight: 600,
resizable: false,
id: "test"
}
);
but it shows on screen as only 591 pixels tall!
When I view the HTML/CSS in Chrome as a local HTML page, it shows as the proper height of 600 pixels tall. Why does creating it as a window make it 9 pixels too short?
It was caching the size I had set the window to in a previous version and not allowing that to be changed via the create method. The only fix I found was to do:
function(myWin)
{
myWin.moveTo( Math.round((screenWidth-width)/2), Math.round((screenHeight-height)/2) );
myWin.resizeTo( 700, 600 );
}
in the callback for the create method
With a Perl script I generate numerous Google Line Charts for 20 and more series of data at once.
The legend labels are of the form: a serial number appended by an iterating #counter.
Unfortunately, starting with #10 those counters are cut off:
Is there maybe a way to stop Google charts from doing that?
My quite simple chart code is below:
var data = { ...... };
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
chart.draw(x, options);
}
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
To get full legend in your chart just add chartArea width and height as below
var options = {
title: csv,
width: 800,
height: 600,
chartArea: { width: "50%", height: "70%" }
};
Take a look at this jqfaq.com to get a working sample
in chartArea, make width 30 percent move the graph to the center.
chartArea: { width: "30%", height: "50%" }