Accessing Camera API

Hi all,

I was thinking to add a camera button to one of the recent course I was working on. When the user clicks on the camera button, a java script code will execute which will access the system camera and can take a pic. But I didn't get any proper code to resolve the functionality issue.

Anyone has ever tried this application? Kindly let me know.

Thanks a lot in advance.

Parichaya Kanungo 

3 Replies
Christie Pollick

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! :)

Paul Kizilos

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;
});