Q&A
前提・実現したいこと
PHPでのJavaScriptにて<video>に表示した映像を<canvas>に画像として表示したいと考えています。
発生している問題・エラーメッセージ
<video>に映像は表示されているのですが<canvas>に表示することができません。
エラーメッセージはありません。
該当のソースコード
PHPHTMLjavascript
1<?php 2session_start(); 3 4if(!isset($_SESSION["id"])) { 5 $nologin = "../index.php"; 6 header("Location: {$nologin}"); 7 exit; 8} 9?> 10 11<!doctype html> 12<html lang="ja"> 13<head> 14<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 15</head> 16 17<body> 18<div> 19 <video id="video" width="320px" height="240px" autoplay></video> 20</div> 21<div> 22 <canvas id="canvas"></canvas> 23</div> 24<div> 25 <input type="button" id="takepicture" value="撮影" onclick="takepicture()"> 26</div> 27 28<script> 29var constraints = { video: true, audio: false }; 30var video = document.getElementById('video'); 31navigator.mediaDevices.getUserMedia(constraints) 32.then(function(stream) { 33 video.srcObject = stream; 34}) 35.catch(function(error) { 36 alert(error); 37}); 38 39function takepicture() { 40 var video = document.getElementById('video'); 41 var canvas = document.getElementById('canvas'); 42 var context = canvas.getContext('2d'); 43 44 width = video.getAttribute('width'); 45 height = video.getAttribute('height'); 46 canvas.setAttribute('width', width); 47 canvas.setAttribute('height', height); 48 49 context.drawImage(video, 0, 0, width, height); 50} 51 52</script> 53</body> 54</html>
補足情報（FW/ツールのバージョンなど）
ブラウザはGoogle Chromeを使っています。
回答1件
0
ベストアンサー
drawImageの引数には、単位付き（px)は許してくれないのが理由かと思います。
html
1<video id="video" width="320" height="240" autoplay></video>
追記
失礼しました。途中で回答してしまいました。
上記のように、videoタグのwidth,height属性の値の単位を省略してやるのが一番早いと思います。
変更できない場合は、javascriptでのgetAttribute時に修正してやるか、width,heightの値の指定方法を変更してやればいと思います。
投稿2020/02/08 01:33
編集2020/02/08 01:40
総合スコア46
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/10 01:01