First:web
须要注意的是这里的摄像头是主要是经过浏览器中的一个叫作Navigator属性在JS代码运行时打开页面自动开启
不明白?直接上代码!canvas
// 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能够有些同窗对这个参数不怎么理解不怕 一会截图送上, 还有就是失败的回调,在此不作过多讲解。
Second:
建立两个标签固然是咱们的video 和 button按钮咯具体代码以下显示:api
<video src="" id="video" controls autoplay></video> <button id="btn">拍照</button>
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函数是怎么来的实际上是:
在作最后总结以前,先把总体代码奉上:
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的运用
结尾:app
以前并非很理解navigator标签的运用,可是通过本身的此次经历相信有了必定的了解至于Navigator的更多应用我会在笔记中再详细的去整理,但愿各位看客们可以满意