JavaScript四角描画
Q&A
Closed
解決したいこと
下図のようにビデオ映像に赤い四角いフレームを二か所描画したいです
該当するソースコード
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://unpkg.com/tesseract.js@v2.0.0-beta.1/dist/tesseract.min.js"></script>
<link rel="stylesheet" href="css/stylesheet2.css">
</head>
<body>
<video id="player" controls></video>
<button id="capture">Capture</button>
<canvas id="snapshot" width="320" height="240"></canvas>
ED
<textarea id="result1" style="width:320px;height:40px;"></textarea>
DS
<textarea id="result2" style="width:320px;height:40px;"></textarea>
<script>
const player = document.getElementById('player')
const snapshotZone = document.getElementById('snapshot')
const captureButton = document.getElementById('capture')
const result1 = document.getElementById('result1')
const result2 = document.getElementById('result2')
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
player.srcObject = stream
})
captureButton.addEventListener('click', function() {
const context = snapshot.getContext('2d')
context.drawImage(player, 0, 0, snapshotZone.width, snapshotZone.height)
// Tesseract.recognize(snapshotZone, 'jpn', { logger: m => console.log(m) }) // 日本語
Tesseract.recognize(snapshotZone, 'eng', { logger: m => console.log(m) }) // 英語
.then(({ data: { text } }) => {
result1.value = text
result2.value = text
})
})
Resources
</script>
</body>
</html>
0 likes
