Accessing Camera API

Hi, Parichaya -- Many thanks for your question, and you may already be aware, but I wanted to mention for others following along that while we cannot provide support for JaveScript modifications, it may be helpful to check out this info. on JS Best Practices. Hopefully, some of our gurus in the community are able to assist you further! :)

I might be wrong abnout this, but as far as I know you can't access mobile device functions, like the camera with browser-based Javascript alone. You'de need a development environment like PhoneGap or Cordova, use an API that provides camera-specific functions and then publish this as an app.

You can try something like this:

var target = document.getElementById('slide-window').childNodes[0];

var vk = document.createElement('video');
vk.setAttribute('id', 'videoplayer');
vk.setAttribute('width', '100%');
vk.setAttribute('controls', '');
vk.setAttribute('autoplay', '');
//target.appendChild(vk).appendChild(vk)
target.replaceChild(vk, target.childNodes[0]);
//target.innerHTML = vk;

var bk = document.createElement('button');
bk.setAttribute('id', 'captureBtn');
bk.innerHTML = "Capture";
target.appendChild(bk);

var ck = document.createElement('canvas');
ck.setAttribute('id', 'canvas');
ck.setAttribute('width', '320');
ck.setAttribute('height', '240');
ck.innerHTML = '';
target.appendChild(ck);

const player = document.getElementById('videoplayer');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('captureBtn');

const constraints = {
video: true,
};

captureButton.addEventListener('click', () => {
// Capture the video frame to the canvas when button is clicked or tapped.
context.drawImage(player, 0, 0, canvas.width, canvas.height);
});

// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});

Wow Paul ! Thanks this works. One more thing, can we add a button where the user can press and record his/her video and when exits get saved in a shared drive? I have very l; little knowledge on JS hence requesting.