利用navigator+Video调用摄像头进行录像

以前无聊的时候玩儿过HTML5,感觉里面的很多新标签确实深深震撼了我额。。。。

今天需求那边要做这样一个功能,在微信里面调用摄像头进行拍摄,然后上传。刚开始最先想到的是Video标签,,只要将它的src指定为当前摄像头录制到的视频就可以了。

后来百度了一段,发现还要用上Navigator,具体代码如下:

<html xmlns=""><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) { // Standardnavigator.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-prefixednavigator.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>

搞完之后同事大哥发布到服务器上然后拿手机测试,发现微信里面的浏览器是不支持摄像头调用的。。。额,,然后就我勒个去了。。。。。。。

有用到的小伙伴可以拿到自己网站上玩儿玩儿。。。。

做对的事情比把事情做对重要。

利用navigator+Video调用摄像头进行录像

相关文章:

你感兴趣的文章:

标签云: