Access the webcam and take photo with XPages using webcam-easy

start.xsp

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.resources>
		<xp:script
			src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js" clientSide="true">
		</xp:script>
	</xp:this.resources>
		
	<xp:panel tagName="video">
		<xp:this.attrs>
			<xp:attr name="autoplay" value="autoplay" minimized="true"></xp:attr>
			<xp:attr name="playsinline" value="playsinline" minimized="true"></xp:attr>
			<xp:attr value="webcam" name="id"></xp:attr>
			<xp:attr name="width" value="640"></xp:attr>
			<xp:attr name="height" value="480"></xp:attr>
		</xp:this.attrs>
	</xp:panel>

	<audio id="snapSound" src="audio/snap.wav" preload="auto"></audio>
	
	<canvas id="canvas" class="canvas-image d-none"></canvas>
	
	<xp:button value="Take Photo" id="button1">
		<xp:eventHandler event="onclick" submit="true" refreshMode="norefresh">
			<xp:this.action>
				<![CDATA[
				#{javascript://get base64 of the photo
				var str = viewScope.photo;

				// convert base64 to binary
				var imagedata = new java.util.Base64.getDecoder().decode(str.substring(str.indexOf(",") + 1));
				
				// read binary as image
				bufferedImage = new javax.imageio.ImageIO.read(new java.io.ByteArrayInputStream(imagedata));
				
				// save image as file
				javax.imageio.ImageIO.write(bufferedImage, "png", new java.io.File("c:\\temp\\webcam.png"));
				
				print ("photo saved");}]]>
			</xp:this.action>
			<xp:this.script><![CDATA[takePhoto();]]></xp:this.script>
		</xp:eventHandler>
	</xp:button>

	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[// init webcam
		var webcamElement = document.getElementById('webcam');
		var canvasElement = document.getElementById('canvas');
		var snapSoundElement = document.getElementById('snapSound');
		
		var webcam = new Webcam(webcamElement, 'user', canvasElement, snapSoundElement);
		
		webcam.start()
			.then(function() {
				console.log("Camera started"); 
		});
		
		function takePhoto() {
			var picture = webcam.snap();
			console.log("Photo taken");
			XSP.getElementById("#{id:inputHidden1}").value = picture;
		}]]></xp:this.value>
	</xp:scriptBlock>

	<xp:inputHidden id="inputHidden1" value="#{viewScope.photo}"></xp:inputHidden>
	
</xp:view>