How to open the mobile camera using script in serviceportal

Sasidhar Lekka1 · ‎06-29-2018

Hi,

How to open the Mobile camera to take pictures in service portal , can anyone help me in this

Regards,

Sasidhar.

robertmaxwell · ‎07-02-2018

You might be able to use a mobile device app like Tasker or IFTTT to react to a REST request that you can send via a script that you can configure in a service portal widget.

Harsh Vardhan · ‎07-02-2018

have you tried with cabrillo API.

Please refer the doc link below. you can use this api in portal widget. hope it will help you

https://developer.servicenow.com/app.do#!/api_doc?v=jakarta&id=cabrillo-camera-namespace

ChrisBurks · ‎07-02-2018

Regular javascript browser APIs can be used. MDN: getUserMedia

Here is a basic example:

HTML:

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">${Camera Demo}</h4>
  </div>
  <div class="panel-body">
    <div class="power-controls">
      <div class="btn-group">
        <button ng-click="cameraOn()" class="btn btn-primary">${Open Camera}</button>
        <button ng-click="cameraOff()" class="btn btn-info">${Close Camera}</button>
      </div>
    </div>
    <div class="camera-container hide">
      <img class="photo-image hide">
      <video></video>
      <div class="controls">
        <button ng-click="flipCamera()" class="bg-success text-primary camera-flip"><i class="fa fa-refresh"></i></button>
        <button ng-click="take_snapshot()" class="bg-success text-primary"><i class="fa fa-camera"></i></button>
        <a ng-click="download()" id="download_photo" class="bg-success disabled"><i class="fa fa-download"></i></a>
        <button id="delete_photo" ng-click="deletePhoto()" class="bg-danger hide"><i class="fa fa-close fa-lg"></i></button>
      </div>
      <canvas class="hide"></canvas>
    </div>
  </div>
</div>

CSS:

.power-controls {
  padding: 25px;
}

.camera-container {
  position: relative;
  width: 640px;
}


.camera-container .controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  align-items: flex-end;
}

.controls button, .controls a {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin: 10px 15px;
}

.controls button.disabled, .controls a.disabled {
  background-color: lightgray;
    pointer-events: none;
}

.controls a {
  padding: 16px;
}

.controls button i, .controls a i {
  font-size: 24px;
}

.controls button.camera-flip {
  transform: rotate(-21deg);
}

.controls button.camera-flip i {
  transform: skewX(50deg);
}

Since this example isn't an angularized module I use the link function and angularjs built-in jquery-lite to render the video/photo.

Link function:

function(scope){
	var mode = "user";
	var constraints = {video: {facingMode: mode}}
	var cameraContainer = $(".camera-container")[0];
	var image = $(".photo-image")[0];
	var download_photo_btn = $("#download_photo")[0];
	var delete_photo_btn = $("#delete_photo")[0];
	var video = $("video")[0];
	function getCamera() {
		if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
			navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream){
				video.srcObject = mediaStream;
				video.onloadedmetadata = function(e) {
					video.play();
					video.onplay =  function(){
						showVideo();
					}
				};
			})
		}
	}

	scope.flipCamera = function(){
		if(mode == "environment")
			mode = "user";
		else
			mode = "environment";
		constraints.video.facingMode = mode;
		getCamera();
	}

	scope.cameraOn = function() {
		getCamera();
	}

	scope.cameraOff = function() {
		cameraContainer.classList.remove("show");
		video.pause();
	}

	function showVideo(){
		cameraContainer.classList.add("show")
	}

	scope.take_snapshot = function(){

		var snap = takeSnapshot();

		// Show image. 
		image.setAttribute('src', snap);
		image.classList.remove("hide");

		// Enable delete and save buttons
		delete_photo_btn.classList.remove("hide");
		download_photo_btn.classList.remove("disabled");

		// Set the href attribute of the download button to the snap url.
		download_photo_btn.href = snap;

		// Pause video playback of stream.
		video.classList.add("hide");
		video.pause();
	}

	function takeSnapshot(){  
		var hidden_canvas = document.querySelector('canvas'),
			context = hidden_canvas.getContext('2d');

		var width = video.videoWidth,
			height = video.videoHeight;

		if (width && height) {

			// Setup a canvas with the same dimensions as the video.
			hidden_canvas.width = width;
			hidden_canvas.height = height;

			// Make a copy of the current frame in the video on the canvas.
			context.drawImage(video, 0, 0, width, height);

			// Turn the canvas image into a dataURL that can be used as a src for our photo.
			return hidden_canvas.toDataURL('image/png');
		}
	}

	scope.deletePhoto = function(){
		// Hide image.
		image.setAttribute('src', "");
		image.classList.add("hide");

		// Disable delete and save buttons
		delete_photo_btn.classList.add("hide");
		download_photo_btn.classList.add("disabled");

		// Resume playback of stream.
		video.play();
		video.classList.remove("hide");

	};

}

NOTES:

- The flipCamera button is used to flip from a user-facing (selfie) camera to environment-facing camera. Thus it won't do anything if the device rendering it just has one camera. It will default to the only camera present.

- The download photo button doesn't work for Chrome because the image is still a base64encoded representation of image. The image will need to be converted into a supported download format if using Chrome to download. Like I mentioned; it's a basic concept.

Again this is just a basic concept. It can be more "angularized" if necessary.

Hope this helps

JanneHjorth · ‎11-05-2020

Hi Chris

Would you by any chance now, how to build in this functionality in the "addAttachment" button??

At the moment, we are not using Mobil App - but have users with android devices in our shops, where camera is inactivatet - some security descission.

So what I'm looking for is this scenario:

when user of such devices needs to request help or report damage on goods, they use a link to open up our ServicePortal
when open, i want the addAttachment button to open up for the open/close camera button and when picture is taken and saved, it should be attached to the request item

If possible - how du I then modify the basic example you've provided??

Kind regards. Janne