在浏览器中使用摄像头

Javascript Jun 28, 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来控制摄像头的方向等。具体可以看mdn的getUserData

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

此时image中的内容就是调用上面代码那一刻camera中捕捉的内容了

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标签的内容就是你录制下来的内容。
    
Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.