Javascript[04天]Web端打打开用户摄像头拍照mediaDevices

0

[04天]Web端打打开用户摄像头拍照mediaDevices

mediaDevices 阅读:50 时间:2022年05月20日

在Web端打打开用户摄像头拍照,是通过navigator对象的新API mediaDevices对象实现。先来一个完整例子:打开用户摄像头播放录制内容,实时拍照下载<!DOCTYPE html> <html lang=&...

在Web端打打开用户摄像头拍照,是通过navigator对象的新API mediaDevices对象实现。

先来一个完整例子:

打开用户摄像头播放录制内容,实时拍照下载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mediaDevices Demo</title>
</head>
<body>
  <p>
    <button id="open">打开</button>
    <button id="close">关闭</button></button>
    <button id="picture">拍照</button></button>
  </p>
  <video></video>
<script>
class MediaDevices{
  constructor(videoDom) {
    if (!this.test()) {
      console.log('浏览器不支持')
      return
    }
    this.video = videoDom
    this.stream = null
  }

  // 测试浏览器是否已经支持该API
  test() {
    return !!navigator?.mediaDevices?.getUserMedia
  }
  // 打开并获取摄像头数据
  getUserMedia() {
    const constraints = window.constraints = {
      audio: true, // 获取音频
      video: true, // 获取视频
    }
    navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      stream.onended = function() {
        console.log('数据流结束')
      }
      this.stream = stream
      this.video.srcObject = stream
      this.video.play()
    })
    .catch(error => {
      console.log(error)
    })
  }
  // 拍照并下载
  takePicture() {
    const canvas = document.createElement('canvas')
    canvas.width = this.video.videoWidth
    canvas.height = this.video.videoHeight
    const ctx = canvas.getContext('2d')
    ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height)
    const a = document.createElement('a')
    a.href = canvas.toDataURL()
    a.download = new Date().getTime() + '.jpg'
    a.dispatchEvent(new MouseEvent('click'))
  }
  // 停止
  stop() {
    this.video.pause()
    this.stream.getTracks().forEach(track => track.stop())
  }
}

const md = new MediaDevices(document.querySelector('video'))
document.querySelector('#open').addEventListener('click', () => {
  md.getUserMedia()
})
document.querySelector('#close').addEventListener('click', () => {
  md.stop()
})
document.querySelector('#picture').addEventListener('click', () => {
  md.takePicture()
})
</script>
</body>
</html>


分解

class MediaDevices{
  constructor(videoDom) {
    if (!this.test()) {
      console.log('浏览器不支持')
      return
    }
    this.video = videoDom
    this.stream = null
  }

  // 测试浏览器是否已经支持该API
  test() {
    return !!navigator?.mediaDevices?.getUserMedia
  }
  // ...
}

先创建一个类, 接收显示视频用的video标签,并写一个测试浏览器是否支持 mediaDevices API 的方法


class MediaDevices{
  // ...
  // 打开并获取摄像头数据
  getUserMedia() {
    const constraints = window.constraints = {
      audio: true, // 获取音频
      video: true, // 获取视频
    }
    navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      stream.onended = function() {
        console.log('数据流结束')
      }
      this.stream = stream
      this.video.srcObject = stream
      this.video.play()
    })
    .catch(error => {
      console.log(error)
    })
  }
  // ...
}

添加核心方法

使用 mediaDevices.getUserMedia 方法打开摄像头,并将获取到的流做为srcObject 加载到video标签。然后播放video。


class MediaDevices{
  // ...
  // 拍照并下载
  takePicture() {
    const canvas = document.createElement('canvas')
    canvas.width = this.video.videoWidth
    canvas.height = this.video.videoHeight
    const ctx = canvas.getContext('2d')
    ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height)
    const a = document.createElement('a')
    a.href = canvas.toDataURL('image/jpeg', 1.0)
    a.download = new Date().getTime() + '.jpg'
    a.dispatchEvent(new MouseEvent('click'))
  }
  // ...
}

再添加一个拍照的方法

创建一个离屏画布,然后抓取视频帧画到画布上。

创建一个a标签,使用toDataURL API将画布中的图像转为DataURL做为a标签的href属性

对a标签触发一个点击事件,触发浏览器执行下载

至此打开摄像头拍照的目的达成


class MediaDevices{
  // ...
  // 停止
  stop() {
    this.video.pause()
    this.stream.getTracks().forEach(track => track.stop())
  }
}

最后再添加一个停止视频播放,关闭摄像头方法。


扩展

mediaDevices.getDisplayMedia() 获取用户屏幕

提示用户选择显示器或显示器的一部分(例如窗口)以捕获为MediaStream 以便共享或记录。返回解析为MediaStream的Promise

提示:可将上例中的 getUserMedia 方法 替换为 getDisplayMedia 方法进行体验


扩展资料查阅: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^