I am trying to create a sample application that will either take a picture from camera, or load an image from gallery on the screen.
Can someone help me for the same.
You can use $cordovaCamera of ngCordova to take a photo and save it.
Register ngCordova as dependency in app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
controller.js:
.controller('PhotosCtrl', function($scope, $cordovaCamera) {
/**
* Add a photo.
*/
$scope.addPhoto = function(){
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
console.log("Error while getting the image!", err)
});
};
});
template.html:
<ion-view view-title="Photos">
<ion-content>
<button type="button" class="button" ng-click="addPhoto()">Add photo</button>
<img id="myImage" />
</ion-content>
</ion-view>
Related
Im trying to play a HLS using VideoJS. Basically the stream itself is working fine but it seems that the buffer size is to small and the video lags every couple of seconds/minutes for 1-2 sec. Is there any way to increase the actual size of segemnts preloaded? Currently I have VideoJS implemented like so:
...
<div class="container-fluid">
<div class="row">
<div class="player-center">
<video-js autoplay id=player class="vjs-fluid" controls="true">
<source src="{{ playlist_url }}" type="application/x-mpegURL">
</video-js>
<script src="{% static 'videojs_old/video.js' %}"></script>
<script src="{% static 'videojs_old/videojs-http-streaming.js' %}"></script>
<script>
videojs.Vhs.xhr.beforeRequest = function(options) {
options.headers = options.headers || {};
options.headers.Authorization = "{{ access_token }}";
console.log('options', options)
return options;
};
var player = videojs('player',
{fill: false},
{autoplay: true},
{responsive: true},
{fluid: true},
{GOAL_BUFFER_LENGTH: 100},
{CMAX_GOAL_BUFFER_LENGTH: 150},
{preload: "auto"});
player.play();
</script>
</div>
</div>
</div>
But it seems that GOAL_BUFFER_LENGTH nor CMAX_GOAL_BUFFER_LENGTH has any effect.
The constants are not player level options. Also you can pass only one options object.
videojs.Vhs.GOAL_BUFFER_LENGTH = 100;
videojs.Vhs.MAX_GOAL_BUFFER_LENGTH = 150;
var player = videojs('player', {
fill: false,
autoplay: true,
responsive: true,
fluid: true,
preload: "auto"
});
I use VideoJs player for my website. In each video i have first ad and after that start video file. I looked on the internet but I couldn't find any clear documentation or some examples to create a button 'Skip Ad' ... I find only
this example but when i try it I have error
VIDEOJS: ERROR: TypeError: player.skipAds is not a function
here is my code:
<video id="video_1" poster="<?=$videos->getPoster(1)?>" class="video video-js vjs-default-skin" controls width="258" height="150" data-setup="{}" src="<?= $videos->getVideo(1) ?>">
<source src="<?= $videos->getVideo(1) ?>" type="video/mp4">
<div class="videojs-ads-info enabled">
<span>Your video will resume in 23 seconds</span>
<a class="enabled">Skip Ad</a>
</div>
and script :
videojs('#video_1', {}, function() {
var player = this;
player.ads();
player.on('contentchanged', function() {
player.trigger('adsready');
});
player.on('readyforpreroll', function() {
player.ads.startLinearAdMode();
player.src('<?=$videos->getAds(1)?>');
player.skipAds({ delayInSeconds: 10 });
player.one('adplaying', function() {
player.trigger('ads-ad-started');
});
player.one('adended', function() {
player.ads.endLinearAdMode();
});
});
player.trigger('adsready');
});
Try this!
<video id="video_1" poster="<?=$videos->getPoster(1)?>" class="video video-js vjs-default-skin" controls width="258" height="150" data-setup="{}" src="<?= $videos->getVideo(1) ?>">
<source src="<?= $videos->getVideo(1) ?>" type="video/mp4">
<div class="videojs-ads-info enabled">
<a class="enabled">Skip Ad</a>
</div>
</video>
player = videojs('video_1', {}, function() {
let player = this;
player.ads(); // initialize videojs-contrib-ads
player.on('readyforpreroll', function() {
player.ads.startLinearAdMode();
player.src('<?=$videos->getAds(1)?>');
player.skipAds();
player.one('adplaying', function() {
player.trigger('ads-ad-started');
});
player.one('adended', function() {
player.ads.endLinearAdMode();
});
});
player.trigger('adsready');
});
$('#video_1').on('click', '.videojs-ads-info a', function () {
$(".videojs-ads-info").css("display", "none");
});
I am able to click photos in my phone but image not displaying on my page.
I have installed the plugins from official ionic framework doc:
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save #ionic-native/camera
This is my code:
getPic()
{
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.myPhoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
});
}
I have declared myPhoto:any; inside my class.
This is where I am showing my Image:
<ion-content no-bounce padding>
<button ion-button (click)="getPic()">Take A Picture</button>
<p align="center"><img src="{{ myPhoto }}"></p>
</ion-content>
I don't know where I am doing the mistake. Please Help me. Thanks!
private OpenCamera(): void{
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType: this.camera.PictureSourceType.CAMERA,
saveToPhotoAlbum: true
}
this.camera.getPicture(options).then((imageData) => {
this.AddIssueObj.file.push(s);
this.uploadcount=this.AddIssueObj.file.length;
}, (err) => {
// Handle error
});
}
for HTML:
<ion-scroll scrollX="true" class="m-slider__scroll" scroll-avatar>
<span *ngFor="let v of photoList">
<img src="{{v}}" alt="slider image1" class="m-slider__img" />
</span>
</ion-scroll>
I am using Ionic 1.3.3. I want to add an action event to the slides, but the event doesn't fire at all. Nothing is appearing in the console for the following:
template:
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="profile in home.profiles">
<div class="card image">
<div id="container-{{profile.$id}}"></div>
</div>
<div class="item">
<h2>{{profile.displayName}}, {{profile.age}} (<i class="ion-heart"></i> {{profile.stars}})</h2>
</div>
</ion-slide-page>
</ion-slides>
controller:
app.controller('HomeCtrl', function (Auth, $ionicLoading, $scope, $ionicSlideBoxDelegate) {
var home = this;
$scope.options = {
loop: false,
speed: 800,
pagination: false,
};
$scope.$on('$ionicSlides.sliderInitialized', function (event, data) {
// data.slider is the instance of Swiper
console.log('initialized');
$scope.slider = data.slider;
});
$scope.$on('$ionicSlides.slideChangeStart', function (event, data) {
console.log('Slide change is beginning');
});
$scope.$on('$ionicSlides.slideChangeEnd', function (event, data) {
// note: the indexes are 0-based
console.log('Slide change ended');
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
});
I copy-pasted most of this from the ionic v1 docs. What am I missing?
I am developing a phonegap ios application. I need camera to be on initially when page is loaded.
Now on clicking the div, camera is loaded in a new screen with two buttons "retake" and "use".if click on "use" button then the captured snap will be appended to img with id "preview"
code is,
function onCamera() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA
});
}
function uploadPhoto(imageURI) {
$("#preview").attr({
src: imageURI,
title: "cam",
alt: "cam image"
});
}
<div onclick="onCamera()">
<img src="Images/camera.png" style="width:50px; height:50px;"/>
</div>
<div class="cam">
<img id="preview" src="css/empty.png" style="width:100%; height:300px;" />
</div>
How can i make the camera load to div with id "preview" when the page is loaded initially?
Please Help, Thanks.