จะเข้าถึงกล้องของมือถือจากเว็บแอพได้อย่างไร?

ในแอปพลิเคชันเว็บ (ไม่ใช่แอปเนทีฟ) สำหรับโทรศัพท์มือถือฉันต้องการถ่ายรูปและอัปโหลด แต่ฉันไม่ต้องการใช้ Adobe Flash มีวิธีการทำเช่นนี้?

ใน iPhone iOS6 และจาก Android ICS เป็นต้นไป HTML5 มีแท็กต่อไปนี้ซึ่งช่วยให้คุณถ่ายภาพจากอุปกรณ์ของคุณ:

 <input type="file" accept="image/*" capture="camera">

Capture สามารถใช้ค่าเช่นกล้องวิดีโอและเสียง

ฉันคิดว่าแท็กนี้จะใช้ไม่ได้กับ iOS5 แน่นอนไม่แน่ใจ

อย่างน้อยทุกวันนี้กับ android มันค่อนข้างง่าย เพียงใช้แท็กอินพุตไฟล์ปกติและเมื่อผู้ใช้คลิกโทรศัพท์จะถามว่าผู้ใช้ต้องการใช้กล้องถ่ายรูป (หรือตัวจัดการไฟล์ ฯลฯ ) เพื่ออัพโหลดไฟล์หรือไม่ เพียงถ่ายภาพด้วยกล้องและมันจะถูกเพิ่มและอัพโหลดโดยอัตโนมัติ

ไม่มีความคิดเกี่ยวกับ iphone บางทีใครบางคนสามารถรู้เรื่องนั้นได้ แก้ไข: Iphone ทำงานในทำนองเดียวกัน

ตัวอย่างแท็กอินพุต:

<input type="file" accept="image/*" capture="camera">

เพียงแค่อัปเดตสิ่งนี้มาตรฐานตอนนี้คือ:

<input type="file" name="image" accept="image/*" capture="environment">

เพื่อเข้าถึงกล้อง (ด้านหลัง) ที่หันเข้าหาสิ่งแวดล้อมและ

<input type="file" name="image" accept="image/*" capture="user">

สำหรับกล้อง (ด้านหน้า) ของผู้ใช้ หากต้องการเข้าถึงวิดีโอให้แทนที่ "วิดีโอ" สำหรับ "รูปภาพ" ในชื่อ

ทดสอบกับ iPhone 5c, รัน iOS 10.3.3, เฟิร์มแวร์ 760, ทำงานได้ดี

https://www.w3.org/TR/html-media-capture/

Safari & Chrome บน iOS 6+ และ Android 2.2+ รองรับ HTML Media Capture ซึ่งช่วยให้คุณถ่ายภาพด้วยกล้องของอุปกรณ์หรือเลือกรายการที่มีอยู่:

<input type="file" accept="image/*">

นี่คือวิธีการทำงานบน iOS 10:

Android 3.0+ และ Safari บน iOS10.3 + รองรับcaptureคุณสมบัติที่ใช้ในการข้ามไปยังกล้องโดยตรง

<input type="file" accept="image/*" capture>

capture="camera"(สตริง) และaccept="image/*;capture=camera"(พารามิเตอร์) เป็นส่วนหนึ่งของข้อมูลจำเพาะเก่าและถูกแทนที่ด้วยcapture (บูลีน) คำแนะนำผู้สมัคร W3C

เอกสารประกอบการสนับสนุน: หนังสือ O'Reilly 2013และการทดสอบของฉัน

มีฟีเจอร์ HTML5 ใหม่สำหรับการเข้าถึงกล้องอุปกรณ์เนทีฟ - "getUserMedia API"

หมายเหตุ: HTML5 สามารถจัดการการจับภาพจากหน้าเว็บในอุปกรณ์ Android (อย่างน้อยในเวอร์ชั่นล่าสุดดำเนินการโดย Honeycomb OS แต่ไม่สามารถจัดการกับ iPhone ได้บน iPhone และ iOS 6)

คุณสามารถใช้ WEBRTC แต่น่าเสียดายที่เว็บเบราว์เซอร์ทั้งหมดไม่รองรับ ลิงค์ด้านล่างนี้จะแสดงให้เห็นว่าเบราว์เซอร์รองรับอะไร http://caniuse.com/stream

และลิงค์นี้จะช่วยให้คุณเข้าใจวิธีการเข้าถึง (โค้ดตัวอย่าง) http://www.html5rocks.com/en/tutorials/getusermedia/intro/

AppMobi HTML5 SDK เคยสัญญาว่าจะเข้าถึงการทำงานของอุปกรณ์เนทีฟรวมถึงกล้องจากแอพที่ใช้ HTML5 แต่ไม่ได้เป็นของ Google อีกต่อไป ให้ลองใช้คำตอบจาก HTML5แทนโพสต์นี้แทน

คุณจะต้องใช้getUserMediaเพื่อเข้าถึงกล้อง

บทช่วยสอนนี้แสดงข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึงกล้องของอุปกรณ์จากเบราว์เซอร์: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

หมายเหตุ: ใช้งานได้กับอุปกรณ์ Android ส่วนใหญ่และใน iOS ใน Safari เท่านั้น

ควรสังเกตว่ามีการใช้งานคุณลักษณะด้านความปลอดภัยซึ่งต้องการให้แอปนั้นรันในเครื่องภายใต้ localhost หรือผ่าน SSL เพื่อให้ GetUserMedia () ทำงานได้

ฉันค้นพบสิ่งนี้เมื่อลองการสาธิตหลายครั้งที่มีอยู่และผิดหวังเมื่อพวกเขาไม่ได้ทำงาน! โปรดดู: ข้อ จำกัด ด้านความปลอดภัยใหม่

ฉันไม่คิดว่าคุณทำได้ - มีAPI แบบ W3Cเพื่อรับเสียงหรือวิดีโอ แต่ยังไม่มีการนำไปใช้กับระบบปฏิบัติการมือถือรายใหญ่ ๆ

วิธีที่ดีที่สุดอันดับสองตัวเลือกเดียวคือไปกับคำแนะนำของ Dennis ในการใช้ PhoneGap นี่จะหมายความว่าคุณต้องสร้างแอปในเครื่องและเพิ่มไปยังร้านค้า / ตลาดมือถือ

ฉันไม่รู้วิธีเข้าถึงกล้องของโทรศัพท์มือถือจากเว็บเบราว์เซอร์โดยไม่มีกลไกเพิ่มเติม (เช่นแฟลชหรือคอนเทนเนอร์บางประเภทที่อนุญาตให้เข้าถึง API ฮาร์ดแวร์)

สำหรับหลังดู PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

ด้วยวิธีนี้คุณจะสามารถเข้าถึงกล้องอย่างน้อยบนอุปกรณ์ iOS และ Android