实现手机拍照功能，纯JS书写
First：
- 先上图为主，再做详细讲解：
需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做Navigator属性在JS代码运行时打开页面自动开启
不明白？直接上代码！
// html 5? 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.如navigator.mediaDevices.getUserMedia
//不同浏览器的api：
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
if (navigator.mediaDevices || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMedia({
video: true,
audio: true,
}, (stream) => {
console.log(stream)
}, (err) => {
console.log(err)
})
}以上就是代码的具体呈现，大部分已加入功能注释，很容易理解，如果还不理解只能去先了解下navigator属性了
1.代码的前半段getUserMedia函数中的操作是为了实现兼容，很好理解因为必须保证自己的代码可以在很多浏览器是无差别运行
2.代码的第二部分IF语句中则是为了调用getUserMedia函数并且参数是一个对象加两个函数的方式，其中对象的话就是媒体标签 video和audio 两个为TRUE说明都要开启 紧接着就是两个函数一个是成功的回调其中实参为stream可以有些同学对这个参数不怎么理解不怕 一会截图送上， 还有就是失败的回调，在此不做过多讲解。
- 以下是关于Stream的信息具体如图中所示：
- 相信很多小伙伴已经看见了 我console.log打印出后湿一个叫做MediaStream的对象
- 接下来，进入第二步
Second:
创建两个标签当然是我们的video 和 button按钮咯具体代码如下显示：
<video src="" id="video" controls autoplay></video>
<button id="btn">拍照</button>- 光有标签肯定是不行的接下来是具体的JS代码的实现：
function success(stream) {
console.log(stream)
let $video = document.querySelector("#video")
let url = window.URL.createObjectURL(stream)
console.log(url)
$video.src = url
// $video.srcObject = stream
}
document.querySelector("#btn").onclick = function() {
let el = document.createElement("canvas")
el.width = 500;
el.height = 300
el.style.display = "none"
document.querySelector("body").appendChild(el)
let canvas = el.getContext("2d")
canvas.drawImage(document.querySelector("#video"), 0, 0, 500, 300)
var url = el.toDataURL(‘image/jpeg‘);
var img = document.createElement("img")
img.src = url
document.querySelector("body").appendChild(img)
document.body.removeChild(el)
}小伙伴们肯定很纳闷这个success函数是怎么来的其实是：
- 很明显我把之前的箭头函数换个了一个成功的回调函数主要是处理video的src问题诞生的
在做最后总结之前，先把整体代码奉上：
Third
<body>
<video src="" id="video" controls autoplay></video>
<button id="btn">拍照</button>
<script>
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
if (navigator.mediaDevices || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMedia({
video: true,
audio: true
}, success, (err) => {
console.log(err)
})
}
function success(stream) {
console.log(stream)
let $video = document.querySelector("#video")
let url = window.URL.createObjectURL(stream)
console.log(url)
$video.src = url
// $video.srcObject = stream
}
document.querySelector("#btn").onclick = function() {
let el = document.createElement("canvas")
el.width = 500;
el.height = 300
el.style.display = "none"
document.querySelector("body").appendChild(el)
let canvas = el.getContext("2d")
canvas.drawImage(document.querySelector("#video"), 0, 0, 500, 300)
var url = el.toDataURL(‘image/jpeg‘);
var img = document.createElement("img")
img.src = url
document.querySelector("body").appendChild(img)
document.body.removeChild(el)
}
console.log(window.navigator.userAgent)
</script>
</body>如上所示就是整体代码，不长但实现了我们最基础的拍照功能，其实是对navigator和stream的运用
结尾：
之前并不是很理解navigator标签的运用，但是经过自己的这次经历相信有了一定的了解至于Navigator的更多应用我会在笔记中再详细的去整理，希望各位看客们能够满意