I have the following code:
let self = this;
this.chunks = [];
const canvas2 = document.getElementById("self-canvas");
let recordStream = canvas2.captureStream(1);
var options;
options = {mimeType: 'video/webm; codecs=vp9'};
this.recorder = new MediaRecorder(recordStream, options);
this.recorder.ondataavailable = function(evt) {
self.chunks.push(evt.data);
};
this.recorder.onstop = function(evt) {
console.log("recorder stopping");
const link = document.createElement('a');
const videoBlob = new Blob(self.chunks, { type: "video/webm" });
console.log("file size: " + videoBlob.size);
const url = URL.createObjectURL(videoBlob);
link.href = url;
link.download = "sample.webm";
document.body.append(link);
link.click(); //if I comment out here I can see the video
};
console.log("finished setting controller")
console.log("recorder starting");
this.recorder.start(10000);
// the recorder.stop is called somewhere else
What it is supposed to do is pretty simple:
I have the element with id "self-canvas" that is showing my camera.
Now I am trying to record the camera and download the video from the browser using MediaRecorder, but for some reason I am unable to download the file.
I am sure that the file is being recorded, and console.log("file size: " + videoBlob.size); does not return empty.
But when I let the code run, instead of downloading the file, it tries to open it on the same window, and I cannot even see the video because the previous window disappears with the data of the recording.
However if I comment out the link.click(); I am able to see the video by opening the link on a new page (without closing the previous one). But it still doesn't download...
I used this as example, what am I doing wrong?
For heaven's sake...
I just added target blank and it worked.
link.href = url;
link.download = "sample.webm";
link.target = '_blank';
Probably because the resources are lost if it tries to open on the same page, and because it doesn't actually download the file if it is not a link "click".
Still, I never saw anyone having to add target blank in their examples like this one.
So I wonder why this is the case only for me...
Related
I need to have a page that accesses two links, one in a window/tab that downloads a file and another one that after about 5 seconds or so accesses directly to this linl.
Currently I have the following code:
if ("URL1" !== '') {
const link = document.createElement('a')
link.href = "URL1"
link.target = "_blank"
link.download = "pdf"
link.click()
setTimeout(function() {window.location.href = "URL2"; }, 5000 );
} else {
window.location.href = "URL2" />"
}
I've tried to force the download in several ways with Javascript since the tool I work with doesn't allow PHP, but I can't get it to download correctly.
I have the following Angular code to download a PDF document. It works fine in other browsers but in Firefox when browser settings are set to "Open in Firefox" for PDF download then it doesn't open a new tab.
const blob = new Blob([data], { type: docType });
const blobDoc = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobDoc;
link.download = 'Filename.pdf';
link.click();
What I want is that in case of Firefox the link must always be open in a new tab. Even if when I set the target attribute, it doesn't open the new tab.
link.target = '_blank'
I tried the following and it works but then I do not get the file name.
const agent = window.navigator.userAgent.toLowerCase();
if (agent.indexOf('firefox') > -1) {
window.open(blobDoc, '_target');
} else {
// Normal download
}
I'm using JavaScript to record the user screen and afterward playing it in a video tag of the page and downloading it.
Now it's playing fine the browser video tag but not playing once it's downloaded
Here's my code
let btn = document.querySelector('button')
btn.addEventListener('click', async function (){
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
})
let mediaRecorder = new MediaRecorder(stream)
let chunks = []
mediaRecorder.addEventListener('dataavailable', function (e) {
chunks.push(e.data)
})
mediaRecorder.addEventListener('stop', function () {
let blob = new Blob(chunks, { 'type': 'video/webm' })
// Working fine
let video = document.querySelector('video')
video.src = URL.createObjectURL(blob)
// Downloaded video is not playing
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = 'video.webm'
a.click()
})
mediaRecorder.start()
})```
It might be worth you trying this experiment, run this code:
click
<script>
const a = document.querySelector('a');
a.click();
</script>
(doesn't work as a stack snippet, need to run direct on your system/browser).
Does the video start automatically? If not, are you seeing any warning, for example at the top right of your browser window, that popups are blocked? If so you could try unblocking them and see what happens.
Note: I'm not sure what you mean by 'download' and its setting in the anchor element.
I have a code in angular js which downloads an excel file on clicking a button. In chrome the file download starts automatically on clicking the button. But on Microsoft Edge clicking the button displays a prompt asking the user, whether they want to open or save file. Clicking on save button in prompt shows yet another prompt with 3 buttons OPEN, OPEN FOLDER and VIEW DOWNLOADS.
I know that edge provides settings options to disable the prompt on each download.
But is there any way on edge to start download but after downloading it does not show the second prompt asking what to do, using angular js or jquery?
The code for downloading file is as follows:
var fileName;
var a = document.createElement("a");
document.body.appendChild(a);
var type = headers('Content-Type');
var disposition = headers('Content-Disposition');
if (disposition) {
var match = disposition.match(/.*filename=\"?([^;\"]+)\"?.*/);
if (match[1])
fileName = match[1];
}
var blob = new Blob([data], {
type: type
}),
url = window.URL.createObjectURL(blob);
if (blob.size == 0) {
return;
}
a.href = url;
a.download = fileName;
var isIE = false || document.documentMode || /Edge/.test(navigator.userAgent); //if browser is IE and Edge
if (isIE) {
window.blur();
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
a.style = "display: none";
a.click();
window.URL.revokeObjectURL(url);
}
I want to open Play Store on ngOnInit.
I have tried every combination but host name is added automatically.
myComponent.ts
var url1 = 'market.android.com/details?id=com.test&referrer=' + sponser;
window.open(url1, '_blank') //try1
$.get(url1, function () { /!*callback*!/
}); //try2
const link = document.createElement('a');
link.target = '_top';
link.href = url;
link.setAttribute('visibility', 'hidden');
link.click();//try3
But none of them are working. Thanks in advance.