Develop Reference

How to display images returned by Cordova PhotoLibrary?

I seem to have trouble displaying images in the Image Gallery on Android. The PhotoLibrary plugin returns the list of files, but when I feed the image URLs to img tags, they don't load.
window['cordova']['plugins']['photoLibrary'].getLibrary(
result => console.log(libraryItem),
err => console.log(err);
},
{
thumbnailWidth: 512,
thumbnailHeight: 384,
quality: 0.8,
includeAlbumData: true
});
This will retrieve the URLs to the images, but they can't be used to actually display them. I get things like:
creationDate: Fri Nov 03 2017 20:06:01 GMT-0400 (EDT)
fileName: "2017-10-4-1.jpg"
height: 960
id: "1907;/storage/emulated/0/Pictures/Timelapser/2017-10-4-1.jpg"
latitude: 0
longitude: 0
photoURL: "cdvphotolibrary://photo?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg"
thumbnailURL: "cdvphotolibrary://thumbnail?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg&width=512&height=384&quality=0.8"
width: 1280
Feeding photoURL or thumbnailURL to img src doesn't work. I tried to decodeURI them, use the part before or after the ; and nothing.

You need to use Native Photo Library plugin and cdvphotolibrary pipe as shown below.
Here is working Git project
html
<ion-grid no-padding margin-top>
<ion-row class="row">
<ion-col col-6 *ngFor="let data of library">
<img [src]="data?.thumbnailURL | cdvPhotoLibrary">
</ion-col>
</ion-row>
</ion-grid>
ts
//fetch Photos
fetchPhotos() {
this.platform.ready().then(() => {
this.library = [];
this.photoLibrary.getLibrary({ thumbnailWidth: THUMBNAIL_WIDTH, thumbnailHeight: THUMBNAIL_HEIGHT }).subscribe({
next: (chunk) => {
this.library = this.library.concat(chunk);
this.cd.detectChanges();
},
error: (err: string) => {
if (err.startsWith('Permission')) {
this.platform.ready().then(() => {
this.photoLibrary.requestAuthorization({ read: true })
.then(() => {
}).catch((err) => {
let message = 'requestAuthorization error: ${err}';
this.showToast.showErrorToast(message);
});
});
} else { // Real error
let message: 'getLibrary error: ${err}';
this.showToast.showErrorToast(message);
}
},
complete: () => {
// Library completely loaded
}
});
});
}
cdv-photo-library.ts (pipe)
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({
name: 'cdvPhotoLibrary',
})
export class CdvPhotoLibraryPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(url: string) {
if (url != null) {
return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
}
}
}

unfortunately app has stopped - cordova - plugin - camera

I am trying to capture image from camera in my cordova application
<div onclick="getImage();">
<img width="60" height="60" id="img0" />
</div>
my getImage function
function getImage()
{
navigator.camera.getPicture(onCaptureTaskPhoto, onFail, {quality: 25,targetWidth: 512, destinationType: destinationType.FILE_URI, correctOrientation: true});
}
my onCaptureTaskPhoto function
function onCaptureTaskPhoto(fileURI)
{
var image1=document.getElementById('img0');
image1.src =fileURI;
image1.width="80";
image1.height="80";
}
Now sometimes i can able to capture the image and put it in src of img. And sometimes its showing exception. and the application will be unfortunately app has stopped.
Internal storage of phone is 400MB.
This is the exception i am getting
E/AndroidRuntime(13231): java.lang.RuntimeException:
Unable to resume activity {com.app/com.app.MainActivity}:
java.lang.RuntimeException: Failure delivering result ResultInfo{who=null,
request=34, result=-1, data=null} to activity
{com.app/com.app.MainActivity}:
java.lang.NullPointerException: Attempt to invoke virtual method
'java.lang.String android.net.Uri.toString()' on a null object reference

here is the complete process how to use camera in ionic...
first of all add camera plugin into your project:
cordova plugin add org.apache.cordova.camera
services.js Code
.factory('Camera', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
});
HTML Code
<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">
Controller Code
.controller('MyCtrl', function($scope, Camera) {
$scope.takePicture = function (options) {
var options = {
quality : 75,
targetWidth: 200,
targetHeight: 200,
sourceType: 1
};
Camera.getPicture(options).then(function(imageData) {
$scope.picture = imageData;;
}, function(err) {
console.log(err);
});
};
})

