HTML5 由Chrome打開手機鏡頭掃QRCode

instascan webrtc

henrylin0914 2019-01-23 14:04:27 ‧ 3737 瀏覽

分享至

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

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

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

純真的人

iT邦大師 1 級 ‧ 2019-01-23 14:48:00

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

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

回應 6
分享
檢舉

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

henrylin0914 iT邦新手 5 級 ‧ 2019-01-23 16:30:54 檢舉

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

純真的人 iT邦大師 1 級 ‧ 2019-01-23 16:59:19 檢舉

因為instascan.js裡面的createObjectURL屬性失效了吧..
變成無法取得影像來源

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

純真的人 iT邦大師 1 級 ‧ 2019-01-23 17:42:27 檢舉

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

henrylin0914 iT邦新手 5 級 ‧ 2019-01-28 14:16:32 檢舉

沒錯!! 確實要 https

純真的人 iT邦大師 1 級 ‧ 2019-01-28 18:35:01 檢舉

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

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

純真的人 iT邦大師 1 級 ‧ 2019-01-29 10:00:35 檢舉

找到都可以開的方式了~
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>