这篇文章主要给大家分享JavaScript怎样实现摄像头使用的内容，本文的实例是实现在浏览器中实现摄像头的拍照录像功能，那么具体怎样实现呢？下面我们来具体看看实现代码。

    1.获得摄像头权限（本文使用chrome）

    首先确保你运行以下js所在的url是https协议的或者localhost的：

 const constrains = {
   video: true,
   audio: true
  }
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
   console.log('得到stream的类型是MediaStream')
  })
  // 在一些老的浏览器上的话：
  // navigator.webkitGetUserMedia
  // navigator.mozGetUserMedia

    之后你的浏览器会有弹出框，告诉你你的浏览器想要访问camera，问你是否允许。
    此外，这里的constrains可以设置分辨率的最小、理想和最大值，还可以在手机端通过设置facingMode来控制摄像头的方向等。

    2.将得到的stream：MediaStream给video, camera实现直播效果

 const video = document.createElement('video');
 //document.body.appendChild(video)
 const constrains = {
   video: true,
   audio: true
  }
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
  video.srcObject = stream;
  video.play();
  })

    此时video将播放camera实时录制下来的内容

    3.照相

 // 展示相片的image标签
 const image = document.createElement('image')
 // canvas会读取video中的内容，然后输出（有点类似于给video截图）
 const canvas = document.createElement('canvas')
 const video = document.getElementById('video');
 const context = canvas.getContext('2d')
 context.drawImage(video, 0, 0, canvas.height, canvas.width)
 // 此时将canvas生成的图片转换成一个data url
 const url = canvas.toDataURL()
 image.src = url

    4.录像

    需要在2.MediaStream给video的基础上做些修改

 const constrains = {
   video: true,
   audio: true
  }
 let mediaRecorder
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
  mediaRecorder = new MediaRecorder(stream)
  })
 
 startRecord() {
  mediaRecorder.start()
  mediaRecorder.ondataavailable = e => {
   chunks.push(e.data)
  }
 }

 stopRecord() {
  mediaRecorder.stop()
  return new Promise(resolve => {
   mediaRecorder.onstop = e => {
    const blob = new Blob(chunks, { type: 'video/ogg; codecs=opus' })
    const audioURL = window.URL.createObjectURL(blob)
    resolve(audioURL)
   }
  })
 }

 // video标签用来展示录制下来的内容
 const video = document.createElement('video');
 //document.body.appendChild(video)

 // 开始录像
 startRecord()

 // do something....，比方说这里搞两个button、一个开始录影，一个结束录影

 // 结束录影
 stopRecord().then(videoUrl => {
  video.src = videoUrl
 })
 // 此时video标签的内容就是你录制下来的内容。

    以上就是关于JavaScript怎样实现摄像头使用的介绍，本文代码具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习JS有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue页面渲染中key的作用是什么？vue页面渲染实例分享

  文本主要给大家分享的是关于vue页面渲染中key的使用，下面有key的作用和用法介绍，以及实例，具有一定的借鉴价值，感兴趣的朋友可以参考学习。

• 如何掌握vue-router基础知识及其应用

  这篇文章主要介绍了Vue路由vue-router详细讲解指南，对vue-router感兴趣的同学，可以参考下

• JS有多少方法可以判断数组，什么方法好？

  根据构造函数判断（妈妈）instanceofconstructor根据原型对象判断（爸爸）__proto__Object.getPrototypeOf()Array.prototype.isPrototypeOf()根据Object的原型对象判断（祖先

• 使用原生JavaScript来实现星星闪烁效果的代码示例

  本文实例为大家分享了js实现星星闪烁效果的具体代码，供大家参考，具体内容如下。使用JavaScript能够实现很多酷炫的效果，这篇文章就给大家分享下用原生JS实现星星闪烁的效果，用作星空背景动画一定很具个性和炫酷。感兴趣的朋友就继续往下看吧。

• vue项目中怎样进行rem替换px的操作？

  vue项目中怎样进行rem替换px的操作？rem和px都是针对字体大小的，一些朋友对于rem和px的替换比较好奇，下面小编就给大家分享rem替换px的实例，有需要的朋友借鉴参考，下面我们一起来看一看吧。