js如何调用电脑的摄像头

最新推荐文章于 2024-07-27 22:26:20 发布

过过往往

最新推荐文章于 2024-07-27 22:26:20 发布

阅读量952

点赞数 1

分类专栏： js 文章标签： js

原文链接：https://www.cnblogs.com/jiangcheng-langzi/p/8391497.html

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript和HTML创建一个简单的应用，通过浏览器的摄像头功能获取视频流并实时绘制到canvas上，适合于头像上传和即时拍照场景。注意，代码需部署在服务器以调用摄像头，探讨了浏览器安全隐私限制。

摘要由CSDN通过智能技术生成

闲来无事，用js写了一个调用摄像头的demo，并用canvas显示保存。这个功能很实用，比如上传用户的头像，即时拍照及时上传。
Html:

<video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
	<button id="start">打开摄像头</button>
	<button id="snap">截取图像</button>
	<button id="close">关闭摄像头</button>
</p>

JavaScript:

window.onload = function () {
	var canvas = document.getElementsByTagName('canvas')[0],
		context = canvas.getContext('2d'),
		video = document.getElementsByTagName("video")[0],
		snap = document.getElementById("snap"),
		close = document.getElementById("close"),
		start = document.getElementById("start"),
		MediaStreamTrack;
	start.addEventListener('click', function () {
		if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			navigator.mediaDevices.getUserMedia({
					video: true,
					audio: true
			}).then(function (stream) {
					console.log(stream);
					MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
					video.src=(window.URL).createObjectURL(stream);
					video.play();
			}).catch(function(err){
					console.log(err);
			});
		}else if(navigator.getMedia){
			navigator.getMedia({
				video: true
			}).then(function (stream) {
				console.log(stream);
				MediaStreamTrack=stream.getTracks()[1];
				video.src=(window.webkitURL).createObjectURL(stream);
				video.play();
			}).catch(function(err){
				console.log(err);
			});
		}
	});
	snap.addEventListener('click', function () {
		context.drawImage(video, 0, 0,200,150);
	});
	close.addEventListener('click', function () {
		MediaStreamTrack && MediaStreamTrack.stop();
	});
}