SAPUI5 Camera Only

[brosseit_mindsquare]

Hello,

I have a UploadSet in my SAPUI5 App. When I execute the app on my mobile phone I want to restrict the functionality to select a file from my phone. It only should be possible to take a picture.

Is there any way to realize this?

Best regards,

David

[priteshpatel65]

Hi brosseit_mindsquare

Try this.

 this.isPhone : sap.ui.Device.system.phone
if(this.isPhone==='true')
{
//Open camera code
}
else
{
 //UploadSet code
}

Regards

Pritesh Patel

[brosseit_mindsquare]

Hey Pritesh,

thanks for your input, do you have sample code for the camera case?

Best regards,

David

[priteshpatel65]

Hi brosseit_mindsquare

try this

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
	"use strict";
	return Controller.extend("Camera.controller.Home", {
		onInit  : function() {
			this.getView().setModel( new JSONModel({
                photos: []
            }) );
		},
        onSnapshot: function (oEvent) {
            // The image is inside oEvent, on the image parameter,
            // let's grab it.
            var oModel = this.getView().getModel();
            var aPhotos = oModel.getProperty("/photos");
            aPhotos.push({src: oEvent.getParameter("image")});
            oModel.setProperty("/photos", aPhotos);
            oModel.refresh(true);
        },
        onTabSelect: function (oEvent) {
            var oTab = oEvent.getParameter("key");
            var oCamera = this.getView().byId("idCamera");
            if (oTab !== "demo") {
                oCamera.stopCamera();
            } else {
                oCamera.rerender();
            }
        }
	});
});

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout"
 xmlns:f="sap.ui.layout.form" xmlns:lab="openui5.camera" xmlns:core="sap.ui.core" xmlns="sap.m"
 controllerName="Camera.controller.Home" displayBlock="true">
	<App>
		<pages>
			<Page title="{i18n>appTitle}">
				<content>
                    <ObjectHeader title="Camera control demo"  backgroundDesign="Solid" number="{/photos/length}"
 numberUnit="photos" >
			        </ObjectHeader>
			        <IconTabBar expanded="{device>/isNoPhone}" class="sapUiSmallMarginBottom sapUiResponsiveContentPadding" select="onTabSelect">
				        <items>
					        <IconTabFilter text="Demo" key="demo">
                                <l:DynamicSideContent class="sapUiDSCExplored sapUiContentPadding" sideContentFallDown="BelowM" containerQuery="true" showSideContent="true">
			                        <l:mainContent>
                                        <lab:Camera id="idCamera" width="800"  height="600"  snapshot=".onSnapshot"  singleShotMode="false" />
			                        </l:mainContent>
			                        <l:sideContent>
                                        <List  headerText="Photos"   growing="false" items="{path: '/photos'}"  noDataText="{i18n>nophotos}">
                	                        <CustomListItem>
                		                        <Image src="{src}" densityAware="false" height="100px" >
                		                        </Image>
                	                        </CustomListItem>
                                        </List>
			                        </l:sideContent>
                                </l:DynamicSideContent>
					        </IconTabFilter>
					        <IconTabFilter text="About & Usage" key="info">
                                <Panel headerText="{i18n>title.about}" width="auto" class="sapUiResponsiveMargin">
                                    <Text text="{i18n>about}" />
                                    <FormattedText target="_blank" htmlText="{i18n>usage}"/>
                                </Panel>
                                <Panel headerText="{i18n>title.author}" width="auto" class="sapUiResponsiveMargin">
                                    <Link target="_blank"  href="https://twitter.com/tiagobalmeida"  text="Tiago Almeida - @tiagobalmeida"/>
                                </Panel>
					        </IconTabFilter>
				        </items>
			        </IconTabBar>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Manifest.json file add resort root for thirtpary file access

"resources": {
			"css": [{
					"uri": "css/style.css"
				}]
		},
		"resourceRoots": {
			"openui5.camera": "./thirdparty/"
		}

thirtparty camera fileAfter download this file change name library-preload.txt to library-preload.js add folder "thirdparty" in under webapp folder Upload library-preload.js file in to thhirdparty folderlibrary-preload.txt

Thanks & Regards

Pritesh Patel