Develop Reference

How to manage Activex events in JS without Object tag

Hi im developing activex control to manage webcam in IE, everything works but i need to refresh the image when a new frame is captures, up to now i display images on click, but i want to listen "Captured frame event" in JS to refresh my html view.
I have seen a lot of samples but all of these are using Object tag in html
<object id="Control" classid="CLSID:id"/>
<script for="Control" event="myEvent()">
alert("hello");
</script>
is there a way to listen activex events using pure JS? using :
Ob = new ActivexObject('PROG.ID');

No, it's not working in purly JavaScript you can only use JScript.
JScript only works in Internet Explorer and there it only works, if the user confirms to execute the scripts, ussualy you use it in an .hta Hyper Text (Markup Language) Application
Example:
<script language="JScript">
"use strict";
function openFile(strFileName) {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(strFileName, 1);
if (f.AtEndOfStream) {
return;
}
var file = f.ReadAll();
f.close();
return file;
}
function writeFile(filename, content) {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(filename, 2, true);
f.Write(content);
f.Close();
}
</script>
<script language="javascript">
"use strict";
var native_db;
function init() {
var file = openFile("./Natives.json");
native_db = JSON.parse(file);
displayNamespaces();
};
I also would have as alternate an example how it works in modern Browsers, if it helps you out there:
<video id="webcam"></video>
<input type="button" value="activate webcam" onclick="test()">
<script>
function test() {
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => { // get access to webcam
const videoElement = document.getElementById('webcam');
videoElement.srcObject = stream; // set our stream, to the video element
videoElement.play();
// This creates a Screenshot on click, as you mentioned
videoElement.addEventListener('click', function(event) {
const canvas = document.createElement('canvas');
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight);
// you could just do this, to display the canvas:
// document.body.appendChild(canvas);
canvas.toBlob(function (blob) { // we automatlicly download the screenshot
const a = document.createElement('a');
a.href = URL.createObjectURL(blob); // creates a Datastream Handle Link in your Browser
a.download = 'screenshot.png'; // the name we have to define here now, since it will not use the url name
document.body.appendChild(a); // some Browsers don't like operating with Events of Objects which aren't on DOM
setTimeout(function() { // so we timeout a ms
a.click(); // trigger the download
URL.revokeObjectURL(a.href); // release the Handle
document.body.removeChild(a); // remove the element again
}, 1);
});
});
}).catch(console.error);
}
</script>

I ended up using timer, when i click enable button in the view i call the method startRecord, in this method i read Activex value every 70 ms, I would rather not use timer but it works.
private async startRecord() {
while (this.banCapturing) {
await new Promise(res => setTimeout(res, 70)); //14 ~ 15 fps
this.foto = this.Ob.imageBase64; //Read Activex Value, DLL is updating imageBase64 on camera event.
}
}

How to get video size/format/access from gdrive shareable link

There is this feature in my app where user can add videos using gdrive shareable link. I uploaded the video in gdrive and then created a shareable link. Pasted that link in the upload form and then video gets added. I need to validate 3 things -
format must be mp4
file access is provided or not
file size is more than 25mb
Following is my code -
var link = videoUrl;
if (link.indexOf('drive') != -1) {
var gdrive = link.replace('/view?usp=sharing', '').replace('open?id=', 'uc?export=download&id=').replace('file/d/', 'uc?export=download&id=').replace('/edit?usp=sharing', '');
videoUrl = gdrive;
}
var videoelement = createVideoElement(videoUrl);
createVideoElement = function(url) {
var element = document.createElement('video');
element.src = url;
element.width = '400';
element.height = '200';
element.controls = true;
element.autoplay = 'autoplay';
return element;
};
Sample Video Shareable which I am trying to add - https://drive.google.com/open?id=0B31psA0C98iFNl9ScWRESTBxalk
I have worked with fileupload earlier and I am familiar how to validate the uploaded file size. But here, since it is gdrive link couldn't an idea how to implement it.

You can check the video size by looking at the video metadata - you don't need to download the full video for this:
var video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function() {
alert("metadata loaded")
var duration = video.duration;
alert("duration is " + duration)
}

how to save a picture taken with window.getusermedia in js

