<canvas style="display: none;"></canvas>
<button id="capture">snapshot</button>
<script >
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var img = document.querySelector('img');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
var snapshot = function () {
alert('开始拍照');
console.log(localMediaStream);
if (localMediaStream) {
alert('拍照了');
ctx.drawImage(video, 0, 0);
img.src = canvas.toDataURL('image/png');
console.log(canvas.toDataURL('image/webp'));
console.log(img.src);
}
};
var sizeCanvas = function () {
setTimeout(function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
img.width = video.videoWidth;
img.height = video.videoHeight;
}, 100);
};
var btnCapture = document.getElementById('capture');
btnCapture.addEventListener('click', snapshot, false);
navigator.mozGetUserMedia(
{video: true},
function (stream) {
console.log(window.URL);
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
sizeCanvas();
},
function () {
alert('your browser does not support getUserMedia');
}
);
</script>
各位大神好!这是从网上找来的代码,在ff里面运行之后,点击snapshot之后,img的url是“data ,”,能不能说明一下是什么原因?
另外,其实之前在ff里成功了,但是不知道为什么重启ff之后又失败了,小白求指教,希望各位大大勿喷。
2 回复