IE与非IE浏览器调用PC摄像头拍摄并且上传

需要下载源码以及相关文件的可以到（不好意思，之前上传的不知道怎么回事就没了）

http://download.csdn.net/detail/u013946285/9886280 中下载

一，flash调用摄像头

在IE中对HTML5的支持不是很好，所以在IE中调用摄像头使用的是FLASH，只要IE中安装Flash插件即可，页面代码如下：

使用Object、embed标签获取flash并且调用摄像头

<object style="z-index: 100" id="My_Cam" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
                codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
                height="400" viewastext="在线拍照" width="500">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="movie" value="../../js/MyCamera.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="wmode" value="transparent" />
                <embed style="z-index: 100" align="middle" allowscriptaccess="sameDomain" bgcolor="#ffffff" height="400"
                    name="My_Cam" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high"  wmode="transparent"
                    src="../../js/MyCamera.swf" type="application/x-shockwave-flash" width="500"></embed>
   	</object>

点击允许即可，页面效果如下：

点击拍照后，通过MY_CAM （Object标签ID）获取document[id]后调用GetBase64Code()获取base64，传入后台通过BASE64Decoder转换成图片即可。

二，HTML5调用摄像头

在非IE浏览器下，可以使用HTML5调用摄像头完成拍照上传操作，在html页面代码如下：

<video id="video" width="500" height="400" autoplay ></video>
	<canvas id="canvas" width="500" height="400" style="display:none;"></canvas>

通过加载js代码，会通过html5调用摄像头，js代码如下：

//Put event listeners into place
	window.addEventListener("DOMContentLoaded", function() {
		// Grab elements, create settings, etc.
		    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); 
			};
		// Put video listeners into place
		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);

页面效果如flash中展示一样，点击拍照按钮后，首先把拍照画在画布上，然后从画布中取得数据，并且将数据转换为base64，js代码如下：

//拍照画在画布上
	context.drawImage(video,0,0,500,400);
	var canvas = document.getElementById("canvas"); 
	//从画布上获取照片数据
	var imgData = canvas.toDataURL();
	//将图片转换为Base64
	var base64Data = imgData.substr(22);

传入后台通过BASE64Decoder转换成图片即可。以上方法完全通过实际测试！

以上方法都通过测试，如下图（IE):（选择允许）

下面是非IE的浏览器，如下图（非IE）选择“共享选中的设备”

经过实际测试支持ie与非ie的浏览器，其他浏览器就不上传了太麻烦啦

IE与非IE浏览器调用PC摄像头拍摄并且上传

猜你喜欢