<!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网页调用
//构造函数 function Box(name,age){ this.name=name; this.age=age; this.run=function(){ return this.name+'--'+this.age; } } var&nbs...
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。通过官网的介绍可以看出是接收服务器发送数据,千万不能和ajax混淆,网上大片博文的介绍对其解读是错误的,导致让我差点觉得这个事件很鸡肋。先看通用案例:html5:<script type=&...
在es5的时候变量只能通过+号拼接,es6种允许将变量放在大括号之中。有点类似php和c#对字符串的操作。 <script type="text/javascript"> &n...
和腾讯合作的项目活动中腾讯要求我们必须隐藏朋友圈分享功能,一直以为没有官方Api,百般查找才在文档中找到,可能是自己不太细心。微信官方文档在jsjdk的"界面操作"中有详细说明:关闭当前网页窗口接口wx.closeWindow();批量隐藏功能按钮接口wx.hideMenuIte...
基本结构:箭头函数左边是参数,右边是返回值//创建func函数let func = num => num;//上面的func函数等价于let oldFunc = function (num) {...
百度统计“网站速度测试”中提示的。需要在html的head中添加如下代码:<meta http-equiv="content-type" content="text/html; charset=UTF-8" /&g...