WebRTC的createObjectURL影像讀取失效

webrtc getusermedia createobjecturl

純真的人 2019-01-29 11:30:03 ‧ 5743 瀏覽

分享至

其實我對WebRTC有再追蹤.
https://ithelp.ithome.com.tw/questions/10192363
大致上了解問題~
以前WebRTC的教學網站，是有教使用createObjectURL去抓影像~
不過因為createObjectURL的緩存洩漏的漏洞，被封鎖使用了。
所以instascan.min.js這函數就失效了
出現以下除錯訊息

instascan.min.js:9 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at e.<anonymous> (instascan.min.js:9)
    at t (instascan.min.js:7)
    at Generator._invoke (instascan.min.js:7)
    at Generator.e.(anonymous function) [as next] (https:.../instascan.min.js:7:16311)
    at t (instascan.min.js:7)
    at r (instascan.min.js:7)
    at instascan.min.js:7

後來找到Demo網站，發現他已經改寫讀取影像的方法了，用電腦、手機看都沒有問題~
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;
}

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

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