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 

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

Michael Hinze

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.

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;