Created an external suitelet page that can be navigated from the WMS app. In the suitelet page, we can create an element that opens the camera and capture the image. The captured image can be sent to the NetSuite file cabinet.
We can achieve this with the help of an HTML page and attached the script below.
image_capture.html
<!doctype html>
<head>
<style>
/* CSS comes here */
#video {
border: 1px solid black;
width: 320px;
height: 240px;
}
#photo {
border: 1px solid black;
width: 320px;
height: 240px;
}
#canvas {
display: none;
}
.camera {
width: 340px;
display: inline-block;
}
.output {
width: 340px;
display: inline-block;
}
#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 36px;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
</style>
<title>My Favorite Sport</title>
</head>
<body>
<div class="contentarea">
<h1>
Take the photo of the item
</h1>
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<div><button id="startbutton">Take photo</button></div>
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
</div>
<script>
/* JS comes here */
(function () {
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment'
},
audio: false
})
.then(function (stream) {
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function (ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function (ev) {
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
let base64 = data.split(",");
let imageData = base64[1];
console.log("imageData", imageData);
let url = 'https://tstdrv1584391.extforms.netsuite.com/app/site/hosting/scriptlet.nl?script=2372&deploy=1&compid=TSTDRV1584391&h=8421d9bae118741fcd54';
const response = fetch(url, {
method: "POST",
mode: "cors",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: imageData,
});
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
})();
</script>
</body>
</html>jj_sl_image_capture_hluk667.js
/**
* @NApiVersion 2.1
* @NScriptType Suitelet
*/
define(["N/file"], (file) => {
const FOLDER = 10277;
const HTML_CODE_FILE_ID = 42383;
/**
* Defines the Suitelet script trigger point.
* @param {Object} scriptContext
* @param {ServerRequest} scriptContext.request - Incoming request
* @param {ServerResponse} scriptContext.response - Suitelet response
* @since 2015.2
*/
const onRequest = (context) => {
try {
if (context.request.method === "GET") {
let htmlCode = file.load({
id: HTML_CODE_FILE_ID,
});
var html = htmlCode.getContents();
context.response.write(html);
context.response.setHeader({
name: "Custom-Header-Demo",
value: "Demo",
});
} else {
let imageData = context.request.body;
let timeStamp = new Date().getTime();
let fileObj = file.create({
name: `image${timeStamp}.png`,
fileType: file.Type.PNGIMAGE,
contents: imageData,
encoding: file.Encoding.BASE64,
folder: FOLDER,
});
fileObj.save();
}
} catch (error) {
log.error("Error @scriptContext", error);
}
};
return { onRequest };
});