HTML5 Camera(摄像头) 和 Video(视频)控制
来源:互联网 发布:云南大学软件学院图片 编辑:程序博客网 时间:2024/06/06 16:25
本文属于吴统威的博客原创文章,转载:http://www.wutongwei.com/front/infor_showone.tweb?id=103
最近写了一个上传头像的功能,主要是使用了HTML5的方法来开发.主要从两个方面处理.一是通过input文件控件,二是通过摄像头,今天我们主要是从摄像头来处理.那我们开始怎么从浏览器中获取摄像头的操作.
首先我们先编写HTML代码
<video id="video" width="640" height="480" autoplay></video><button id="snap">拍照</button><canvas id="canvas" width="640" height="480"></canvas>
首要确认下你的浏览器是否支持video和canvas,否则是不支持这个功能的,我们创建了一个640x480的视频和画板.
下面我们加入javascript代码来控制video
window.addEventListener("DOMContentLoaded", function() {// 获取基本的元素,设置.var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var video = document.getElementById("video");var videoObj = { "video": true };var errBack = function(error) {console.log("Video capture error: ", error.code); };// 获取摄像头的方式if(navigator.getUserMedia) { // 标准navigator.getUserMedia(videoObj, function(stream) {video.src = stream;video.play();}, errBack);} else if(navigator.webkitGetUserMedia) { // WebKit浏览器navigator.webkitGetUserMedia(videoObj, function(stream){video.src = window.webkitURL.createObjectURL(stream);video.play();}, errBack);}else if(navigator.mozGetUserMedia) { // Firefox浏览器navigator.mozGetUserMedia(videoObj, function(stream){video.src = window.URL.createObjectURL(stream);video.play();}, errBack);}}, false);
现在的浏览器获取摄像头流的方式是不一样的,因为之前没有统一的标准,浏览器商使用各自处理方式,所以我们获取相关元素后,做相关的处理.
其实在这里,浏览器会提示你是否允许或拒绝使用摄像头,点允许就可以显示到页面上了,否则就不可以.
下面我们对摄像头进行拍照,给拍照按钮,加入事件
document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 640, 480);});
也就是将数据放入到画板中,这样就显示了拍照的图片了.通过画板获取图片的64位数据,然后通过这个数据进行上传功能.拍照和上传头像就可以完成了
本文属于吴统威的博客原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=103
0 0
- HTML5 Camera(摄像头) 和 Video(视频)控制
- HTML5中js控制video视频和分段播放
- [HTML5] Video 标签播放及控制视频
- Video---HTML5视频video
- Html5新属性audio音频和video视频的控制详解(controls)
- Html5之audio音频和video视频的控制详解(controls)
- HTML5-音频audio和视频video标签
- html5声频audio和视频video
- .net中捕获摄像头视频的方式及对比(How to Capture Camera Video via .Net)
- .net中捕获摄像头视频的方式及对比(How to Capture Camera Video via .Net)
- net 中捕获摄像头视频的方式及对比(How to Capture Camera Video via .Net)
- .net中捕获摄像头视频的方式及对比(How to Capture Camera Video via .Net)
- html5 video视频标签
- HTML5视频标签video
- html5视频<video>
- HTML5视频video
- html5-video视频播放
- HTML5 Video(视频)
- 23种设计模式之原型模式
- Ubuntu 14.04~14.10 Linux 3D桌面完全教程,显卡驱动安装方法,compiz特效介绍,常见问题解答
- jsp文件头部出现红叉解决方法The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
- 升级spring和hibernate到4遇到的问题总结
- Hadoop——重命名文件
- HTML5 Camera(摄像头) 和 Video(视频)控制
- 5.6.2 重写父类的方法
- android 一个SharedPreferences用法的例子
- 23种设计模式之模版方法模式
- Java基础(20,21)IO流
- 使用zookeeper实现服务路由和负载均衡
- 23种设计模式之中介者模式
- 23种设计模式之观察者模式
- 23种设计模式之命令模式