การเข้าถึงกล้องผ่านเบราว์เซอร์

150

เรากำลังสร้างเว็บไซต์ HTML5 สำหรับมือถือและจำเป็นต้องเข้าถึงกล้องผ่านเว็บเบราว์เซอร์โดยไม่ต้องเป็นแอพพื้นฐาน เราประสบปัญหาในการทำให้งานนี้ใน iOS มีใครรู้วิธีแก้ปัญหาสำหรับเรื่องนี้?

ios html camera

— จูเลีย
แหล่งที่มา

124

คุณสามารถลองสิ่งนี้:

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

แต่มันต้องเป็น iOS 6 ขึ้นไปจึงจะทำงานได้ ที่จะให้บทสนทนาที่ดีสำหรับคุณในการเลือกที่จะถ่ายรูปหรืออัปโหลดจากอัลบั้มของคุณเช่น

Screenhot

ตัวอย่างสามารถพบได้ที่นี่: การจับข้อมูลกล้อง / รูปภาพโดยไม่มี PhoneGap

— Xeroxoid
แหล่งที่มา

5

นี่คือสุดยอดบน Android เช่นกัน!

— Matt

1

การสาธิตที่ดีสำหรับการอัปโหลดไปยังเซิร์ฟเวอร์ ใครรู้วิธีการแก้ไขนี้เพื่อบันทึกภาพไปยังอัลบั้มท้องถิ่นบนอุปกรณ์?

— K.Niemczyk

2

ปัญหาเดียวก็คือว่าอย่างน้อยบน iPhone (iOS 7.0.4) 'image.jpg'อย่างน้อยในช่วงเวลาที่มันสร้างภาพชั่วคราวชื่อเสมอ ดังนั้นหากคุณอัปโหลดภาพสองสามภาพในรูปแบบเดียวกันภาพเหล่านั้นจะเขียนทับกันเนื่องจากชื่อเดียวกันเว้นแต่คุณจะทำอะไรเพื่อเปลี่ยนชื่อรูปภาพโปรดระวัง!

— เบียร์

@ K.Niemczyk: คุณเคยคิดแบบนั้นเหรอ? ถ้าเป็นเช่นนั้นฉันจะมีความสนใจในการแก้ปัญหา ฉันพบสิ่งนี้: dev.w3.org/2009/dap/camera (ดูตัวอย่าง 6-7 สำหรับที่เก็บข้อมูลในเครื่อง)

— lamarant

1

สุกใส นี่คือซอสำหรับทุกคนที่ต้องการให้รหัสนี้ทดสอบการทำงานบนอุปกรณ์ของพวกเขา

— Simon East

33

ตั้งแต่ปี 2015 ตอนนี้ใช้งานได้แล้ว

<input type="file">

นี่จะขอให้ผู้ใช้อัปโหลดไฟล์ใด ๆ บน iOS 8.x นี่อาจเป็นวิดีโอกล้องถ่ายรูปกล้องถ่ายรูปหรือภาพถ่าย / วิดีโอจาก Photo Library

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

นี่คือข้างต้น แต่ จำกัด การอัปโหลดไปยังภาพถ่ายจากกล้องหรือไลบรารีเท่านั้นไม่มีวิดีโอ

— ไซม่อนตะวันออก
แหล่งที่มา

1

มีวิธีใดที่จะ จำกัด ผู้ใช้ไม่ให้เลือกไฟล์จากคลังรูปภาพ? ฉันต้องการยอมรับเฉพาะภาพที่เพิ่งถ่ายใหม่

— Daryl

@Daryl ไม่ได้อยู่ใน iOS Android รองรับcaptureคุณสมบัติที่ทำเช่นนั้น ดูไวยากรณ์ที่ถูกต้องสำหรับการจับสื่อ HTML

— Octavian Naicu

ฉันจะปิดป๊อปอัพถ่ายรูปหรือวิดีโอและคลังภาพนี้หลังจากที่ผู้ใช้ไม่ได้คลิก

— Pritish

ดูเหมือนว่าฟังก์ชั่นวิดีโอจะไม่มีอีกต่อไป?

— Martian2049

25

ใน iOS6, Apple รองรับสิ่งนี้ผ่าน<input type="file">แท็ก ฉันไม่สามารถหาการเชื่อมโยงที่มีประโยชน์ในการจัดทำเอกสารของนักพัฒนาแอปเปิ้ล แต่มีตัวอย่างที่นี่

ดูเหมือนว่าภาพซ้อนทับและฟังก์ชั่นขั้นสูงยังไม่พร้อมใช้งาน แต่ควรใช้งานได้หลายกรณี

แก้ไข: w3c มีสเปคที่ดูเหมือนว่า iOS6 Safari จะใช้ชุดย่อยของ captureแอตทริบิวต์สะดุดตาที่ขาดหายไป

— user295691
แหล่งที่มา

10

ฉันคิดว่าอันนี้ใช้งานได้ การบันทึกวิดีโอหรือเสียง

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

หรือ (วิธีการใหม่)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

หากไม่เป็นไปได้ว่าจะใช้งานได้กับ ios6 สามารถดูรายละเอียดเพิ่มเติมได้ที่สื่อผู้ใช้

— siniradam
แหล่งที่มา

4

Picup app เป็นวิธีการถ่ายภาพจากเพจ HTML5 และอัปโหลดไปยังเซิร์ฟเวอร์ของคุณ มันต้องมีการเขียนโปรแกรมเพิ่มเติมบางอย่างบนเซิร์ฟเวอร์ แต่นอกเหนือจาก PhoneGap ฉันยังไม่พบวิธีอื่น

— rakensi
แหล่งที่มา

5

ใน iOS8 คุณไม่จำเป็นต้องใช้ Picup อีกต่อไป HTML5 รองรับ <input type = "file" accept = "image / *" id = "capture" capture = "camera"> ตรวจสอบแล้วใน Safari และ Chrome

— rakensi

1

คำถามนี้มีอายุสองสามปีแล้ว แต่ในเวลานั้นมีความเป็นไปได้เพิ่มเติมเช่นการเข้าถึงกล้องโดยตรงแสดงภาพตัวอย่างและถ่ายภาพสแนปชอต (เช่นสำหรับการสแกนรหัส QR)

นี้นักพัฒนา Googleบทความให้คำอธิบายในเชิงลึกของทั้งหมด (?) วิธีที่ว่าจะได้รับข้อมูลภาพ / กล้องเข้าไปในโปรแกรมประยุกต์บนเว็บจาก "การทำงานทุกที่" (แม้จะอยู่ในสก์ท็อปเบราว์เซอร์) เพื่อ "งานเฉพาะในโมเดิร์นขึ้นไป - วันที่อุปกรณ์มือถือพร้อมกล้อง " พร้อมกับเคล็ดลับที่มีประโยชน์มากมาย

วิธีการอธิบาย:

ขอ URL
ใส่ไฟล์ (ครอบคลุมโพสต์อื่น ๆ ส่วนใหญ่ที่นี่)
ลากและวาง (มีประโยชน์สำหรับเบราว์เซอร์เดสก์ท็อป)
วางจากคลิปบอร์ด
เข้าถึงกล้องแบบโต้ตอบ (จำเป็นถ้าแอพพลิเคชั่นต้องการแสดงความคิดเห็นทันทีในสิ่งที่ "เห็น" เช่นรหัส QR)

— คริสโต
แหล่งที่มา