How to use ImagePicker to select image and display in Ionic Native - ionic-framework

I'm developing an Ionic app, and one task is to select a profile via camera or gallery, and I use Ionic Native ImagePicker to select picture and crop, it can select and crop, but not display in front html page, my code is as below:
openImagePickerCrop(){
this.imagePicker.hasReadPermission().then(
(result) => {
if(result == false){
// no callbacks required as this opens a popup which returns async
this.imagePicker.requestReadPermission();
}
else if(result == true){
this.imagePicker.getPictures({
maximumImagesCount: 3
}).then(
(results) => {
for (var i = 0; i < results.length; i++) {
this.crop.crop(results[i], {quality: 100}).then(
newImage => {
this.imgResponse.push('data:image/jpeg;base64,' + newImage);
console.log("Image selected - " + newImage);
},
error => console.error("Error cropping image", error)
);
}
}, (err) => console.log(err)
);
}
}, (err) => {
console.log(err);
});
}
And this is my html code:
<ion-item class="input-item">
<ion-label position="floating">Photo</ion-label>
<div class='images' *ngFor="let img of imgResponse">
<img src="{{img}}" alt="" srcset="" />
</div>
<ion-card-content>
<ion-button color="medium" size="large" (click)="openImagePickerCrop()">
<ion-icon slot="icon-only" name="camera"></ion-icon>
</ion-button>
</ion-card-content>
</ion-item>
Where am I doing wrong, pls help.
Update:
To check if it's due to the crop function, I have updated functions as below:
openImagePicker(){
this.imagePicker.hasReadPermission().then(
(result) => {
if(result == false){
// no callbacks required as this opens a popup which returns async
this.imagePicker.requestReadPermission();
}
else if(result == true){
this.imagePicker.getPictures({
maximumImagesCount: 1
}).then(
(results) => {
for (var i = 0; i < results.length; i++) {
this.imgResponse.push('data:image/jpeg;base64,' + results[i]);
console.log("Image selected - " + results[i]);
}
}, (err) => console.log(err)
);
}
}, (err) => {
console.log(err);
});
}
But still not working, and the console doesn't capture anything.

Related

How to convert axios API call to vuex action dispatch?

I'm new with Vue3JS and I am developing a todo list built from several components like that :
I need to retrieve data to display all tasks, TaskInfo component is used to display informations.
I try to convert my local component TaskInfo works well with API call (method async loadTask()) into Vuex store action/mutation, but I didn't quite understand how to process in my case, because in component TaskInfo data are always the same.
I try to load data from current taskId with :
mounted() {
this.loadTask(this.taskId);
},
But, only last item loaded, with id 26, display data loaded by getTaskinfo computed variable loaded this.$store.state.taskInfo.
Any suggestion to load component data correctly when is mouted ?
TaskInfo.vue
<template>
<div class="task-container mb-4 ml-2 rounded-lg flex flex-grow flex-col flex-nowrap items-left shadow-test border border-solid border-gray-dark">
<div class="task--labels flex p-4 border-1 border-solid border-b border-gray-dark">
<span class="font-light p-2 text-xs bg-gray-dark rounded-lg m-2"> </span>
<span class="font-light p-2 text-xs bg-gray-dark rounded-lg m-2">label 2</span>
<div class="font-bold absolute right-1">
<button
v-if="this.taskId"
#click="this.$store.dispatch('removeTask', this.taskId)" >
<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="removeIconTitle" stroke="#EF5350" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000">
<title id="removeIconTitle">Remove</title>
<path d="M17,12 L7,12"/>
<circle cx="12" cy="12" r="10"/>
</svg>
</button>
</div>
</div>
<div
class="task--title p-4 title text-m font-normal"
:class="[ getTaskinfo.finish === true ? 'finished' : '' ]"
>
{{ getTaskinfo.title }}
</div>
<div class="task-time p-4 text-xs text text-gray1 flex items-center">
<span class="pt-1"></span>
<span class="ml-1">11h - 12h</span>
</div>
</div>
</template>
<script>
import axios from 'axios';
import { mapActions } from 'vuex'
axios.defaults.baseURL = 'http://localhost:3000';
export default {
name: 'taskInfo',
props: ['taskId'],
data() {
return {
error: '',
taskinfo: []
};
},
mounted() {
this.loadTask(this.taskId);
},
methods: {
...mapActions([
'loadTask' // map `this.incrementBy(this.taskId)` to `this.$store.dispatch('loadTask', this.taskId);`
]),
// Old API call replaced by mapActions, it's works fine.
async loadTask() {
try {
if(!this.taskId) return;
const taskInfo = await axios.get(`/task/${this.taskId}`);
if (!taskInfo.data) {
console.log('no taskInfo');
}
else {
this.taskinfo = taskInfo.data;
}
} catch (error) {
console.log('no taskInfo error');
}
},
},
computed: {
getTaskinfo() {
return this.$store.state.taskInfo;
},
}
}
</script>
Store
import { createStore } from 'vuex'
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default createStore( {
state: {
taskInfo: [],
error: '',
},
// Mutations have to be synchronous.
mutations: {
loadTask(state, taskInfo) {
state.taskInfo = taskInfo;
},
updateError(state, error) {
state.error = error;
},
},
actions: {
setError({ commit }, error) {
commit('updateError', error);
},
// LOAD task info.
async loadTask({ commit }, taskId) {
try {
if(!taskId) commit('updateError', 'taskId empty');
const taskInfo = await axios.get(`/task/${taskId}`);
if (!taskInfo.data) {
commit('updateError','Aucune info sur la tache');
// Set an empty task list.
commit('loadTask', []);
}
else {
console.log('task : ' + taskId);
commit('loadTask', taskInfo.data);
}
} catch (error) {
commit('updateError', error);
}
},
},
});

