How to access multiple camera drivers using Javascript?

I need complete javascript code to access multiple camera drivers.

List of camera drivers should come in the drop down. I should be able to choose required camera driver from the drop down.
Based on my selection, i will capture the photo.

Whenver i change the drop down option, the corresponding camera driver should open

Kindly help me in building this code.

What code do you have so far, and where are you getting stuck with it?


I have written below code. Can you please customize this according to my requirement.

<!DOCTYPE html>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
<%@ page import="*" %>
      <video id="video"></video>
      <canvas id="canvas" width="640" height="480"></canvas>
      <div id="buttoncontent"></div>
      <button id="startbutton">CAPTURE</button>
	  <a id="link"></a>
      <script type="text/javascript">
         // Grab elements, create settings, etc.
         (function() {
         var streaming = false,
         video = document.getElementById("video"),
         canvas = document.getElementById("canvas"),
         buttoncontent = document.getElementById("buttoncontent"),
         //photo = document.getElementById("photo"),
         startbutton = document.getElementById("startbutton"),
         width = 320,
         height = 0;
         navigator.getMedia = (navigator.getUserMedia ||
         navigator.webkitGetUserMedia ||
         navigator.mozGetUserMedia ||
           video: true,
           audio: false
         function(stream) {
           if (navigator.mozGetUserMedia) {
             video.mozSrcObject = stream;
           } else {
             var vendorURL = window.URL || window.webkitURL;
             video.src = vendorURL.createObjectURL(stream);
         function(err) {
           console.log("An error occured! " + err);
		 //Get Access to the camera
		if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			// Not adding `{ audio: true }` since we only want video now
			navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
				video.src = window.URL.createObjectURL(stream);;
         video.addEventListener('canplay', function(ev) {
         if (!streaming) {
           height = video.videoHeight / (video.videoWidth / width);
           video.setAttribute('width', width);
           video.setAttribute('height', height);
           canvas.setAttribute('width', width);
           canvas.setAttribute('height', height);
           streaming = true;
         }, false);
         function takepicture() { = "none"; = "block";
         startbutton.innerText= "RETAKE";
         canvas.width = width;
         canvas.height = height;
         canvas.getContext('2d').drawImage(video, 0, 0, width, height);
         var data = canvas.toDataURL('image/jpeg');  //Convert Canvas Image to URL Format(Base64)
		 <!--Save an Image Logic Starts-->
		 <!--var link = document.createElement('a');-->
		 link.innerHTML = 'download image';
		 link.href = data; = sessionStorage.getItem("pkColValue");//"myimage.jpg"; //try giving customer number CIF NO
		 <!--Save an Image Logic Ends-->
         //photo.setAttribute('src', data);
		 // Trigger photo take
         startbutton.addEventListener('click', function(ev) {
    = "block";
    = "none";
           startbutton.innerText= "CAPTURE";
         }, false);

What will more likely occur, is that if it is possible to achieve what you require, someone will help you to make the required changes yourself.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.