วิธีเข้าถึงกล้องบนเว็บแอพหน้าจอหลักของ iOS11

สรุป

เราไม่สามารถเข้าถึงกล้องจากเว็บแอปบนหน้าจอหลักของ iOS11 (รุ่นสาธารณะ) โดยใช้ WebRTC หรือการป้อนไฟล์ตามรายละเอียดด้านล่าง ผู้ใช้ของเราจะเข้าถึงกล้องต่อไปได้อย่างไร?

เราให้บริการหน้าเว็บแอปผ่าน https

อัปเดตเมษายน

ดูเหมือนว่าการเปิดตัว iOS 11.3 แบบสาธารณะจะได้รับการแก้ไขปัญหาและการเข้าถึงกล้องที่ป้อนไฟล์ก็ใช้งานได้อีกครั้ง!

อัปเดตมีนาคม

ตามที่ผู้คนที่นี่กล่าวว่าเอกสารของ Apple แนะนำให้ฟังก์ชั่นกล้องของเว็บแอปจะกลับมาใน 11.3 พร้อมกับพนักงานบริการ นี่เป็นสิ่งที่ดี แต่เรายังไม่แน่ใจว่าเราต้องการให้ทุกคนติดตั้งใหม่อีกครั้งจนกว่าเราจะสามารถทดสอบบน 11.3GM ได้อย่างละเอียด

เฉลยพฤศจิกายน

เราหมดความหวังว่า Apple ต้องการแก้ไขปัญหานี้และก้าวไปข้างหน้า แก้ไขเว็บแอปของเราเพื่อลบฟังก์ชัน "เพิ่มในหน้าจอหลัก" ของ iOS และขอให้ผู้ใช้ที่ได้รับผลกระทบลบไอคอนหน้าจอหลักก่อนหน้านี้

อัปเดต 6 ธันวาคม

iOS 11.2 และ iOS 11.1.2 ไม่ได้รับการแก้ไข

วิธีแก้ปัญหา 21 กันยายน

ดูเหมือนว่าเราสามารถถามลูกค้าปัจจุบันของเว็บแอปได้

• ไม่อัปเกรดเป็น iOS11 - ขอให้โชคดี :)
• ถ่ายภาพด้วยกล้อง iOS แล้วเลือกกลับในเว็บแอป
• รอ ios beta ถัดไป
• ติดตั้งใหม่เป็นหน้าในเบราว์เซอร์ Safari (หลังจากเราลบตรรกะ ATHS)
• เปลี่ยนไปใช้ Android

การป้อนไฟล์

รหัสการผลิตปัจจุบันของเราใช้การป้อนไฟล์ซึ่งใช้งานได้ดีกับ iOS 10 ขึ้นไปเป็นเวลาหลายปี บน iOS11 ทำงานเป็นแท็บ Safari แต่ไม่ใช่จากแอปหน้าจอหลัก ในกรณีหลังนี้กล้องจะเปิดขึ้นและมีเพียงหน้าจอสีดำเท่านั้นจึงไม่สามารถใช้งานได้

   <meta name="apple-mobile-web-app-capable" content="yes">
   ...
   <input type="file" accept="image/*">

WebRTC

Safari 11 บน iOS11 มีการจับสื่อ WebRTCซึ่งยอดเยี่ยมมาก

เราสามารถจับภาพของกล้องลงบนผืนผ้าใบบนหน้าเว็บปกติบนเดสก์ทอปและมือถือโดยใช้ navigator.mediaDevices.getUserMedia ต่อโค้ดตัวอย่างการเชื่อมโยงที่นี่

เมื่อเราเพิ่มหน้าลงในหน้าจอหลักของ iPad หรือ iPhone navigator.mediaDevicesจะกลายเป็นundefinedและใช้ไม่ได้

    <meta name="apple-mobile-web-app-capable" content="yes">
    ...
    // for some reason safari on mac can debug ios safari page but not ios home screen web apps 
    var d = 'typeof navigator : ' + typeof navigator; //object
    d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
    // try alternates
    d += 'typeof navigator.getUserMedia  : ' + typeof navigator.getUserMedia; // undefined
    d += 'typeof navigator.webkitGetUserMedia  : ' + typeof navigator.webkitGetUserMedia; // undefined
    status1.innerHTML = d;

เรามีปัญหาที่ค่อนข้างคล้ายกัน จนถึงตอนนี้วิธีแก้ปัญหาเดียวที่เราทำได้คือลบเมตาแท็กเพื่อให้เป็น "แอปเปิ้ลมือถือเว็บแอปที่รองรับ" และปล่อยให้ผู้ใช้เปิดใน Safari ซึ่งทุกอย่างดูเหมือนจะทำงานได้ตามปกติ