Mute/UnMute Remote Attendee in Amazon Chime Sdk

How we can build Mute/UmMute Remote Attendee in Amazon Chime Sdk with the help of
(https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html#9-send-and-receive-data-messages-optional ) web sockets to broadcast a message in a meeting.
Currently, there is no option to mute/unmute Remote Attendee in Amazon Chime SDK
But yes we can use real-time messaging for that
Add `realtimeSubscribeToReceiveDataMessage` on attndeeId so when the user joins meeting then it will get the message on this channel.
like mentioned in the below code snip
import { Button } from 'react-bootstrap';
import React, { useContext, useEffect, useState } from 'react';
import getChimeContext from '../context/getChimeContext';
import useRoster from '../hooks/useRoster';
export default function RosterCompoment(props) {
const { realTimeRequestAttendees, leaveMeeting } = props;
const chime = useContext(getChimeContext());
const roster = useRoster();
const [videoAttendees, setVideoAttendees] = useState(new Set());
const [isVideo, setIsVideo] = useState(false);
const realtimeSubscribeToReceiveDataMessage = async () => {
chime.audioVideo &&
(await chime.audioVideo.realtimeSubscribeToReceiveDataMessage(chime.attendeeId, async (data) => {
const receivedData = (data && data.json()) || {};
const { type, name } = receivedData || {};
if ((type === 'UNMUTE' || type === 'VIDEO-ENABLE')) {
return;
}
if (type === 'UNMUTE') {
chime.audioVideo && (await chime.audioVideo.realtimeUnmuteLocalAudio());
} else if (type === 'MUTE') {
chime.audioVideo && (await chime.audioVideo.realtimeMuteLocalAudio());
} else if (type === 'KICK') {
await new Promise((resolve) => setTimeout(resolve, 200));
await chime.chooseVideoInputDevice(null);
chime.audioVideo && (await chime.audioVideo.stopContentShare());
chime.audioVideo && (await chime.audioVideo.stop());
if (leaveMeeting) leaveMeeting(); // You can call leave meeting function here to kick any user
} else if (type === 'VIDEO-DISABLE') {
chime.audioVideo && (await chime.audioVideo.stopLocalVideoTile());
} else if (type === 'VIDEO-ENABLE') {
await chime.chooseVideoInputDevice(chime.currentVideoInputDevice);
chime.audioVideo && (await chime.audioVideo.startLocalVideoTile());
}
}));
};
useEffect(() => {
realtimeSubscribeToReceiveDataMessage();
const tileIds = {};
const realTimeVideoAttendees = new Set();
const removeTileId = (tileId) => {
const removedAttendeeId = tileIds[tileId];
delete tileIds[tileId];
realTimeVideoAttendees.delete(removedAttendeeId);
setVideoAttendees(new Set(realTimeVideoAttendees));
};
chime.audioVideo &&
chime.audioVideo.addObserver({
videoTileDidUpdate: (tileState) => {
if (!tileState.boundAttendeeId || tileState.isContent || !tileState.tileId) {
return;
}
if (tileState.active) {
tileIds[tileState.tileId] = tileState.boundAttendeeId;
realTimeVideoAttendees.add(tileState.boundAttendeeId);
setVideoAttendees(new Set(realTimeVideoAttendees));
} else {
removeTileId(tileState.tileId);
}
},
videoTileWasRemoved: (tileId) => {
removeTileId(tileId);
},
});
}, []);
let attendeeIds;
if (chime.meetingSession && roster) {
attendeeIds = Object.keys(roster).filter((attendeeId) => !!roster[attendeeId].name);
}
return (
<div>
<div className="roster">
{attendeeIds &&
attendeeIds.map((attendeeId) => {
const rosterAttendee = roster[attendeeId];
return (
<div key={attendeeId} className="attendee">
<div className="name">{rosterAttendee.name}</div>
{ realTimeRequestAttendees && realTimeRequestAttendees.has(attendeeId) && (
<div className="">
<a
className="cursor"
onClick={() => {
realTimeRequestAttendees.delete(attendeeId);
chime.sendMessage(attendeeId, {
type: 'ADMIT',
});
}}
>
Answer
</a>
</div>
)}
<a
className="cursor"
onClick={() => {
chime.sendMessage(attendeeId, {
type: 'KICK',
});
}}
>
Remove
</a>
{videoAttendees && (
<div className="video">
<a
className="cursor"
onClick={() => {
chime.sendMessage(attendeeId, {
type: videoAttendees.has(attendeeId) ? 'VIDEO-DISABLE' : 'VIDEO-ENABLE',
});
}
}}
>
{videoAttendees.has(attendeeId) ? (
<i className="fa fa-video-camera" />
) : (
<i className="camera-icon-muted" />
)}
</a>
</div>
)}
{typeof rosterAttendee.muted === 'boolean' && (
<div className="muted">
<a
className="cursor"
onClick={() => {
chime.sendMessage(attendeeId, {
type: rosterAttendee.muted ? 'UNMUTE' : 'MUTE',
});
}}
>
{rosterAttendee.muted ? (
<i className="fa fa-microphone-slash" />
) : (
<i
className={cx(
'fa fa-microphone',
{ 'active-speaker': rosterAttendee.active },
{
'weak-signal': rosterAttendee.signalStrength && rosterAttendee.signalStrength < 50,
},
)}
/>
)}
</a>
</div>
)}
</div>
);
})}
</div>
</div>
);
}
Here is the method to send messages to remote attendees through his/her attndeeId.
sendMessage = (topic, data) => {
new AsyncScheduler().start(() => {
const payload = {
...data,
attendeeId: this.attendeeId || '',
name: this.rosterName || '',
};
this.audioVideo &&
this.audioVideo.realtimeSendDataMessage(topic, payload, ChimeSdkWrapper.DATA_MESSAGE_LIFETIME_MS);
this.publishMessageUpdate(
new DataMessage(
Date.now(),
topic,
new TextEncoder().encode(payload),
this.meetingSession.configuration.credentials.attendeeId || '',
this.meetingSession.configuration.credentials.externalUserId || '',
),
);
});
};```

Not closing camera in zxing

In the Zxing library, I want to close the camera when the user clicks cancel. So I used a button and add onclick event to it. it is calling resetReader method. I called this method after gets a barcode value or in the cancel button onclick event.If it is getting barcode values, this resetReader method works perfectly. if we cancel, the camera doesn't stop. Am I missing something?
const codeReader = new BrowserMultiFormatReader(hints);
const resetReader = () => {
codeReader.reset();
codeReader.stopContinuousDecode();
};
for those who haven't figured it out yet? I have found a solution to this problem. Harendrra's solution didn't work for me, but this one did in combination with usestate. For my project the code uses Bootstrap. So when I click on a button the Modal appears. The camera loads. When I click on the Close button the camera disappears. Hope this is a solutions for everyone, enjoy ;-)
export default function Example(props) {
// codeReader
const [codeReader, setReader] = useState(new BrowserMultiFormatReader());
const [videoInputDevices, setVideoInputDevices] = useState([]);
const [selectedVideoDevice, selectVideoDevice] = useState('');
useEffect(() => {
(async () => {
const videoInputDeviceList = await codeReader.listVideoInputDevices();
setVideoInputDevices(videoInputDeviceList);
if (videoInputDeviceList.length > 0 && selectedVideoDevice == null) {
selectVideoDevice(videoInputDeviceList[0].deviceId);
}
})();
}, [codeReader, selectedVideoDevice]);
const handleShow = () => {
setBrand('');
// Open modal.
setShow(true);
codeReader.decodeFromVideoDevice(selectedVideoDevice, 'videoElement', (res) => {
setCanClose(true);
if (res) {
const rawText = res.getText();
axios
.get(`https://world.openfoodfacts.org/api/v0/product/${rawText}.json`)
.then((result) => {
// set data
setBrand(result.data.product.brands);
// close modal
setShow(false);
// codeReader reset
codeReader.reset();
})
.catch((err) => console.log('error', err));
}
});
};
const handleClose = () => {
// codeReader reset.
setReader(codeReader.reset());
// Close modal
setShow(false);
// Set new codeReader.
// The solution for the error messages after the codeReader reset.
// This will build the codeReader for the next time.
setReader(new BrowserMultiFormatReader(hints));
};
return (
<Fragment>
<div className='py-2'>
<div>Brand: {brand}</div>
<Button variant='primary' onClick={handleShow}>
Launch static backdrop modal
</Button>
<Modal show={show} onHide={handleClose} backdrop='static' keyboard={false} centered id='scanProductModal'>
<Modal.Body>
<div
onChange={(event) => {
const deviceId = event.target.value;
selectVideoDevice(deviceId);
}}
>
<div className='button-group-top'>
<select className='form-select form-select-sm' aria-label='Default select example'>
{videoInputDevices &&
videoInputDevices.map((inputDevice, index) => {
return (
<option value={inputDevice.deviceId} key={index}>
{inputDevice.label || inputDevice.deviceId}
</option>
);
})}
</select>
</div>
<video id='videoElement' width='600' height='400' />
<Button className='btn btn-danger' onClick={handleClose}>
Close
</Button>
</div>
</Modal.Body>
</Modal>
</Fragment>
);
}
Yes, I resolved. You have to create codeReader object at the top of the Class. Try this code.
import "../App.css";
import { BrowserBarcodeReader } from "#zxing/library";
class Barcode extends React.Component {
codeReader = new BrowserBarcodeReader();
constructor(props) {
super(props);
this.state = { reader: {}, selectedDevice: "" };
this.startButton = this.startButton.bind(this);
this.resetButton = this.resetButton.bind(this);
this.getBarcode = this.getBarcode.bind(this);
}
componentDidMount() {
this.getBarcode();
}
startButton() {
console.log("start", this.codeReader);
this.codeReader
.decodeOnceFromVideoDevice(this.state.selectedDevice, "video")
.then(result => {
document.getElementById("result").textContent = result.text;
})
.catch(err => {
console.error(err.toString());
document.getElementById("result").textContent = err;
});
console.log(
`Started continous decode from camera with id ${this.state.selectedDevice}`
);
}
resetButton() {
this.codeReader && this.codeReader.reset();
document.getElementById("result").textContent = "";
}
getBarcode() {
let selectedDeviceId;
return this.codeReader.getVideoInputDevices().then(videoInputDevices => {
const sourceSelect = document.getElementById("sourceSelect");
selectedDeviceId = videoInputDevices[0].deviceId;
if (videoInputDevices.length > 1) {
videoInputDevices.forEach(element => {
const sourceOption = document.createElement("option");
sourceOption.text = element.label;
sourceOption.value = element.deviceId;
sourceSelect.appendChild(sourceOption);
});
sourceSelect.onchange = () => {
selectedDeviceId = sourceSelect.value;
};
const sourceSelectPanel = document.getElementById(
"sourceSelectPanel"
);
sourceSelectPanel.style.display = "block";
}
this.setState({
selectedDevice: selectedDeviceId
});
})
.catch(err => {
alert(err);
});
}
render() {
return (
<div>
<h2>Barcode</h2>
{Object.keys(this.codeReader).length > 0 && (
<div>
<div>
<button
className="button"
id="startButton"
onClick={this.startButton}
>
Start
</button>
<button
className="button"
id="resetButton"
onClick={this.resetButton}
>
Reset
</button>
</div>
<div>
<video
id="video"
width="600"
height="400"
style={{ border: "1px solid gray" }}
></video>
</div>
<label>Result:</label>
<pre>
<code id="result"></code>
</pre>
</div>
)}
</div>
);
}
}
export default Barcode; ```

Need to catch clicked image as base64 in Ionic 4

Trying on a web page. I am using PWA, Ionic 4 and Android.
In my home.html I have added a button
<!-- Trigger the file input -->
<ion-button expand="full" (click)="captureImage()">
<ion-icon slot="start" name="camera"></ion-icon>
Capture Image
</ion-button>
on my home.ts I have this code below:
captureImage() {
this.fileinput.nativeElement.click();
}
On clicking the button, it open the option to select camera app, now when I select the camera app, it allows me to click image. After clicking it takes me back to screen. Here I want to fetch the image as base64.
How do I do that?
You can get the files from :
this.fileinput.nativeElement.files;
For converting the files after selection, use FileReader.readAsDataUrl().
You can find the full code for the same here:
https://forum.ionicframework.com/t/ionic-4-pwa-camera/151148/12
To store file:
Call this before uploading:
upload()
{
const fileList: FileList = this. fileinput.nativeElement.files;
if (fileList && fileList.length > 0)
{
this.firstFileToBase64(fileList[0]).then((result: string) =>
{
this.base64File = result;
}, (err: any) => {
// Ignore error, do nothing
this.base64File = null;
});
}
}
private firstFileToBase64(fileImage: File): Promise<{}> {
return new Promise((resolve, reject) => {
let fileReader: FileReader = new FileReader();
if (fileReader && fileImage != null) {
fileReader.readAsDataURL(fileImage);
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = (error) => {
reject(error);
};
} else {
reject(new Error('No file found'));
}
});
}

Search bar (ionInput) event to filter output

I am using search bar ionInput event to search among the list but filtered output is shown for one list and not shown for other list on other page?
my first list code :-
HTML
<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
<ion-list no-lines *ngFor="let anime of animelist" >
<ion-item>
<h2>Name : {{anime.t}}</h2>
</ion-item>
</ion-list>
My .ts file
getanimelist(){
this.restProvider.getanimelist().subscribe(data => {
this.animelist = data;
console.log('result ' + JSON.stringify(data) );
});
this.items= this.animelist;
}
onSearchChange(evt: any) {
this.getanimelist();
console.log(this.items);
console.log(evt);
const val = evt.srcElement.value;
console.log(val);
if (!val){
return ;
}
this.animelist = this.items.filter((data) => {
// console.log(data);
if (data.t && val){
if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
return true;
}
return false;
}
})
}
my api call for this:-
apiUrl= 'https://www.mangaeden.com/api';
getanimelist(){
return this.http.get(this.apiUrl+'/list/0').pipe(
map(result => {
return result['manga'];
})
)}
}
the output for this list does get filter and my list do get updated on the page as per the value enterd but for my second list on other page iam using the same concept same code but my output is not getting filtered on the page, inside the console log i see the filtered result but my page list is not getting updated
second list code below :-
HTML
<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
<ion-list no-lines *ngFor="let anime of animelist" >
<ion-item >
<h2>Name : {{anime.t}}</h2>
</ion-item>
</ion-list>
My .ts file
getanimelist(){
//this.isLoaded = true;
this.restProvider.getpageanimelist().subscribe(data => {
this.animelist = data;
//console.log('result ' + JSON.stringify(data) );
});
this.items= this.animelist;
}
onSearchChange(evt: any) {
this.getanimelist();
const val = evt.srcElement.value;
console.log(this.items);
console.log(evt);
console.log(val);
if (!val){
return ;
}
this.animelist = this.items.filter((data) => {
// console.log(data);
if (data.t && val){
if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
return true;
}
return false;
}
});
}
my api call for the 2nd list:-
getpageanimelist(){
return this.http.get(this.apiUrl+'/list/0/?p=0&l=26').pipe(
map(result => {
return result['manga'];
})
)}
hope someone can help why is the filtered result not shown for my 2nd list ?
I stored the filter data in a new array rather than in animelist array (which is getting data from the api in the subscribe block) which was causing the whole array to call again and hence no filtered data can be viewed
my changed code in .ts
onSearchChange(evt: any) {
this.getanimelist();
const val = evt.srcElement.value;
if (!val){
return ;
}
this.newarray = this.items.filter((data) => { //stored data in new array
if (data.t && val){
if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
return true;
}
return false;
}
})
}
and hence i call the new array in my html and now when i type the name of the anime the list get filtered accordingly without any issue.
Changed Html
<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
<ion-list no-lines *ngFor="let anime of newarray" >
<ion-item >
<h2>Name : {{anime.t}}</h2>
</ion-item>
</ion-list>