iT邦幫忙

0

HTML5 由Chrome打開手機鏡頭掃QRCode

目前已知可以透過instascan這個js完成

但在ios/android中 好像還沒有完美解決方案

不知道有沒有相關經驗的大神可以聊聊..

2 個回答

0
純真的人
iT邦高手 1 級 ‧ 2019-01-23 14:48:00

ios應該還沒有開放webrtc(現在新手機不知道可不可以)
android可以~

參考..
https://ithelp.ithome.com.tw/articles/10205709?sc=iThelpR

看更多先前的回應...收起先前的回應...

恩恩 這篇我有爬到文
不過我點開該版大demo網頁有報錯 鏡頭不會出來

https://d1dwq032kyr03c.cloudfront.net/upload/images/20190123/20061369vMAUlbgPOw.png
因為instascan.js裡面的createObjectURL屬性失效了吧..
變成無法取得影像來源

但測試安卓手機是可以抓到資料~
筆電的網頁是失敗的
好像有人提供解決辦法~你看看能不能改instascan.js內容
https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url

然後我還發現..webrtc規定網址協定,必須是https才可以使用..

沒錯!! 確實要 https

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

2017年11月就不支援此作法了..(被廢掉了..)
恩..試過其他範例~都無法播影像..= =a

找到都可以開的方式了~
https://simpl.info/getusermedia/

<!DOCTYPE html>
<html>
<head>
	<title>getUserMedia示例</title>
	  <style>
    video {
      object-fit: cover;
    }

    @media (min-width: 1000px) {
      video {
        height: 480px;
      }
    }
  </style>
</head>
 
<body>
WebRTC 影像測試
<br />https://ithelp.ithome.com.tw/questions/10192363
<hr>
<video autoplay playsinline></video>
<script >
'use strict';

var constraints = {
  video: true
};

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

function handleSuccess(stream) {
  window.stream = stream; // only to make stream available to console
  video.srcObject = stream;
  video.play();
}

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

navigator.mediaDevices.getUserMedia(constraints).
  then(handleSuccess).catch(handleError);
</script>
</body>
 
</html>

https://ithelp.ithome.com.tw/upload/images/20190129/20061369CHCY98VzVB.png

0
jan2003535
iT邦新手 5 級 ‧ 2019-01-25 14:18:39

ios在ios11已開放WebRTC 僅在safari中可使用
可至webkit中尋找各種safari api開發情形

建議可以到webrtc官網的sample參考原始碼

目前在android與ios上使用並沒太大的問題

感謝大大回覆

我要發表回答

立即登入回答