Skip to Content

Native capture photo functionality in sap ui5

Hi Experts,

I have capture image functionality using html video tags. Are there any way to implement iPhone API or any other alternative that works on Firoi client as well.

Let me know in case of any further details.

Thanks and Regards,

RK

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

5 Answers

  • Apr 22 at 12:56 PM

    Hi Ram,

    Use Cordova Plugins for Camera which works on both Android and IOS devices.

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks for help links. Let me share my issue that will give you clear picture.

      I have developed "Take picture app" using SAP Webide. This app works fine in all the devices and browser except few issues list below.

      1) In iPhone device, it opens in video mode so there is no way to click photo but if you click on cross mark present on top left side captures Image. Can we make it like it opens in other devices. 2) In SAP Fiori client- No camera pop up option available.

      I have attached code sample and screenshots as reference.

      BR,

      RK

      
      
      
      <Button xmlns="sap.m" text="Take Photo" id="idCapture" press="takePhoto" icon="sap-icon://camera"/>
      
      
      
      
      
      
      
      
      	takePhoto: function() {
      			//This code was generated by the layout editor.
      		if(sap.ui.Device.browser.BROWSER.SAFARI==="sr" || sap.ui.Device.browser.BROWSER.CHROME==="cr" || sap.ui.Device.browser.BROWSER.FIREFOX==="ff"){	
      			var that = this;
      			//Step 1: Create a popup object as a global variable
      			
      				this.fixedDialog = new Dialog({
      				title: "Click on Capture to take photo",
      				beginButton: new sap.m.Button({
      					text: "Capture Photo",
      					press: function(oEvent) {
      						// TO DO: get the object of our video player which live camera stream is running
      						//take the image object out of it and set to main page using global variable
      						that.imageVal = document.getElementById("player");
      						var oPopup = oEvent.getSource();
      						that.attachName = oPopup.getParent().getContent()[1].getValue();
      						that.fixedDialog.close();
      					}
      				}),
      				content: [
      					new sap.ui.core.HTML({
      						content: "<video id='player' autoplay></video>"
      					}),
      					new sap.m.Input({
      						placeholder: 'please enter image name here',
      						required: true
      					})
      				],
      				endButton: new sap.m.Button({
      					text: "Cancel",
      					press: function(oEvent) {
      						// var imageVal = document.getElementById("player");
      						// imageVal.setclose();
      						that.fixedDialog.close();
      						location.reload();
      					}
      				})
      			});
      			this.getView().addDependent(this.fixedDialog);
      			//Step 2: Launch the popup
      			this.fixedDialog.open();
      
      
      			this.fixedDialog.attachBeforeClose(this.setImage, this);
      
      
      			var handleSuccess = function(stream) {
      				player.srcObject = stream;
      			};
                  
      			navigator.mediaDevices.getUserMedia({
      				video: true
      			}).then(handleSuccess);
      			
      		}else{
      			
      		}
      
      
      		}
       
      desktop-browser.png (155.8 kB)
      iphone-issue.png (69.4 kB)
  • Apr 23 at 05:20 AM
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 24 at 07:12 AM

    Hi Ram,

    I used this code:

    onCapture: function () {
    navigator.camera.getPicture(
    function (imageData) {
    this.openDialogPicturePreview();
    var preview = this.getView().byId("imagePreview");
    preview.setSrc("data:image/jpeg;base64," + imageData);
    }.bind(this),
    function (message) {
    MessageToast.show("An error occured!", {});
    }, {
    quality: 100,
    allowEdit: true,
    sourceType: navigator.camera.PictureSourceType.CAMERA,
    destinationType: navigator.camera.DestinationType.DATA_URL,
    });
    },

    Dialog Preview:

    <core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"
    xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
    <Dialog title="Ziektebriefje" contentWidth="300px" contentHeight="400px">
    <content>
    <Image id="imagePreview" width="100%" height="100%"></Image>
    </content>
    <buttons>
    <Button text="Versturen" press="onSendSickNote" type="Emphasized"/>
    <Button text="Cancel" press="onCloseDialog"/>
    </buttons>
    </Dialog>
    </core:FragmentDefinition>

    to test this in the WebIDE, activate the Hybrid App Toolkit under "Preferences>Workspace Preferences>Extensions"

    KR,

    Vincent

    Add comment
    10|10000 characters needed characters exceeded

    • Adding code for set image :
      
      	setImage: function () {
      			//Take the running image from the video stream of camera
      			var oVBox = this.getView().byId("wow");
      			var Items = oVBox.getItems();
      			var snapId = 'rk-' + Items.length;
      			var textId = snapId + '-text';
      			var imageVal = this.imageVal;
      			//Set that as a canvas  element on HTML page
      			var oCanvas = new sap.ui.core.HTML({
      				content: "<canvas id='" + snapId + "' width='320px' heght='320px'" +
      					"style='2px solid red '></canvas>" +
      					"<label id='" + textId + "'>" + this.attachName + "</label>"
      			});
      			oVBox.addItem(oCanvas);
      			oCanvas.addEventDelegate({
      				onAfterRendering: function () {
      					var snapShotCanvas = document.getElementById(snapId);
      					var oContext = snapShotCanvas.getContext('2d');
      					oContext.drawImage(imageVal, 0, 0, snapShotCanvas.width, snapShotCanvas.height);
      				}
      			});
      
      
      		}
      
  • Apr 24 at 12:22 PM

    Hi Ram,

    Try to do this:

    onCapture:function(){
    var me = this;
    navigator.camera.getPicture(function(imageData){
    me.setImage(imageData)
    }.bind(this),
    function(message){
    MessageToast.show("An error occured!", {});},{
    quality:100,
    allowEdit: true,
    sourceType: navigator.camera.PictureSourceType.CAMERA,
    destinationType: navigator.camera.DestinationType.DATA_URL
    });},

    setImage( ):

    setImage:function(imageVal){
    //Take the running image from the video stream of camera
    var oVBox = this.getView().byId("wow");
    var Items = oVBox.getItems();
    var snapId ='rk-'+ Items.length;
    var textId = snapId +'-text';
    var oCanvas = newsap.ui.core.HTML(
    {
    content:"<canvas id='" + snapId + "' width='320px' heght='320px'" +"style='2px solid red '></canvas>" +"<label id='" + textId + "'>" + this.attachName + "</label>"});
    oVBox.addItem(oCanvas);
    oCanvas.addEventDelegate({
    onAfterRendering:function(){
    var snapShotCanvas = document.getElementById(snapId);
    var oContext = snapShotCanvas.getContext('2d');
    oContext.drawImage(imageVal,0,0, snapShotCanvas.width, snapShotCanvas.height);}});}
    Add comment
    10|10000 characters needed characters exceeded

    • I am getting below error on clikc of capture button in the console along with no image preview.

      Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

      BR,

      RK

  • Apr 25 at 09:41 AM

    Hi Ram,

    Try This:

    setImage:function(imageVal){//Take the running image from the video stream of camera
    var oVBox = this.getView().byId("wow");
    var Items = oVBox.getItems();
    var snapId ='rk-'+ Items.length;
    var textId = snapId +'-text';
    var oCanvas = new sap.ui.core.HTML({
    content:"<canvas id='" + snapId + "' width='320px' heght='320px'" +"style='2px solid red '></canvas>" +"<label id='" + textId + "'>" + this.attachName + "</label>"});
    oVBox.addItem(oCanvas);
    oCanvas.addEventDelegate({
    onAfterRendering:function(){
    var snapShotCanvas = document.getElementById(snapId);
    var oContext = snapShotCanvas.getContext('2d');
    var image = new sap.m.Image({});
    image.setSrc("data:image/jpeg;base64," + imageVal); 
    oContext.drawImage(image,0,0, snapShotCanvas.width, snapShotCanvas.height);}});}
    Add comment
    10|10000 characters needed characters exceeded