Scribd
Upload
12 views

controllerFORIMG

Uploaded by

Ameya Ranade
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

controllerFORIMG

Uploaded by

Ameya Ranade
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

sap.ui.

define([
"sap/ui/core/mvc/Controller", // Import the Controller class from SAPUI5
framework
"sap/m/MessageToast" // Import the MessageToast class from SAPUI5
framework
], function (Controller, MessageToast) {
"use strict"; // Enable strict mode for improved code quality and error
checking

return Controller.extend("capture.controller.View1", { // Define a new


controller called "View1"
onAfterRendering: function () {
this.onStartVideo(); // When the view is rendered, call the
onStartVideo function
},
onStartVideo: function () {
const that = this; // Create a reference to the controller instance

if (this.video) {
MessageToast.show("Video is already started."); // Show a message
if the video is already started
return; // Exit the function
}

const video = document.createElement("video"); // Create an HTML video


element
video.width = 640; // Set the desired width for the video
video.height = 480; // Set the desired height for the video

const videoContainer = this.byId("videoContainer"); // Get a reference


to an element with the ID "videoContainer"
videoContainer.getDomRef().appendChild(video); // Append the video
element to the "videoContainer" in the DOM

const onSuccess = function (stream) {


video.srcObject = stream; // Set the video source to the media
stream
video.onloadedmetadata = function (e) {
video.play(); // Play the video when metadata is loaded
};
};

const onError = function (error) {


MessageToast.show("Failed to access the camera: " + error); //
Show an error message if camera access fails
};

navigator.mediaDevices.getUserMedia({ video: true }) // Request access


to the user's camera
.then(onSuccess) // If successful, call the onSuccess function
.catch(onError); // If there's an error, call the onError function
},

onCaptureSnap: function () {
const video = document.querySelector("video"); // Find the video
element in the DOM

if (!video) {
MessageToast.show("Video not found."); // Show a message if the
video element is not found
return; // Exit the function
}

const fileName = this.getView().byId("fileNameInput").getValue(); //


Get the value of the "fileNameInput" control

if (!fileName) {
MessageToast.show("Please provide a file name."); // Show a
message if the fileName is not provided
return; // Exit the function
}

video.pause(); // Pause the video before capturing the snapshot

const canvas = document.createElement("canvas"); // Create an HTML


canvas element
const context = canvas.getContext("2d");
canvas.width = video.width; // Set the canvas width to match the video
width
canvas.height = video.height; // Set the canvas height to match the
video height
context.drawImage(video, 0, 0, video.width, video.height); // Capture
the video frame and draw it on the canvas

const imageDataURL = canvas.toDataURL("image/png"); // Convert the


canvas image to a data URL

const imageElement = document.createElement("img"); // Create an HTML


image element
imageElement.src = imageDataURL; // Set the image source to the
captured image data URL
document.body.appendChild(imageElement); // Append the image element
to the document body

const stream = video.srcObject;


if (stream) {
stream.getTracks()[0].stop(); // Stop the camera stream to release
the camera resources
}

this.saveImage(imageDataURL, fileName); // Call the saveImage function


to handle the captured image

const videoContainer = this.byId("videoContainer"); // Get a reference


to "videoContainer"
videoContainer.getDomRef().removeChild(video); // Remove the video
element from the "videoContainer" in the DOM
},
saveImage: function (imageDataURL, fileName) {
const that = this;

// Convert data URL to Blob


const byteCharacters = atob(imageDataURL.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });

// Create a FormData object and append the blob


const formData = new FormData();
formData.append('file', blob, fileName);

// Example using jQuery.ajax for simplicity, you can use any AJAX library or
fetch API
$.ajax({
url: "/your/odata/service/endpoint", // Replace with your actual backend
endpoint
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function (data) {
console.log("Image uploaded successfully", data);
MessageToast.show("Image uploaded successfully");

// Optionally, you can perform additional actions after successful


upload
// For example, refreshing the UI or navigating to another page
// that.refreshUI();
// that.navToAnotherPage();
},
error: function (error) {
console.error("Error uploading image", error);
MessageToast.show("Error uploading image");
}
});
}

You might also like