I am using following function for capture image.
function openCamera() {
navigator.camera.getPicture(
function(uri) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
},
function(e) {
console.log("Error getting picture: " + e);
},
{ quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI});
};
And I am using following js of phonegap
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
I am using following image tag for captured image
<img style="width: 128px; height: 160px; visibility:hidden; display:none;" id="camera_image" src="" />
But its not open camera.Am not know what is the issue.?
try adding the sourceType too..
sourceType : navigator.camera.PictureSourceType.CAMERA
Related
I'm trying to integrated 360° images into my website.
But it's not working, can someone help me please ?
thanks in advance
When i try to run it i get an render error like below (picture)
I have Added (in the header):
<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
And in the view i have added:
<div id='vrview'></div>
Also The script in the view :
<script>
var vrView;
var scenes = {
petra: {
image: 'https://localhost:44323/images/Inside/chichen-itza.jpg',
preview: 'https://localhost:44323/images/Inside/chichen-itza-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'https://localhost:44323/images/Inside/chichen-itza-preview.jpg',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);</script>[![enter image description here][1]][1]`
try this code
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/3dweb/360javascriptviewer/lib/JavascriptViewer.min.js"></script>
<a-scene>
<img id="panorama" src="~/images/gear-360_overview_bg.jpg" />
<a-sky src="#panorama" rotation="0 -90 0"></a-sky>
</a-scene>
}
On my IOS mobile application I am taking picture and then select a picture from gallery. After selecting this picture I am using ng-img-crop.js to crop this image and without saving this cropped image, trying to upload it to a server, the server side is C# WCF. (In this particular example I am trying to upload local IIS) But I am getting this error:
ERROR: {"code":1,"source":"data:image/png;base64,iVBORw0KGgoAAAANSUhE...","target":"http://11.111.11.111/wcf/OCRService.svc/upload","http_status":null,"body":null,"exception":null}
app.js (76,24)
Should I save this cropped image to the gallery before uploading to the server? Is there any way to upload it without saving?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="connect-src 'self' http://11.111.11.111/wcf/OCRService.svc/upload 'unsafe-eval' 'unsafe-inline'; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<title>LoTTo</title>-->
<!-- LoTTo references -->
<link href="css/ionicons.css" rel="stylesheet" />
<link href="css/ionic.css" rel="stylesheet" />
<link href="css/ng-img-crop.css" rel="stylesheet" />
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="scripts/angular.min.js"></script>
<script src="scripts/ionic.bundle.js"></script>
<script src="scripts/ng-cordova.min.js"></script>
<script src="scripts/ng-img-crop.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/ng-file-upload-shim.min.js"></script>
<script src="scripts/ng-file-upload.min.js"></script>
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width: 300px;
height: 300px;
}
.croppedArea {
background: #E4E4E4;
overflow: hidden;
width: 300px;
}
</style>
</head>
<body ng-app="starter">
<ion-header-bar class="bar bar-header bar-light">
<h1 class="title">LoTTo</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController" padding="true">
<button class="button button-full button-balanced icon-right ion-ios-camera" ng-click="takePhoto()">
Resim Çek
</button>
<button class="button button-full button-balanced icon-right ion-images" ng-click="choosePhoto()">
Resim Seç
</button>
<center>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage" chargement="'Loading'"
area-type="rectangle"
area-min-size="50"
result-image-format="image/jpeg"
result-image-quality="1"
result-image-size="{w:300, h:50}"></img-crop>
</div>
<div ng-show="myImage !== undefined">Gönderilecek Resim:</div>
<div class="croppedArea"><img ng-src="{{myCroppedImage}}" ng-show="myImage !== undefined" id="image" /></div>
</center>
<button class="button button-full button-balanced icon-right ion-images" ng-click="upload(myCroppedImage);" ng-if="myImage !== undefined">
Resim Yükle
</button>
</ion-content>
</body>
</html>
Here is the app.js:
angular.module('starter', ['ionic', 'ngCordova', 'ngImgCrop', 'ngFileUpload'])
.controller("ExampleController", ['$scope', '$cordovaCamera', 'Upload', '$timeout', '$cordovaFileTransfer', function ($scope, $cordovaCamera, Upload, $timeout, $cordovaFileTransfer) {
$scope.takePhoto = function () {
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function (err) {
console.log(err);
alert(err);
});
}
$scope.choosePhoto = function () {
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
$scope.myImage = $scope.imgURI;
}, function (err) {
console.log(err);
alert(err);
});
}
$scope.myCroppedImage = '';
$scope.upload = function (dataUrl) {
Upload.upload({
url: 'http://192.168.1.20/wcf/upload',
data: {
file: Upload.dataUrltoBlob(dataUrl)
},
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
console.log(response.data);
alert(response.data);
});
console.log(response.data);
}, function (response) {
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
alert(response.status);
});
}
}]);
Edit 1: How to add Access-Control-Allow-Origin to my mobile app?
Edit 2: Changed the upload section
Best Regards.
This example might help you:
Check this jsfiddle: [http://jsfiddle.net/xxo3sk41/1/][1]
code :
var app = angular.module('fileUpload', ['ngFileUpload', 'ngImgCrop']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.upload = function (dataUrl) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
file: Upload.dataUrltoBlob(dataUrl)
},
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
}, function (evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}
}]);
I have been trying to play two videos (not necessarily simultaneously) on a Chromecast app. Once of them is embedded via the Youtube API and the other is a standard HTML5 video loaded via the tag.
It turns out that the Youtube video simply won't be played back on Chromecast if I also have a standard tag in my HTML5 page. But if I remove that video tag, then the Youtube video will play back nicely.
Any advice is highly appreciated!
Only one active video stream is supported on Chromecast.
I ran into this same problem.
The key elements to solve it are, unload the cast player and don't let a video tag linger in the DOM with a SRC attribute set when you attempt to play Youtube.
As for YouTube, dont let the IFRAME that contains their video player linger in the DOM either when attempting to use the HTML5 video tag.
You'll need to tear down the previous player before attempting to trigger playback through the opposing mechanism.
Here is my sample receiver I used to troubleshoot and solve the problem. This is a working example.
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #000;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/1.0.0/media_player.js"></script>
<video id="chromecast" style="width: 50%; height: 50%;"></video>
<script>
var ytCode = 'sSwLhYhYgI0'
var hlsUrl = 'http://host.com/playlist.m3u8'
</script>
<!-- Chromecast -->
<script type="text/javascript">
var castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
var messageBus = castReceiverManager.getCastMessageBus('urn:x-cast:tv.domain');
cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
cast.player.api.setLoggerLevel(cast.player.api.LoggerLevel.DEBUG);
castReceiverManager.onReady = function() {
console.info('[castReceiverManager.onReady]');
castReceiverManager.setApplicationState('Ready');
};
castReceiverManager.onSenderConnected = function(sender) {
console.info('[castReceiverManager.onSenderConnected]', sender.userAgent);
};
messageBus.onMessage = function(event) {
var message = JSON.parse(event.data);
console.info('[messageBus.onMessage]', message);
};
// Normal
castReceiverManager.start({
maxInactivity: 8,
statusText: 'Ready to play',
dialData: undefined
});
window.playDirect = function(id) {
// Tear down any YT player
$('#youtube').remove();
if(!id) id = 'chromecast';
var mediaElement = document.getElementById(id);
window.host = new cast.player.api.Host({'mediaElement':mediaElement, 'url':hlsUrl});
window.host.onError = function(errorCode) {
console.log('ERROR ' + errorCode);
};
var protocol = cast.player.api.CreateHlsStreamingProtocol(window.host);
window.CCplayer = new cast.player.api.Player(window.host);
window.CCplayer.load(protocol, 25);
setTimeout(function() {
mediaElement.play();
}, 1000);
};
</script>
<!-- Youtube -->
<script>
window.onYouTubeIframeAPIReady = function() {
console.log('Initialized Youtube');
};
var playYT = function() {
// Tear down any direct player
if(window.CCplayer) {
window.CCplayer.unload();
}
$('video').attr('src', '');
// Inject div tag that will be converted to iframe with player
$('body').append('<div id="youtube" style="width: 50%; height: 50%;"></div>');
window.YTPlayer = new YT.Player(
'youtube',
{
height: '100%',
width: '100%',
playerVars: {
'autoplay': 0,
'controls': 0,
'cc_load_policy': 0,
'fs': 0,
'iv_load_policy': 0,
'modestbranding': 0,
'rel': 0,
'showinfo': 0,
'enablejsapi': 1
},
events: {
'onReady': function() {
var params = { videoId: ytCode, startSeconds: 170 };
window.YTPlayer.cueVideoById(params);
window.YTPlayer.playVideo();
},
'onError': function(err) {
console.log('YT Error ' + err);
}
}
});
};
var iframeScript = document.createElement('script');
iframeScript.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(iframeScript, firstScriptTag);
</script>
</body>
</html>
Test:
Load up the sample receiver above, and alternate the following inside the chrome debug console:
playDirect()
or
playYT()
I'm developing web app for iOS7 platform with PhoneGap and camera plugin. I want use camera roll with button for turn on capture-view(like as native picker or as facebook photo-mode).
I'm using Cordova Camera API and camera roll looks like otherwise(only photo/video, not button for turn on capture mode). I have read all documentation about plugin and tried use different set of options, but can't find solution.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
Im having problems with kinetics. I have a stage with kinetics with a one image and text, but that I want is export the stage to a image like myImage.jpg no like [data:image/wIlksoks.e] that it is the callback that return dataUrl() from kinetics.
Im trying with this code:
stage.toDataURL({
width: 350,
height: 350,
mimeType: "image/jpeg",
callback: function(dataUrl) {
/*
* here you can do anything you like with the data url.
* In this tutorial we'll just open the url with the browser
* so that you can see the result as an image
*/
window.open(dataUrl);
}
});
}, false);
King Regards!
You can use stage.toDataURL to get your dataURL for the server:
stage.toDataURL({
callback:function(dataURL){
// dataURL is available for saving to your server
}
});
Note: Be sure that your image and your .html are hosted on the same domain.
Otherwise your stage.toImage will fail because of CORS security.
So be sure to check your console for CORS security errors !
Alternatively:
You can use stage.toImage to create a dataURL from your image+text.
Then you can create a temp canvas to get the dataURL.
stage.toImage({
callback:function(stageImg){
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=stageImg.width;
tempCanvas.height=stageImg.height;
tempCtx.drawImage(stageImg,0,0);
var dataURL=tempCanvas.toDataURL();
// dataURL is available for saving to your server
}
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/RV694/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
start();
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function start(){
var kImage = new Kinetic.Image({
x: 0,
y: 0,
width: 300,
height: 300,
image:img
});
layer.add(kImage);
var kText = new Kinetic.Text({
x:20,
y:20,
fontSize:24,
fill:"blue",
text:"Hello!"
});
layer.add(kText);
layer.draw();
}
$("#stageAsImage").click(function(){
stage.toImage({
callback:function(stageImg){
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=stageImg.width;
tempCanvas.height=stageImg.height;
tempCtx.drawImage(stageImg,0,0);
var dataURL=tempCanvas.toDataURL();
var imageElement=document.getElementById("newImage");
imageElement.src=dataURL;
}
});
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="stageAsImage">Save stage as image</button>
<div id="container"></div>
<img id="newImage">
</body>
</html>