这篇文章主要给大家分享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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用JS怎样做鼠标移过显示二级下拉菜单？

  用JS怎样做鼠标移过显示二级下拉菜单？也就是当当鼠标经过一级菜单时，显示二级菜单，鼠标离开时隐藏。这个效果在很多网站设计中都会看到，小编觉得比较实用，因此分享给大家做个参考，那么接下来我们就看看怎样做吧。

• 如何从0开始搭建开源组件库，方法及操作是什么

  目录前言????目标????搭建开发环境????️生成模板????CSS预处理器????eslint????组件库编译⚡️vite的打包配置⚡️自动生成ts类型文件⚡️样式懒加载与全量加载????文档❤️npm 发布与发布前的测试????测试前言日常使用开源的组件库时我们或多或少的都会做一些自定义的配置来符合实际的设计，当这些设计形成一定规模时，设计狮们就会形成一套

• React中怎样实现页面跳转，有多少方法？

  这篇文章给大家分享的是React中实现页面跳转的方法，文中给大家介绍了三种方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 如何用JS制作九宫格抽奖的功能，思路及方法是什么

  这篇文章主要为大家详细介绍了JavaScript实现抽奖器效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue怎样做多层循环表单验证？

  vue怎样做多层循环表单验证？表单验证我们之前也有了解过，这篇主要给大家分享的是使用vue + el-form 实现的多层循环表单验证的内容，实现代码如下，感兴趣的朋友可以参考。