truy cập webcam trong các trang web

Question

Tôi đang phát triển một ứng dụng web.

Trong trang đăng ký khách của tôi, tôi cần phải truy cập web cam để chụp ảnh khách.

Hình ảnh tôi chụp có thể lưu trữ ở một vị trí được chỉ định.

Cách nào là cách tốt nhất để thực hiện việc này.

Phương thức sử dụng java, JSP, html, tập lệnh java hoặc bất kỳ phương thức nào khác được hoan nghênh.

Answer 1

jQuery Webcam Plugin làm công việc khó khăn cho bạn:

http://www.xarg.org/project/jquery-webcam-plugin/

Answer 2

Trả lời câu hỏi của riêng, như có một cách tốt hơn sử dụng HTML5 có sẵn.

Lựa chọn 1, Truy cập camera mặc định từ hệ thống

HTML

Video Tag 
<br/> 
<div class="camera"> 
    <video id="video">Video stream not available.</video> 
    <button id="startbutton">Take photo</button> 
</div> 
<br/> 
Canvas 
<br/> 
<canvas id="canvas"></canvas> 

Script

var width = 320; 
var height = 0; 
var streaming = false; 

navigator.mediaDevices.getUserMedia({video: true, audio: false}) 
     .then(function (stream) { 
      video.srcObject = stream; 
      video.play(); 
     }) 
     .catch(function (err) { 
      console.log("An error occured! " + err); 
     }); 

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

startbutton.addEventListener('click', function (ev) { 
    takepicture(); 
    ev.preventDefault(); 
}, false); 

clearphoto(); 

function clearphoto() { 
    var context = canvas.getContext('2d'); 
    context.fillStyle = "#AAA"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
} 

function takepicture() { 
    var context = canvas.getContext('2d'); 
    if (width && height) { 
     canvas.width = width; 
     canvas.height = height; 
     context.drawImage(video, 0, 0, width, height); 

     var dataURL = canvas.toDataURL("image/jpeg", 0.95); 
     if (dataURL && dataURL != "data:,") { 
      var fileName = generateImageName(); 
      uploadimage(dataURL, fileName); 
     } else { 
      alert("Image not available"); 
     } 
    } else { 
     clearphoto(); 
    } 
} 

function generateImageName() { 
    ... generate image name logic here ... 
    return imageName; 
} 

function uploadimage(dataurl, filename) { 
    ... upload logic here ... 
} 

Screen bắn

Lựa chọn 2, Cung cấp một danh sách các máy ảnh có sẵn trong hệ thống, và cho phép người dùng chọn máy ảnh.

HTML

<select id="videoSelect"></select> 
    <button id="startCameraButton">Start Camera</button> 
    <br/> 
    Video Tag 
    <br/> 
    <div class="camera"> 
     <video id="video">Video stream not available.</video> 
     <button id="takePictureButton">Take photo</button> 
    </div> 
    <br/> 
    Canvas 
    <br/> 
    <canvas id="canvas"> 
    </canvas> 

Script

var width = 320; 
var height = 0; 
var streaming = false; 
var localstream = null; 

startCameraButton.onclick = start; 
takePictureButton.onclick = takepicture; 

navigator.mediaDevices.enumerateDevices() 
     .then(gotDevices) 
     .catch(function (err) { 
      console.log("An error occured while getting device list! " + err); 
     }); 

function gotDevices(deviceInfos) { 
    while (videoSelect.firstChild) { 
     videoSelect.removeChild(videoSelect.firstChild); 
    } 

    for (var i = 0; i !== deviceInfos.length; ++i) { 
     var deviceInfo = deviceInfos[i]; 
     var option = document.createElement('option'); 
     option.value = deviceInfo.deviceId; 
     if (deviceInfo.kind === 'videoinput') { 
      option.text = deviceInfo.label || 'Camera ' + (videoSelect.length + 1); 
      videoSelect.appendChild(option); 
     } 
    } 
} 

function start() { 
    stopVideo(); 
    clearphoto(); 
    var videoSource = videoSelect.value; 
    var constraints = { 
     audio: false, 
     video: {deviceId: videoSource ? {exact: videoSource} : undefined} 
    }; 
    navigator.mediaDevices.getUserMedia(constraints). 
      then(gotStream).then(gotDevices).catch(handleError); 
} 



function gotStream(stream) { 
    localstream = stream; 
    video.srcObject = stream; 
    video.play(); 
    // Refresh button list in case labels have become available 
    return navigator.mediaDevices.enumerateDevices(); 
} 

function handleError(error) { 
    console.log('navigator.getUserMedia error: ', error); 
} 

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

clearphoto(); 

function clearphoto() { 
    var context = canvas.getContext('2d'); 
    context.fillStyle = "#AAA"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
} 

function takepicture() { 
    var context = canvas.getContext('2d'); 
    if (width && height) { 
     canvas.width = width; 
     canvas.height = height; 
     context.drawImage(video, 0, 0, width, height); 

     var dataURL = canvas.toDataURL("image/jpeg", 0.95); 
     if (dataURL && dataURL != "data:,") { 
      var fileName = generateImageName(); 
      fileName = fileName + ".txt" 
      uploadimage(dataURL, fileName); 
     } else { 
      console.log("Image not available"); 
     } 
    } else { 
     clearphoto(); 
    } 
} 

    function generateImageName() { 
    ... generate image name logic here ... 
    return imageName; 
} 

function uploadimage(dataurl, filename) { 
    ... upload logic here ... 
} 

function stopVideo() { 
    if (localstream) { 
     localstream.getTracks().forEach(function (track) { 
      track.stop(); 
      localstream = null; 
     }); 
    } 
} 

Screen Shot

Tùy chọn 3, cho phép người dùng chọn nguồn âm thanh và video và đầu ra âm thanh

Trong tùy chọn 2, người dùng có thể chọn bất kỳ máy ảnh cụ thể nào. Ngoài ra, nếu người dùng cũng muốn chọn nguồn âm thanh và nguồn đầu ra âm thanh, hãy sửa đổi mã trên bằng các thay đổi bên dưới.

HTML

  audioInputSelect 
      <br/> 
      <select id="audioInputSelect"></select> 
      <br/> 
      audioOutputSelect 
      <select id="audioOutputSelect"></select> 

Script

function gotDevices(deviceInfos) { 
    while (videoSelect.firstChild) { 
     videoSelect.removeChild(videoSelect.firstChild); 
    } 

    for (var i = 0; i !== deviceInfos.length; ++i) { 
     var deviceInfo = deviceInfos[i]; 
     var option = document.createElement('option'); 
     option.value = deviceInfo.deviceId; 
     if (deviceInfo.kind === 'audioinput') { 
      option.text = deviceInfo.label || 'Microphone ' + (audioInputSelect.length + 1); 
      audioInputSelect.appendChild(option); 
     } else if (deviceInfo.kind === 'audiooutput') { 
      option.text = deviceInfo.label || 'Speaker ' + (audioOutputSelect.length + 1); 
      audioOutputSelect.appendChild(option); 
     } else if (deviceInfo.kind === 'videoinput') { 
      option.text = deviceInfo.label || 'Camera ' + (videoSelect.length + 1); 
      videoSelect.appendChild(option); 
     } 
    } 
} 

function start() { 
    stopVideo(); 
    clearphoto(); 
    var audioSource = audioInputSelect.value; 
    var videoSource = videoSelect.value; 
    var constraints = { 
     audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, 
     video: {deviceId: videoSource ? {exact: videoSource} : undefined} 
    }; 
    navigator.mediaDevices.getUserMedia(constraints). 
      then(gotStream).then(gotDevices).catch(handleError); 
}