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 相关文章推荐
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JS中的phototype详解
Feb 04 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
Javascript实现打鼓效果
Jan 29 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php 静态变量的初始化
2009/11/15 PHP
PHP 强制下载文件代码
2010/10/24 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python gdal安装与简单使用
2019/08/01 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
思想专业自荐信范文
2013/12/25 职场文书
公司拓展活动方案
2014/02/13 职场文书
总会计师岗位职责
2014/02/19 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
SQL基础的查询语句
2021/11/11 MySQL