Develop Reference

Esri proxy for Angular 7 project to screenshot

My team is currently working on a web application with angular 7 front end and .net core 2.1 back-end. One of tasks i need to do is to grab a screenshot and attach it to an email. The web application has an esri-map.
For the purposes of capturing the screenshot i am using html2canvas package. It works as expected except for the part that it doesn't capture the esri map content. It captures everything else except the esri-map.
For the html2canvas function call, i set the allowTaint property and useCORS property to true. I did some further research and i came across the proxy property for html2canvas. It made me think, that could be the reason why the map is not being generated. I cant seem to find any clear instructions on how to set up a proxy for arcgis. I was wondering if someone could help me with this.
any direction or help will be greatly appreciated.
following snippet is my html2canvas call.
html2canvas
html2canvas(document.getElementById('mapContainer'), { useCORS: true, logging: true, allowTaint: true }).then((canvas) => {
console.log("Document html2canvas");
console.log(document);
screenCapture = canvas.toDataURL();
]);
Update Jan 11 2018
I reached out to Esri regarding this and their response was , we dont support angular 7, we only support Javascript. I asked them , what if i use the print task instead of html2canvas .
This is my code snippet using print task. hope this might help someone.
This is a function i wrote in one of the services to capture the map. it seems to work fine. I don't know if there is any overhead of using the utility task url provided by arcgis or using your own server to render these screenshots. For some reason , it didn't work when i used the my servers print task utility URL.
note : in the below code snippet =&gt is the arrow function =>
screenCapture(): Promise<any> {
return new Promise((resolve, reject) => {
loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters']).then(([PrintTask, PrintTemplate, PrintParameters]) => {
try {
var printTask = new PrintTask({
url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task/',
updateDelay: '3000'
});
var template = new PrintTemplate({
layout: "map_only",
exportOptions: {
dpi: 96,
width: 1871,
height: 800
},
});
var params = new PrintParameters({
view: this.mapView,
template: template
});
printTask.execute(params).then(res => { console.log(res); resolve(res); });
}
catch (error) {
console.log(error);
reject(error);
}
});
});
} // end ofScreenCapture

You could try this library: https://github.com/WSDOT-GIS/arcgis-map-thumbnail-builder
I am not sure it is fully compatible with latest ArcGIS Javascript API but you probably can study the code sources to make it works with the version you are using.

Cordova camera saves to gallery even on false

I'm in a really nasty situation...
My client wants a Cordova application in Ionic Framework v1, and it's imperative that the camera does not save images to gallery. However, when I set the parameter for saving to gallery to false, it is still saving to gallery.
The problem occurs on Android when you take a photo and cancel it. It then saves that picture to gallery and sometimes even saves all other pictures after that.
I would really welcome any kind of help; All I've found so far are some solutions that I find really hard to understand since my knowledge of Java is zero.
Here is my JS code
function capturePhoto() {
var maxDimension = 1280;
var options = {
quality: 80,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
correctOrientation: true,
targetWidth: maxDimension,
targetHeight: maxDimension,
saveToPhotoAlbum: false
};
This is for camera options.
$cordovaCamera.getPicture(options).then(function (imageData) {
var src = "data:image/jpeg;base64," + imageData;
$scope.photoPreviewSrc = src;
}).catch(function (err) {
});
}

I have checked with your code using cordova. It works fine as expected.
Verify your app in other device once.
I haven't checked it on ionic platform.

You may want to try running something like the following after you receive the image data:
navigator.camera.cleanup(onSuccess, onFail);
function onSuccess() {
console.log("Camera cleanup success.")
}
function onFail(message) {
alert('Failed because: ' + message);
}
From the docs: "camera.cleanup() Removes intermediate image files that are kept in temporary storage after calling camera.getPicture. Applies only when the value of Camera.sourceType equals Camera.PictureSourceType.CAMERA and the Camera.destinationType equals Camera.DestinationType.FILE_URI."
The above relates directly to your use case.

Is it really going to the photo gallery, or just showing up in Android's photo app? The Android default photo browser will show all photos, screenshots, etc. It will also even show just random images - that other Apps may have on the file system, but that aren't photos.
Since in cordova, you don't have great control of the OS, you can use a work around: You can place the images in a hidden directory (starting with a . such .appdata) and this will prevent Android from automatically seeing the images from the "Gallery" app. I had this problem in an Ionic App and solved it that way.

Save canvas image on local mobile storage for IOS/Android

Im using the fabric javascript library to create a custom image. All the data is saved in a canvas and is shown using canvas tag. After displaying the image, I would like to give the user the option to save it locally. Anyone has any idea how to do that? The solution should work for IOs and Android, I've tried several alternatives but still no luck.
[Update 1]
I tried using the Canvas2ImagePlugin but for some reason my app restarts when running the window.canvas2ImagePlugin.saveImageDataToLibrary command.
My code (I want to save the image when the users touches the saveButton):
$(document).on('click', '#saveButton', function(e){
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('c')
);
});
This is shown in the browser logs after the app restarts:
deviceready has not fired after 5 seconds. (13:09:28:529)
at file:///android_asset/www/cordova.js:1169
Channel not fired: onPluginsReady (13:09:28:542)
at file:///android_asset/www/cordova.js:1162
Channel not fired: onCordovaReady (13:09:28:550)
at file:///android_asset/www/cordova.js:1162
Channel not fired: onDOMContentLoaded (13:09:28:557)
at file:///android_asset/www/cordova.js:1162
I also noticed that when Netbeans builds my app, for some reason it deletes the plugin. This is part of the build output:
update-plugins:
cordova.cmd plugins
cordova.cmd -d plugin remove org.devgeeks.Canvas2ImagePlugin
Calling plugman.uninstall on plugin "org.devgeeks.Canvas2ImagePlugin" for platform "android"
Uninstalling org.devgeeks.Canvas2ImagePlugin from android
[Update 2]
After some research I found out that I had to add the plugin manually in the file \nbproject\plugin.properties. Now its working perfectly. Thank you AtanuCSE

