2013-01-05 37 views
13

Có chế độ xem hiển thị chế độ xem trực tiếp bên trong html (ví dụ: được nhúng trong div) trước khi chúng tôi chụp ảnh bằng JavaScript không? Tôi đã thử PhoneGap nhưng nó hoàn toàn bắt đầu một ứng dụng máy ảnh mới và hoàn toàn di chuyển ra khỏi ứng dụng web html của tôi trước khi trở về nó. Tôi cần một thứ gì đó được nhúng trong ứng dụng của tôiHiển thị chế độ xem máy ảnh bên trong html trong android rồi chụp ảnh

Cảm ơn

+0

Iam cũng phải đối mặt với cùng một vấn đề Bạn đã nhận được giải pháp nào cho điều này..Nếu nhận được bất cứ điều gì Plz Chia sẻ các bình luận có giá trị của bạn với tôi cũng –

+0

@Ema Isabel: Không Erma tôi không tìm thấy giải pháp cho rằng –

+0

Mã Android để giải quyết vấn đề này ???? –

Trả lời

-1

Không có quyền truy cập trực tiếp vào ứng dụng Máy ảnh bằng javascript. Bạn có thể viết một plugin PhoneGap (Cordova) tùy chỉnh để thực hiện điều đó.

+4

câu hỏi là về cách truy cập máy ảnh bằng javascript ... và không truy cập trực tiếp vào 'ứng dụng máy ảnh' ... – user1055604

5

Tôi đã làm điều đó cho một trong các dự án của mình. Kiểm tra navigator.getUserMedia(). Có rất nhiều thứ bạn có thể làm với webcam và trình duyệt của mình, bao gồm cả trò chơi AR! Dưới đây chỉ là một ví dụ cơ bản:

HTML:

<html> 
    <head> 
    </head> 

    <body> 
     <form><input type='button' id='snapshot' value="snapshot"/></form> 
     <video autoplay></video> 
     <canvas id='canvas' width='100' height='100'></canvas> 
     <script type="text/javascript" src="findit.js"></script> 
    </body> 

    </html> 

findit.js

var onFailSoHard = function(e) 
    { 
      console.log('failed',e); 
    } 

    window.URL = window.URL || window.webkitURL ; 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 

    var video = document.querySelector('video'); 

    if(navigator.getUserMedia) 
    { 
     navigator.getUserMedia({video: true},function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     },onFailSoHard); 
    } 

    document.getElementById('snapshot').onclick = function() { 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(video,0,0); 
    } 

Live Demo:

A personal project

More Resources, đây là những gì tôi đã sử dụng:

Webcam Access

Cập nhật:

Giải pháp này chỉ có hiệu lực đối với camera phía trước nếu thiết bị của chúng tôi có một. Về cơ bản nó là một giải pháp "webcam". Không chắc chắn nếu nó sẽ làm việc cho trường hợp của bạn. Chỉ trong trường hợp, hãy kiểm tra các nguồn lực.

+0

Cũng lưu ý rằng hiện tại 'getUserMedia' không được hỗ trợ kém. – PiTheNumber

+0

Chrome đã thêm hỗ trợ cho lựa chọn thiết bị. Hãy kiểm tra ví dụ này https://simpl.info/getusermedia/sources/ – freakTheMighty

+2

Theo [caniuse] (http://caniuse.com/#search=getUserMedia) điều này không hoạt động. Câu hỏi đặt ra cụ thể về việc nhận nguồn cấp dữ liệu trong các thiết bị/thiết bị di động, không chỉ các trình duyệt. – givanse

11

Bạn có thể cài đặt mbppower/CordovaCameraPreview plugin (cho android, ios) trong ứng dụng Cordova/phonegap cho phép tương tác máy ảnh từ mã HTML. Một plugin thực sự tuyệt vời đó là .. Bạn có thể truy cập Các tính năng như:

Bắt đầu xem trước máy ảnh từ mã HTML. Kéo hộp xem trước. Đặt hiệu ứng màu của máy ảnh (Android và iOS), Gửi hộp xem trước quay lại nội dung HTML, Đặt vị trí tùy chỉnh cho hộp xem trước máy ảnh, Đặt kích thước tùy chỉnh cho hộp xem trước và Duy trì tương tác HTML.

Hoặc bạn cũng có thể sử dụng donaldp24/CanvasCamera Plugin cho ứng dụng của bạn nếu nó phù hợp để requirements.Its của bạn được hỗ trợ trong cả hai nền tảng Android và iOS. Tôi đã quan sát, cho iOS của nó làm việc tốt nhưng trong Android nó không hoạt động.

Bây giờ bạn có thể cài đặt plugin CordovaCameraPreview thông qua Online PhoneGap. Vì vậy, mà không sử dụng CLI bạn có thể trực tiếp sử dụng nó thông qua điều này bằng cách thêm

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

trong file config.xml của bạn và tạo ApplicationTemplate.apk/.ipa. Để biết thêm thông tin về việc này, bạn có thể hỏi tôi. Vui vẻ giúp đỡ.

CẬP NHẬT: Ngày 10 tháng 10 năm 2017 Được sử dụng để hoạt động tốt trong thời gian đó nhưng donaldp24/CanvasCamera không còn được duy trì và hiện không hoạt động với phiên bản Cordova mới nhất.

0

Bạn có thể sử dụng camera.getPicture từ cordova-plugin-camera hoặc navigator.device.capture.captureVideo từ cordova-plugin-media-capture.

var getUserMedia = navigator.getUserMedia 
     || navigator.webkitGetUserMedia 
     || navigator.mozGetUserMedia 
     || navigator.msGetUserMedia 
     || navigator.device.capture.captureVideo 
     || navigator.camera 
     || camera.getPicture; 

Hy vọng điều đó sẽ hữu ích.

Các vấn đề liên quan