Currently i am working on a open webapp camera, right now i have implemented the camera setup(live stream as viewport, take picture button, capture, display taken picture in corner... etc) but now i am running into the issue of how to save that picture for the user to their device or computer, this app is currently being designed for mobile b2g primarily. I know most people are gonna tell me security issues!!! i dont mean tell the device exactly where to put it. I mean something like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function () {
var img = document.getElementById('embedImage');
var button = document.getElementById('saveImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
img.onload = function () {
button.removeAttribute('disabled');
};
button.onclick = function () {
window.location.href = img.src.replace('image/png', 'image/octet-stream');
};
};
</script>
</head>
<body>
<img id="embedImage" alt="Red dot"/>
<input id="saveImage" type="button" value="save image" disabled="disabled"/>
</body>
</html>
that specific code executed on mobile triggers the file to automatically be saved on click of the button. now what i want to do is use that to take my picture from its var its in and save it as that file, for example that will be in downloads folder.
this is what my code is currently https://github.com/1Jamie/1Jamie.github.io
any help would be appreciated and this is the current running implementation if you want to take a working look http://1Jamie.github.io

This worked for me when I was playing around with getUserMedia - I did notice that you did not have the name of the method in the proper case and it is a method of the navigator.mediaDevices interface - not a method of the window directly...
References:
[Navigator for mozilla]https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Navigator
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices
[mediaDevices for chrome and android]https://developers.google.com/web/updates/2015/10/media-devices?hl=en
var video = document.getElementById('monitor');
var canvas1 = document.getElementById('photo1');
var img1 = document.getElementById('canvasImg');
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function () {
canvas1.width = video.videoWidth;
canvas1.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}).catch(function (reason) {
document.getElementById('errorMessage').textContent = 'No camera available.';
});
function snapshot1() {
canvas1.getContext('2d').drawImage(video, 0, 0);
}
"save_snap" is the id of a button - Disclaimer I am using jQuery- but you should easily see where this corresponds to your code:
$("#save_snap").click(function (event){
// save canvas image as data url (png format by default)
var dataURL = canvas2.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
$('#canvasImg').attr("src" , dataURL);
$('#downloader').attr("download" , "download.png");
$('#downloader').attr("href" , dataURL);
//* trying to force download - jQuery trigger does not apply
//Use CustomEvent Vanilla js: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
// In particular
var event1 = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
//NOW we are effectively clicking the element with the href attribute:
//Could use jQuery selector but then we would have to unwrap it
// to expose it to the native js function...
document.getElementById('downloader').dispatchEvent(event1);
});

Saving camanjs image after adding new layer

I am trying to download a canvas (with canvas.toBlob()) created with camanjs after it applies a new layer. I can only get it to download the image without the applied layer. I can right click and "save as..." to get the correct image but the downloaded file is incorrect.
Caman("#myImage", function() {
var canvas = document.getElementById('myImage');
var context = canvas.getContext('2d');
this.newLayer(function() {
var imageObj = new Image();
imageObj.src = "some_image.png";
imageObj.onload = function() {
context.drawImage(imageObj);
};
});
this.render(function() {
saveCanvas();
});
});

Try the below code snippet which converts the canvas image with multiple layers to base64 and save as JPEG. If you want to save in some other format like "png" then just
give "download.download = 'image.png'" in the below code
saveCanvas(){
var download = document.createElement('a');//Create <a> tag
download.href = document.getElementById('myImage').toDataURL(); //convert canvas image with multiple layers to base64
download.download = 'image.jpeg'; // Mention the file name and format to be downloaded
download.click();// Trigger click event to downkload the image
}

Dragging local image in webpage crashes Chrome

I'm working on a page where users can view/upload local files. Once the file has been selected, I'm displaying the image in the page. I've come across an issue that dragging such an image crashes my browser window (Chrome).
Here's a jsfiddle.
Simple html:
<input type='file'>
<img>
Javascript (jQuery):
$('input').change(function(){
var file = $('input').get(0).files;
var fileReader=new FileReader();
fileReader.onload = function(e){
$('img').attr('src',e.target.result);
};
fileReader.readAsDataURL(file[0]);
});
Poking around a bit more, it seems this is only a problem with large image files (such as uncompressed photos from an iPhone). This isn't necessarily a deal-breaker for the page but it is certainly annoying to accidentally drag an image and instantly crash the page.
Is there any good way to fix this?

I solved using Blob :
if (file !== undefined && window.FileReader !== undefined) {
var reader = new FileReader();
var self = this;
reader.onload = function(e) {
if (window.Blob) {
var blob = new Blob([e.target.result]);
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob);
self.setSrc({"tempUrl" : blobURL}); //using backbone this refers to a model
}
};
reader.readAsArrayBuffer(file);
} else {
if (!file)
console.error("No file prevented");
if (!window.FileReader)
console.error("Your browser is not supported");
}
As I could see, readAsDataURL kills the memory.