อัปเดต : ในขณะที่การเปลี่ยนแปลงและการโพสต์ที่เผยแพร่ก่อนหน้านี้ทำให้ฉันเชื่อว่า Web Apps ที่ใช้manifest.jsonแทนapple-mobile-web-app-capableจะสามารถเข้าถึงการใช้งาน WebRTC ที่เหมาะสมได้ในที่สุด แต่น่าเสียดายที่สิ่งนี้ไม่เป็นความจริงเนื่องจากคนอื่น ๆ ได้ชี้ให้เห็นและการทดสอบได้รับการยืนยันแล้ว หน้าเศร้า. ขออภัยในความไม่สะดวกที่เกิดจากสิ่งนี้และหวังว่าวันหนึ่งที่โชคดีในกาแลคซีที่ห่างไกล Apple จะให้เราเข้าถึงกล้องในมุมมองที่ขับเคลื่อนโดย WebKit (ที่ไม่ใช่ Safari) ...

ใช่อย่างที่คนอื่น ๆ พูดถึง getUserMedia สามารถใช้ได้โดยตรงใน Safari เท่านั้น แต่ไม่มีใน UIWebView หรือ WKWebView ดังนั้นทางเลือกเดียวของคุณก็น่าเสียดายที่

• การลบออก<meta name="apple-mobile-web-app-capable" content="yes">เพื่อให้ 'แอป' ของคุณทำงานในแท็บ Safari ปกติซึ่งสามารถเข้าถึง getuserMedia ได้
• โดยใช้กรอบเช่น Apache Cordova ที่ให้คุณเข้าถึงกล้องของอุปกรณ์ด้วยวิธีอื่น ๆ

หวังว่า Apple จะลบข้อ จำกัด WebRTC นี้เร็วกว่าในภายหลัง ...

ที่มา:
สำหรับนักพัฒนาที่ใช้ WebKit ในแอปของตน RTCPeerConnection และ RTCDataChannel จะพร้อมใช้งานในมุมมองเว็บใดก็ได้ แต่ขณะนี้การเข้าถึงกล้องและไมโครโฟนยัง จำกัด เฉพาะใน Safari

ข่าวดี! ในที่สุดกล้องก็สามารถเข้าถึงได้จากเว็บแอปบนหน้าจอหลักใน iOS 11.3 เบต้าตัวแรก

ฉันได้สร้าง repo ด้วยไฟล์สองสามไฟล์ซึ่งแสดงให้เห็นว่ามันใช้งานได้:

https://github.com/joachimboggild/uploadtest

ขั้นตอนในการทดสอบ:

1. ให้บริการไฟล์เหล่านี้จากเว็บไซต์ที่เข้าถึงได้จากโทรศัพท์ของคุณ
2. เปิด index.html ใน iOS Safari
3. เพิ่มในหน้าจอหลัก
4. เปิดแอพจากหน้าจอหลัก ตอนนี้หน้าเว็บเปิดแบบเต็มหน้าจอโดยไม่มี UI การนำทาง
5. กดปุ่มไฟล์เพื่อเลือกภาพจากกล้อง

ตอนนี้กล้องควรใช้งานได้ตามปกติและไม่ใช่หน้าจอสีดำ นี่แสดงให้เห็นว่าฟังก์ชันนี้ทำงานได้อีกครั้ง

ฉันต้องเพิ่มว่าฉันใช้ฟิลด์ธรรมดาไม่ใช่ getUserMedia หรือ somesuch ฉันไม่รู้ว่ามันได้ผลหรือเปล่า

เห็นได้ชัดว่ามีการแก้ไขใน "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

อัพเดท 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

ดูเหมือนว่าจะใช้งานได้อีกครั้งใน iOS 11.4 หากคุณใช้ช่องป้อนไฟล์

เมื่อเร็ว ๆ นี้ฉันประสบปัญหาเดียวกันวิธีแก้ปัญหาเดียวที่ฉันคิดขึ้นมาคือเปิดในแอปในเบราว์เซอร์แทนที่จะเป็นโหมดปกติ แต่บน iOS เท่านั้น!

เคล็ดลับคือการสร้างไฟล์ manifest.json 2 ไฟล์ที่มีการกำหนดค่าต่างกัน

ปกติสำหรับ Android และสำหรับทุกอย่างคือ Apple, manifest-ios.json ความแตกต่างเพียงอย่างเดียวจะอยู่ที่คุณสมบัติการแสดงผล

ขั้นตอนที่ 1:เพิ่ม id ลงในแท็กลิงก์ manifest:

<link id="manifest" rel="manifest" href="manifest.json">

ขั้นตอนที่ 2:เพิ่มสคริปต์นี้ที่ด้านล่างของเนื้อหา:

<script>
    let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
    let manifest = document.getElementById("manifest");
    if (isIOS)
      manifest.href = 'manifest-ios.json'
</script>

ขั้นตอนที่ 3:ในmanifest-ios.jsonตั้งค่าการแสดงผลเป็นเบราว์เซอร์

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <---- use this instead of standard
    ...
}

ปัญหาอื่นจะปรากฏขึ้นเช่นการเปิดแอปหลายครั้งในหลายแท็บบางครั้ง

แต่หวังว่ามันจะช่วยพวกคุณได้!