javascript实现摄像头拍照预览

2023-08-13 02:23:04 185

摄像头调用实例 varvideo,mediaStreamTrack,canvas;//声明全局变量 //打开摄像头 functiondk(){ video=document.getElementById("v1"); varvideoObj={ "video":true }; varerrBack=function(error){ console.log("Videocaptureerror:",error.code); }; //根据浏览器的不同选取不同的支持 if(navigator.getUserMedia){//Standarda navigator.getUserMedia(videoObj,function(stream){ mediaStreamTrack=typeofstream.stop==='function'?stream :stream.getTracks()[1]; video.src=stream;//获取摄像头抓取的到字节流 video.play();//实时播放摄像头 },errBack); }elseif(navigator.webkitGetUserMedia){//WebKit-prefixed navigator.webkitGetUserMedia(videoObj,function(stream){ mediaStreamTrack=typeofstream.stop==='function'?stream :stream.getTracks()[1]; video.src=window.webkitURL.createObjectURL(stream); video.play(); },errBack); }elseif(navigator.mozGetUserMedia){//Firefox-prefixed navigator.mozGetUserMedia(videoObj,function(stream){ mediaStreamTrack=typeofstream.stop==='function'?stream :stream.getTracks()[1]; video.src=window.URL.createObjectURL(stream); video.play(); },errBack); } } //截图 functionjq(){ canvas=document.getElementById("c1"); varcontext=canvas.getContext("2d"); //将视频当前的页面转换为图片，显示到画板中 context.drawImage(video,0,0,200,202); //把canvas图像转为img图片 /*varsrc=canvas.toDataURL("image/jpeg"); createImg(src);*/ } //关闭摄像头 functiongb(){ mediaStreamTrack.stop(); } //生成图片 /*functioncreateImg(src){ vardv=document.getElementById("dv1"); varimg=document.createElement("img"); img.setAttribute("src",src); img.setAttribute("width",205); img.setAttribute("height",205); dv.appendChild(img); }*/ //上传 /*functionsc(){ $.post('TestServlet',{ "img":canvas.toDataURL().substr(22) },function(data,status){ alert(status!="success"?"图片处理出错！":data=="yes"?"图片上传完成！" :data); }); }*/ input[type="button"]{ border:1pxsolidred; }

javascript实现摄像头拍照预览

热门推荐

随机推荐