以前无聊的时候玩儿过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调用摄像头进行录像
原文地址:http://blog.csdn.net/lhc1105/article/details/44754259