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
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.