html5调用摄像头功能的实现代码
程序员文章站
2023-12-14 13:19:10
这篇文章主要介绍了html5调用摄像头功能的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
... 18-05-07...
前言
前些天，线上笔试的时候，发现需要浏览器同意开启摄像头，感觉像是 js 调用的，由于当时笔试，也就没想到这么多问题。今天闲来无事，看了下自己的 todo，发现有这个调用摄像头的todo，才想到????。网上查了一下，果然 js 有调用摄像头的 api，为此自己写一个 demo ，避免忘记。
正文
调用摄像头
一共有两种实现方式，一种是使用navigator.getusermedia（该特性已经从 web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性），前面一种已经从 web 标准中删除，仅为了向后兼容而存在，第二种是使用navigator.mediadevices.getusermedia(推荐使用),这两种方法 safari 貌似都不支持。。。。
第一种方法navigator.getusermedia用法详见mdn ，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>摄像头调用1</title>
</head>
<body>
<video id="v"></video>
<script>
!(function () {
function usermedia() {
return navigator.getusermedia = navigator.getusermedia ||
navigator.webkitgetusermedia ||
navigator.mozgetusermedia ||
navigator.msgetusermedia || null;
}
if (usermedia()) {
var constraints = {
video: true,
audio: false
};
var media = navigator.getusermedia(constraints, function (stream) {
var v = document.getelementbyid('v');
var url = window.url || window.webkiturl;
v.src = url ? url.createobjecturl(stream) : stream;
v.play();
}, function (error) {
console.log("error");
console.log(error);
});
} else {
console.log("不支持");
}
})();
</script>
</body>
</html>
第二种方法navigator.mediadevices.getusermedia用法详见mdn。navigator.mediadevices.getusermedia 其实和第一种差不多，主要第二种返回是一个 promise 对象，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>摄像头调用2</title>
</head>
<body>
<video id="v"></video>
<script>
!(function () {
// 老的浏览器可能根本没有实现 mediadevices，所以我们可以先设置一个空的对象
if (navigator.mediadevices === undefined) {
navigator.mediadevices = {};
}
if (navigator.mediadevices.getusermedia === undefined) {
navigator.mediadevices.getusermedia = function (constraints) {
// 首先，如果有getusermedia的话，就获得它
var getusermedia = navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getusermedia) {
return promise.reject(new error('getusermedia is not implemented in this browser'));
}
// 否则，为老的navigator.getusermedia方法包裹一个promise
return new promise(function (resolve, reject) {
getusermedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let promise = navigator.mediadevices.getusermedia(constraints);
promise.then(stream => {
let v = document.getelementbyid('v');
// 旧的浏览器可能没有srcobject
if ("srcobject" in v) {
v.srcobject = stream;
} else {
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.url.createobjecturl(stream);
}
v.onloadedmetadata = function (e) {
v.play();
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
})();
</script>
</body>
</html>
拍照
思路是设置一个标志变量 videoplaying 看看是否 video 有在 play，监听拍照按钮的点击事件，如果videoplaying 为 true ，使用一个canvas 获取 video 的宽高（默认 canvas 是不显示的），然后使用 canvas 的drawimage,然后使用 canvas 的 todataurl返回一个 data url，将这个 url，设置在一个 img 标签上即可????
第一种方法navigator.getusermedia实现代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拍照1</title>
</head>
<body>
<button id="take">拍照</button>
<br />
<video id="v" style="width: 640px;height: 480px;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<br />
<img src="http://placehold.it/640&text=your%20image%20here%20..." id="photo" alt="photo">
<script>
!(function () {
function usermedia() {
return navigator.getusermedia = navigator.getusermedia ||
navigator.webkitgetusermedia ||
navigator.mozgetusermedia ||
navigator.msgetusermedia || null;
}
if (usermedia()) {
let videoplaying = false;
let constraints = {
video: true,
audio: false
};
let video = document.getelementbyid('v');
let media = navigator.getusermedia(constraints, function (stream) {
let url = window.url || window.webkiturl;
video.src = url ? url.createobjecturl(stream) : stream;
video.play();
videoplaying = true;
}, function (error) {
console.log("error");
console.log(error);
});
document.getelementbyid('take').addeventlistener('click', function () {
if (videoplaying) {
let canvas = document.getelementbyid('canvas');
canvas.width = video.videowidth;
canvas.height = video.videoheight;
canvas.getcontext('2d').drawimage(video, 0, 0);
let data = canvas.todataurl('image/webp');
document.getelementbyid('photo').setattribute('src', data);
}
}, false);
} else {
console.log("不支持");
}
})();
</script>
</body>
</html>
第二种navigator.mediadevices.getusermedia实现方法:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拍照2</title>
</head>
<body>
<button id="take">拍照</button>
<br />
<video id="v" style="width: 640px;height: 480px;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<br />
<img src="http://placehold.it/640&text=your%20image%20here%20..." id="photo" alt="photo">
<script>
!(function () {
// 老的浏览器可能根本没有实现 mediadevices，所以我们可以先设置一个空的对象
if (navigator.mediadevices === undefined) {
navigator.mediadevices = {};
}
if (navigator.mediadevices.getusermedia === undefined) {
navigator.mediadevices.getusermedia = function (constraints) {
// 首先，如果有getusermedia的话，就获得它
var getusermedia = navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getusermedia) {
return promise.reject(new error('getusermedia is not implemented in this browser'));
}
// 否则，为老的navigator.getusermedia方法包裹一个promise
return new promise(function (resolve, reject) {
getusermedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let videoplaying = false;
let v = document.getelementbyid('v');
let promise = navigator.mediadevices.getusermedia(constraints);
promise.then(stream => {
// 旧的浏览器可能没有srcobject
if ("srcobject" in v) {
v.srcobject = stream;
} else {
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.url.createobjecturl(stream);
}
v.onloadedmetadata = function (e) {
v.play();
videoplaying = true;
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
document.getelementbyid('take').addeventlistener('click', function () {
if (videoplaying) {
let canvas = document.getelementbyid('canvas');
canvas.width = v.videowidth;
canvas.height = v.videoheight;
canvas.getcontext('2d').drawimage(v, 0, 0);
let data = canvas.todataurl('image/webp');
document.getelementbyid('photo').setattribute('src', data);
}
}, false);
})();
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。