<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>录制</title> <script src="js/jquery.min.js"></script> </head> <body> <video src="" id="video"></video> <button id="rec">开始录制</button> <button id="camera">拍照</button> <!--canvs绘制--> <canvas width="640" height="480" id="outrec"></canvas> <!--base64绘制--> <img id="imgvideo" width="640" height="480" src="" /> <script type="text/javascript"> var video = document.getElementById("video"); //视频dom元素 //001.开启摄像头 $('#rec').click(function() { //视频获取 var Devicestate = navigator.mediaDevices.getUserMedia({ audio: true, video: true }) Devicestate.then(function(mediaStream) { video.src = window.URL.createObjectURL(mediaStream); console.log(mediaStream) video.onloadedmetadata = function(e) { video.play(); }; }); //用户拒绝使用,或者没有摄像头 Devicestate.catch(function(err) { console.log(err.name); }); }); //002.点击拍照按钮 $('#camera').click(function() { //视频转换到canvs var outrec = document.getElementById("outrec"); var outreccon = outrec.getContext("2d"); outreccon.drawImage(video, 0, 0, 640, 480); var img = outrec.toDataURL("image/jpeg", 0.5) $('#imgvideo').attr('src', img); }); </script> </body> </html>
需要注意参考w3c查看兼容性,另外谷歌浏览器只允许https网页调用
由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称) exam...
WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!-- 三个核心方法  ...
捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="...
TmodJS是一套完整的前端模块框架。 虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。...
<!-- 三个核心方法 openDatabase:这个方法使用现有数据库或创建...
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...