How to logout in the facebook with cordova ionic application?

i use this tutorial https://github.com/nraboy/ng-cordova-facebook-example but this example is not implemented the function of logout ,i add this code:
facebookExample.controller("LogoutController", function($scope, $http, $localStorage, $location) {
$scope.logout = function() {
$cordovaFacebook.logout();
}, function(error) {
alert("There was a problem signing in! See the console for logs");
console.log(error);
}
});
profile.html :
<ion-nav-buttons side="right">
<button class="button icon-left ion-log-out button-stable" ng-controller="LogoutController" ng-click="logout()">Logout</button>
</ion-nav-buttons>
but i found any result

Your code is invalid javascript... lots of parsing errors. also, you dont need another controller just for logout. The fact that a user is logged in is based upon an access token in localstorage, just wipe it and go to another state.. update your profile controller to this:
facebookExample.controller("ProfileController", function($scope, $http, $localStorage, $location) {
$scope.init = function() {
if($localStorage.hasOwnProperty("accessToken") === true) {
$http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: $localStorage.accessToken, fields: "id,name,gender,location,website,picture,relationship_status", format: "json" }}).then(function(result) {
$scope.profileData = result.data;
}, function(error) {
alert("There was a problem getting your profile. Check the logs for details.");
console.log(error);
});
} else {
alert("Not signed in");
$location.path("/login");
}
};
$scope.logout = function(){
delete $localStorage.accessToken;
$location.path("/login");
};
});
profile.html:
<ion-nav-buttons side="right">
<button class="button icon-left ion-log-out button-stable" ng-click="logout()">Logout</button>
</ion-nav-buttons>

OpenTok, How to switch publisher source from screen capturer to camera and vice versa?

I am trying to implement the feature that allows to switch between screen sharing capture and camera in the middle of the video session in an Android app. I use OpenTok SDK 2.5 for Android.
I have researched OpenTok examples (OpenTok samples) and figured they show only one feature per program sample.
Question: Should code supply two Publishers (one equipped with Camera and one with Screensharing capturer) and switch them, for example
session.unpublish();
if (currentIsCamera) {
session.publish(screenSharingPublisher);
}
else {
session.publish(cameraPublisher);
}
or better stick with single Publisher and flip between the BaseVideoCapturer and ScreensharingCapturer as I need?
mPublisher.setPublishVideo(false);
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
bvc.destroy();
}
//intent to start picture capture (Ex. ACTION_IMAGE_CAPTURE)
When you resume after taking the picture, you will need to initialize again
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
if(bvc.isCaptureStarted() == false){
bvc.init();
bvc.startCapture();
mPublisher.setPublishVideo(true);
}
}
This sample I took from the solution setPublishVideo(false) does not free the Camera
I suspect that unpublish/publish would break the session and that is not what I want.
P.S.Sorry for my English it is not my mother language.