try this plugin
Canvas2ImagePlugin
<canvas id="myCanvas" width="165px" height="145px"></canvas>
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
}

With Canvas2ImagePlugin now u can choose either to save as jpg/png, set quality and set outputfolder
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg); //msg is the filename path (for android and iOS)
},
function(err){
console.log(err);
},
document.getElementById('myCanvas'),
'.jpg', // save as jpg
80, // image quality
'cunvaspluginfolder' //folder name
);
}
Credit to wbt11a because make this plugin more configurable from original author.
Please download the new plugin here Github source

Getting CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED when opening video file with VIDEO.js -

The error only happens when i try to view the website(video) over the internet.
Everything works perfectly when i am running locally in visual studio and it also works perfectly when i remote desktop into the production webserver where i published the site to and browse to the site locally there.
If i had to guess it seems like something is timing out when it goes over the internet or maybe there is something on our firewall preventing the movie from streaming to me from the production webserver. I doubt the firewall is the issue because i can view other videos streamed with video.js from other sources.
My developertools console window shows this (I tried to post a screenshot but i didnt have enough rep points):
GET http://166.62.34.149/Videos/Walgreens_8700SKedzieAve.m4v net::ERR_CONNECTION_ABORTEDvideo.js:118 s.loadvideo.js:65 Tvideo.js:75 s.loadVideo.aspx?VideoName=Walgreens_8700SKedzieAve.m4v:59 (anonymous function)video.js:36 s.Hvideo.js:28 t.a.t.ua.extend.ivideo.js:6 dvideo.js:57 t.Player.t.a.extend.ivideo.js:6 dvideo.js:2 tVideo.aspx?VideoName=Walgreens_8700SKedzieAve.m4v:57 (anonymous function)
here is my code:
<script type="text/javascript">
var videoName;
//videojs.autoSetup();
videoName = document.getElementById('lblVideoName').innerHTML;
videojs('my_video_1', {}, function(){
this.src({ type: "video/mp4", src: "/Videos/" + videoName });
this.load();
this.play();
});
videojs('my_video_1').ready(function () {
// Store the video object
var myPlayer = this, id = myPlayer.id();
var aspectRatio = 478 / 850;
function resizeVideoJS() {
var width = document.getElementById(id).parentElement.offsetWidth;
myPlayer.width(width).height(width * aspectRatio);
}
resizeVideoJS();
window.onresize = resizeVideoJS;
});
function PausePlayer() {
var myPlayer = videojs('my_video_1');
myPlayer.pause();
};
</script>
I have set my IIS mime type, so that isnt the issue. Any help you have provide would be greatly appreciated.
Thanks everyone!

I know this is an old oner but just to let you know that I came across this with our website and after digging deep into mime types, changing sources, removing cache and so on, a simple options --> advanced --> "Reset" made everything work fine.
This will obviously only be the case if you can test it working on other PC's somewhere else to confirm all the mime types and video work in the first place.
Hope this is of help to someone in the future as it was the top Google result for me.
Regards
Liam

AngularJS + HTML5 record audio file

I'm looking for a simple solution to record audio file and upload it to s3.
My web searches come up to find:
WebRTC-Experiment which is the most popuplar solution i could find.
it also have a working example in the following link : https://www.webrtc-experiment.com/RecordRTC/
I also found ngCamRecorder which wasn't supported by firefox yet.
I'm looking for a simple solution + working example, and suggestion.
Which solution is most popuplar to use with AngularJS?
if you can provide your own example or link to a working example that i can use.
if you also used S3 i would like to know how you can push the file to S3, and get the link to the controller.
The solution i found, throw error, and include a working example without the code itself explained.
I also would like to know how to push it to s3.
This is the code i implemented from the example:
$scope.start_recording = function()
{
navigator.getUserMedia(session, function (mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
}, function(error){console.log(error)});
};
$scope.stop_recording = function()
{
navigator.getUserMedia({audio: true}, function(mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
});
};
It simply throw an error: undefined is not a function on recordrtc.js line 641
if(!mediaStream.getAudioTracks().length) throw 'Your stream has no audio tracks.';
obviously mediaStrem is null.
Thanks.

There's an AngularJS wrapper for this, it's a simple directive that supports HTML5 (RecorderJS), Cordova Media and Flash.
Usage is straightforward
<ng-audio-recorder audio-model="someModel" auto-start="false">
<!-- controls -->
<button ng-click='recorder.startRecording()'>Start</button>
<button ng-click='recorder.stopRecording()'>Stop</button>
</ng-audio-recorder>
You can see the full usage here:
https://github.com/logbon72/angular-recorder

I got the same issue and figured it out. The function argument in the success function of navigation.getUserMedia() is supposed to be "MediaStream" instead of "mediaStream".