html5调取摄像头
2016-03-04 13:47
645 查看
话不多说,直接贴代码。
温馨提示:这个代码 必须放在服务器环境中才可以运行,你可以在本地配个虚拟的服务器。
代码如下:
<video id="video" autoplay=""style='width:640px;height:480px'></video>
<div><button id='picture' style="width: 100%;">拍照</button></div>
<canvas id="canvas" width="640" height="480"></canvas>
<img src="" id="img" width="64" height="48">
温馨提示:这个代码 必须放在服务器环境中才可以运行,你可以在本地配个虚拟的服务器。
代码如下:
<video id="video" autoplay=""style='width:640px;height:480px'></video>
<div><button id='picture' style="width: 100%;">拍照</button></div>
<canvas id="canvas" width="640" height="480"></canvas>
<img src="" id="img" width="64" height="48">
<script type="text/javascript"> var video = document.getElementById("video"); var context = canvas.getContext("2d"); var errocb = function () { console.log('sth wrong!'); } if (navigator.getUserMedia) { // 标准的API navigator.getUserMedia({ "video": true }, function (stream) { video.src = stream; video.play(); }, errocb); } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API navigator.webkitGetUserMedia({ "video": true }, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errocb); } document.getElementById("picture").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); var dataUrl = canvas.toDataURL(); document.getElementById("img").src = dataUrl; }); </script>
相关文章推荐
- HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能
- html5去掉元素交互时出现的背景色
- macbook 放flash发烫,转html5
- HTML5写的简单登录页面
- canvas绘制图形API(一)
- html5 web数据存储
- html5实现正在加载中样式
- HTML5开发手机项目-个人总结(转)
- html5兼容IE placeholder问题
- HTML5新增的主体元素和新增的非主体结构元素
- html5的改变
- HTML5与HTML4的区别
- UC星座占卜H5
- H5应用,看各家的脑洞~
- HTML5面试题-b
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- 各种分享的接口
- 【H5学习】在MAC中利用文本编辑H5
- HTML5 学习笔记
- 前端试题-HTML5新特性(2)