I'm using ar.js library to load my camera on website.
Now I want to use canvas to capture screen from camera. But I got error like title.
Here is what I tried to do:
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<body style="margin: 8px;">
<div id="wrapper">
<canvas style='visibility:hidden;' id='my-canvas'>
<a-scene id="my-camera" embedded arjs>
</a-scene>
<a-entity camera></a-entity>
</div>
</body>
<script>
window.onload = function() {
var camera = document.getElementById('my-camera');
var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');
context.drawImage(camera, 400, 400);
window.location = canvas.toDataURL("image/png");
}
</script>
</html>
My expected result is a new tab with capture image. But it got error:
Uncaught TypeError: Failed to execute 'drawImage' on
'CanvasRenderingContext2D': The provided value is not of type
'(CSSImageValue or HTMLImageElement or SVGImageElement or
HTMLVideoElement or HTMLCanvasElement or ImageBitmap or
OffscreenCanvas)'
at window.onload
How I can solve this?
Thank you very much!
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
