HTML5——利用navigator+Video调用摄像头进行录像
2015-03-30 19:57
351 查看
以前无聊的时候玩儿过HTML5,感觉里面的很多新标签确实深深震撼了我额。。。。
今天需求那边要做这样一个功能,在微信里面调用摄像头进行拍摄,然后上传。刚开始最先想到的是Video标签,只要将它的src指定为当前摄像头录制到的视频就可以了。
后来百度了一段,发现还要用上Navigator,具体代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function (error) { console.log("Video capture error: ", error.code); }; // if (navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function (stream) { video.src = stream; video.play(); }, errBack); } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed引擎 navigator.webkitGetUserMedia(videoObj, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if (navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function (stream) { video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } }, false); </script> </head> <body> <form id="form1" runat="server"> <div> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> </div> </form> </body> </html>
搞完之后同事大哥发布到服务器上然后拿手机测试,发现微信里面的浏览器是不支持摄像头调用的。。。额,,然后就我勒个去了。。。。。。。
有用到的小伙伴可以拿到自己网站上玩儿玩儿。。。。
相关文章推荐
- HTML5——利用navigator+Video调用摄像头进行录像
- 利用html5调用本地摄像头拍照上传图片
- 利用html5调用本地摄像头拍照上传图片
- html5 调用摄像头进行拍照
- 利用html5调用本地摄像头拍照上传图片
- 利用html5调用本地摄像头拍照上传图片[转]
- 利用HTML5的Video进行视频截图并保存到本地
- service中调用摄像头在无页面显示的情况下进行录像
- 利用html5调用本地摄像头拍照上传图片
- 如何调用S60的系统摄像头功能进行拍照与摄像?zz
- 利用com调用ie进行html解析
- 利用js调用后台php进行数据处理原码
- 利用java反射机制对方法进行调用
- 实现asp程序调用摄像头并控制摄像头进行拍照
- Flex中不使用FelxPrintJob通过ExternalInterface直接调用JavaScript利用浏览器本身的功能进行打印
- 利用C++Builder 中OLE自动化功能实现调用Word进行报表制作
- Flex中如何利用Camera.getCamera()和VideoDisplay#attachCamera()函数在VideoDisplay中显示用户摄像头内容
- 用c#调用摄像头做录像功能
- VFP调用API来控件USB摄像头,实现拍照或录像。
- 利用js调用后台php进行数据处理原码