On document Ready call the video publish method
var apiKey = '<APP_KEY>';
var sessionId = '<Session ID >';//Server Side Values
var token = '<Token >';//Server Side Values
var isModerator = <Yes/No>;//Handle it on server Side
var publisher;
var screenPublisher;
var streamMode = "camera";
session = OT.initSession(apiKey, sessionId);
publishVideo();
sessionEvents(publisher);
connectSession();
Html Code
<div id="subscribers" class="container-fluid show-controls">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div classs="live-stream">
<div class="caller-list">
<ul>
<li class="">
<div id="publisher" class="draggable user-camscreen">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="controls" id="">
<div>
<button id="btnShareScreen" data-screen="0" class="">
<img src="~/Content/img/Student/screenshare.svg" class="screenshare" />
</button>
<p class="mb-none mt-xs text-sm line-height-xs text-white">Screen</p>
</div>
</div>
On camera/screen switch button click call
/*
Switching between camera and screen
*/
$("#btnShareScreen").on("click", function () {
el = $(this);
if (el.data('screen') == 0) {
//Publish Screen
publishScreen();
connectSession();
el.data('screen', '1');
el.find('img').attr('src', '/Content/img/Student/video-icon.svg');
el.parent().find('p').html("Camera");
}
else {
publishVideo();
connectSession();
el.data('screen', '0');
el.find('img').attr('src', '/Content/img/Student/screenshare.svg');
el.parent().find('p').html("Screen");
}
});
All Methods
function publishVideo() {
console.log(screenPublisher);
if (screenPublisher != undefined) {
endStream(screenPublisher);
}
createPublisherDiv();
publisher = OT.initPublisher('publisher', function (error) {
if (error) {
// Look at error.message to see what went wrong.
} else {
session.publish(publisher, function (error) {
if (error) {
// Look error.message to see what went wrong.
} else {
streamMode = "camera";
}
});
}
});
}
function publishScreen() {
OT.checkScreenSharingCapability(function (response) {
if (!response.supported || response.extensionRegistered === false) {
// This browser does not support screen sharing.
$.alert({
title: 'Alert!',
content: 'Your Browser Does Not Support Screen Sharing',
});
} else if (response.extensionInstalled === false) {
// Prompt to install the extension.
} else {
//Screen sharing available
endStream(publisher);
createPublisherDiv();
const publish = Promise.all([
OT.getUserMedia({
videoSource: 'screen'
}),
OT.getUserMedia({
videoSource: null
})
]).then(([screenStream, micStream]) => {
return screenPublisher = OT.initPublisher('publisher', {
videoSource: screenStream.getVideoTracks()[0],
audioSource: micStream.getAudioTracks()[0],
fitMode: "contain"
});
});
publish.then(screenPublisher => {
session.publish(screenPublisher, function (error) {
if (error) {
// Look error.message to see what went wrong.
} else {
streamMode = "screen";
}
});
}).catch(handleError);
}
});
}
function endStream(streamPublisher) {
session.unpublish(streamPublisher, function () {
//Call back
});
}
function connectSession() {
session.connect(token, function (error) {
if (error) {
console.error('Failed to connect', error);
}
});
}
function sessionEvents(streamPublisher) {
session.on({
sessionConnected: function (event) {
// Publish the publisher we initialzed earlier (this will trigger 'streamCreated' on other
// clients)
session.publish(streamPublisher, function (error) {
if (error) {
console.error('Failed to publish', error);
} else {
console.log("Publish success");
}
});
},
// This function runs when another client publishes a stream (eg. session.publish())
streamCreated: function (event) {
// Create a container for a new Subscriber, assign it an id using the streamId, put it inside
// the element with id="subscribers"
console.log(event.stream);
var subOptions = {
width: '100%', height: '100%'
};
var subContainer = document.createElement('div');
subContainer.id = 'stream-' + event.stream.streamId;
document.getElementById('subscribers').appendChild(subContainer);
// Subscribe to the stream that caused this event, put it inside the container we just made
subscriber = session.subscribe(event.stream, subContainer, subOptions, function (error) {
if (error) {
console.error('Failed to subscribe', error);
}
});
}
});
}
/*
OpenTok Unpublish Methods removes publisher div.That's why dynamically creating div
*/
function createPublisherDiv() {
$('.caller-list').find('li').empty();
var html = '<div id="publisher" class="draggable user-camscreen"></div>';
$('.caller-list').find('li').append(html);
}
function handleError(err) {
if (err) console.log(err.message);
}

ionic/cordova camera for a newbie with angularJS

I am trying to use the camera. I've searched for an example or a guide but I couldn't find anything.
What I want to do is to simply open the camera on the push of a button, get a picture, and display the image - all using ionic and angular.

Here is what i did
index.html:
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header contentPadding">
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="takePicture()">
{{text.buttonTitle}}
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
</ion-content>
The controller:
$scope.takePicture = function(){
var cameraOptions = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
};
var success = function(data){
$scope.$apply(function () {
/*
remember to set the image ng-src in $apply,
i tried to set it from outside and it doesn't work.
*/
$scope.cameraPic = "data:image/jpeg;base64," + data;
});
};
var failure = function(message){
alert('Failed because: ' + message);
};
//call the cordova camera plugin to open the device's camera
navigator.camera.getPicture( success , failure , cameraOptions );
};

Perhaps this can help you: Ionic Cordova Example
Immediately available for Phonegap Build!

Thank you #AMG for posting a link to the Ionic Camera example project. I analyzed it and found that we need to inject Camera into the controller, like so:
.controller('MyCtrl', function($scope, Camera) {
Note that there is not a dollar sign before Camera. This really should be documented more explicitly.
Also, you need to add this factory:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])