39,083
社区成员
发帖
与我相关
我的任务
分享
<video id="video" controls="controls" width="80%" heigth="80%" autoplay="" ></video>
<div><button id='picture' style="width: 100%;">PICTURE</button></div>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
var video = document.getElementById("video");
var context = canvas.getContext("2d");
var errocb = function () {
console.log('sth wrong!');
}
if (navigator.getUserMedia) { // 标准的API
navigator.getUserMedia({ "video": true }, function (stream) {
video.src = stream;
video.play();
}, errocb);
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
navigator.webkitGetUserMedia({ "video": true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errocb);
}
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
</script>
你的canvas宽度和高度限制死了
你在页面里加上<meta name="viewport">
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">