Accessing Camera API

Nov 23, 2015

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 

4 Replies
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.replaceChild(vk, target.childNodes[0]);
//target.innerHTML = vk;

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

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

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.
.then((stream) => {
player.srcObject = stream;

This discussion is closed. You can start a new discussion or contact Articulate Support.