thinkdiff
جمعه 30 خرداد 1393, 10:52 صبح
با سلام
دوستا لطفا این کد های زیر رو در یک فایل .html ذخیره کنید و میبینید که بهتون کار با وب کم رو میده. هم به دردتون میخوره هم من سوالم رو می پرسم :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
#canvas {
width: 500px;
height: 375px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="container">
<video autoplay id="videoElement"></video>
</div>
<canvas id="canvas" width="500" height="375"></canvas>
<input type="button" value="Save" id="save" />
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
// if found attach feed to video element
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
}
var v,canvas,context,w,h;
var imgtag = document.getElementById('imgtag'); // get reference to img tag
var sel = document.getElementById('fileselect'); // get reference to file select input element
document.addEventListener('DOMContentLoaded', function(){
// when DOM loaded, get canvas 2D context and store width and height of element
v = document.getElementById('videoElement');
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
w = canvas.width;
h = canvas.height;
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false; // if no video, exit here
context.drawImage(v,0,0,w,h); // draw video feed to canvas
var uri = canvas.toDataURL("image/png"); // convert canvas to data URI
imgtag.src = uri; // add URI to IMG tag src
}
document.getElementById('save').addEventListener(' click',function(e){
draw(v,context,w,h); // when save button is clicked, draw video feed to canvas
});
var fr;
sel.addEventListener('change',function(e){
var f = sel.files[0]; // get selected file (camera capture)
fr = new FileReader();
fr.onload = receivedData; // add onload event
fr.readAsDataURL(f); // get captured image as data URI
})
function receivedData() {
// readAsDataURL is finished - add URI to IMG tag src
imgtag.src = fr.result;
}
</script>
</body>
</html>
حالا سوال من اینه که من میخوام بازدن یک دکمه این وب کم روشن شه نه موقع لود شدن.خوب برای این که این خط رو به Onclick یک دکمه اضافه کردم. : onClick="onlf();"
بعد این خط رو هم به خط اول کد های js این اسکریپت اصافه کردم : function onlf(){ و یک } هم به آخرش برای این که وقتی دکمه رو زد این کار اجرا بشه.
خوب درست شد اما حالا که تابعیش کردم دیگه دکمه save کار نمیکنه. لطفا کمک کنید.
دوستا لطفا این کد های زیر رو در یک فایل .html ذخیره کنید و میبینید که بهتون کار با وب کم رو میده. هم به دردتون میخوره هم من سوالم رو می پرسم :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
#canvas {
width: 500px;
height: 375px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="container">
<video autoplay id="videoElement"></video>
</div>
<canvas id="canvas" width="500" height="375"></canvas>
<input type="button" value="Save" id="save" />
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
// if found attach feed to video element
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
}
var v,canvas,context,w,h;
var imgtag = document.getElementById('imgtag'); // get reference to img tag
var sel = document.getElementById('fileselect'); // get reference to file select input element
document.addEventListener('DOMContentLoaded', function(){
// when DOM loaded, get canvas 2D context and store width and height of element
v = document.getElementById('videoElement');
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
w = canvas.width;
h = canvas.height;
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false; // if no video, exit here
context.drawImage(v,0,0,w,h); // draw video feed to canvas
var uri = canvas.toDataURL("image/png"); // convert canvas to data URI
imgtag.src = uri; // add URI to IMG tag src
}
document.getElementById('save').addEventListener(' click',function(e){
draw(v,context,w,h); // when save button is clicked, draw video feed to canvas
});
var fr;
sel.addEventListener('change',function(e){
var f = sel.files[0]; // get selected file (camera capture)
fr = new FileReader();
fr.onload = receivedData; // add onload event
fr.readAsDataURL(f); // get captured image as data URI
})
function receivedData() {
// readAsDataURL is finished - add URI to IMG tag src
imgtag.src = fr.result;
}
</script>
</body>
</html>
حالا سوال من اینه که من میخوام بازدن یک دکمه این وب کم روشن شه نه موقع لود شدن.خوب برای این که این خط رو به Onclick یک دکمه اضافه کردم. : onClick="onlf();"
بعد این خط رو هم به خط اول کد های js این اسکریپت اصافه کردم : function onlf(){ و یک } هم به آخرش برای این که وقتی دکمه رو زد این کار اجرا بشه.
خوب درست شد اما حالا که تابعیش کردم دیگه دکمه save کار نمیکنه. لطفا کمک کنید.