JavaScript 如何在浏览器中使用摄像头


Posted in Javascript onDecember 02, 2020

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 如何在浏览器中使用摄像头的详细内容,更多关于JavaScript 浏览器使用摄像头的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
chrome调试javascript详解
Oct 21 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
JavaScript实现简单动态表格
Dec 02 #Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 #Javascript
JavaScript实现网页跨年倒计时
Dec 02 #Javascript
JavaScript async/await原理及实例解析
Dec 02 #Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 #Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP中PDO的错误处理
2011/09/04 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
用原生js做单页应用
2017/01/17 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
生活部的活动方案
2014/08/19 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL