iT邦幫忙

0

WebRTC的createObjectURL影像讀取失效

其實我對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>

https://ithelp.ithome.com.tw/upload/images/20190129/200613695Xe1dam7Ml.png

更多來源介紹:
https://developer.mozilla.org/zh-TW/docs/Web/API/MediaDevices/getUserMedia


1 則留言

0
satomi
iT邦新手 5 級 ‧ 2019-02-13 14:48:12

謝謝大大
希望有peerconnection跟ice server的教學
現在再研究webrtc這塊 有點不太懂

我要留言

立即登入留言