Scribd
Upload
12 views3 pages

Controller FORIMG

Uploaded by

Ameya Ranade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views3 pages

Controller FORIMG

Uploaded by

Ameya Ranade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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