B/S结构项目使用WEBCAM获取当前录像以及图像截取

最新推荐文章于 2023-09-26 10:51:06 发布

置顶宇宙第一帅

最新推荐文章于 2023-09-26 10:51:06 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习心得玩的东西文章标签： html javvascript webcam

本文链接：https://blog.youkuaiyun.com/MyCodeDream/article/details/50978426

学习心得同时被 2 个专栏收录

18 篇文章

订阅专栏

玩的东西

7 篇文章

订阅专栏

本文介绍了如何在B/S架构的项目中利用Webcam实现视频录制和图像截取功能。作者分享了其实现过程中的思考与实践，包括遇到的技术难点以及解决方案。提供了一段关键代码示例，强调必须通过Http协议来查看实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在访问google的时候，发现有一个功能，就是可以进行语音搜索，这个虽然没有发现有多的使用，但是从技术的角度讲还是比较新颖的，我当时就也想实现猪哥哥功能，但是返现实现起来是有一定的难度的，一方面，语音的搜集不是那么接单，第二，语音的分析是需要一个强大的信息采集库的，所以，这个想法，就暂时的给推辞了，而就在最近，我就突发奇想，可不可以在B/S的结构项目中使用实时的录像的功能，最总，经过自己的一番努力，还是实现了其中的功能，

一面是我的实例代码：

<!DOCTYPE html> 
<html> 
	<head> 
		<title> 浏览器webcamera </title> 
		<meta charset="utf-8" />
		<meta name="Generator" content="EditPlus"> 
		<meta name="Author" content="renfufei@qq.com"> 
		<meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera"> 
		<script> 
			// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 
			window.addEventListener("DOMContentLoaded", function() { 
			// canvas 元素将用于抓拍 
				var canvas = document.getElementById("canvas"), 
				context = canvas.getContext("2d"), 
				// video 元素，将用于接收并播放摄像头 的数据流 
				video = document.getElementById("video"), 
				videoObj = { "video": true }, 
				// 一个出错的回调函数，在控制台打印出错信息 
				errBack = function(error) { 
					if("object" === typeof window.console){ 
						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); 
				} 
				// 对拍照按钮的事件监听 
				document.getElementById("snap").addEventListener("click", function() { 
				// 画到画布上 
				context.drawImage(video, 0, 0, 640, 480); 
				}); 
			}, false); 
		</script> 
	</head> 
<body> 
	<div> 
		<!-- 
		声明： 此div应该在允许使用webcam，网络摄像头之后动态生成 
		宽高： 640 *480,当然，可以动态控制啦! 
		--> 
		<!-- 
		Ideally these elements aren't created until it's confirmed that the 
		client supports video/camera, but for the sake of illustrating the 
		elements involved, they are created with markup (not JavaScript) 
		--> 
		<video id="video" width="640" height="480" autoplay></video> 
		<button id="snap">点击拍照</button> 
		<canvas id="canvas" width="640" height="480"></canvas> 
	</div> 
</body> 
</html>

注意：必须通过Http协议才能看到效果！