getUserMedia API的两个使用案例

XanaHopper 发布于2019-08-20 18:54 / 2936人阅读

摘要：之前在微博看到了的文章通过获取摄像头影像，了解到了这个，觉得挺有意思的，于是亲自试验了一番，做了俩简单的小。简介在的文章中，介绍的是这个，然而我在上查到的是这个已经被废弃了，取而代之的是。

之前在微博看到了@HeeroLaw的文章《通过WebRTC获取摄像头影像》，了解到了getUserMedia这个API，觉得挺有意思的，于是亲自试验了一番，做了俩简单的小DEMO。

getUserMedia简介

在@HeeroLaw的文章中，介绍的是navigator.getUserMedia这个API，然而我在MDN上查到的是这个API已经被废弃了，取而代之的是MediaDevices.getUserMedia。

mediaDevices也是挂在navigator对象下面的，调用方法如下：

navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream) {
  /* use the stream */
}).catch(function(err) {
  /* handle the error */
});

其中myConstraints参数是一个对象，可以指定需要调用的外部媒体设备，目前只有摄像头和麦克风:

// 同时启用麦克风和摄像头
var myConstraints = { audio: true, video: true }

更为详细的参数介绍，例如视频尺寸以及摄像头和帧率等，请参见MediaDevices.getUserMedia()参数

需要注意的是，getUserMedia不支持在非安全的页面内调用，需要https支持，在开发阶段则需要使用localhost域来，分别访问百度和新浪微博然后打开控制台输入下面的代码进行测试:

navigator.mediaDevices.getUserMedia({video:true}).then((stream) => console.log(Object.prototype.toString.call(stream))).catch(error => {console.error(error)})

另外同一域名下首次调用此API需要征求用户同意。

摄像头案例

创建一个video标签

调用getUserMedia将数据显示到video标签

var video = document.querySelector("#video")
var myConstraints = {
  video: {
    facingMode: "user" // 优先调用前置摄像头
  }
}
navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
  // createObjectURL是个非常有用的API，诸位可以多研究研究
  video.src = window.URL.createObjectURL(stream)
  video.play()
}, (error) => {
  console.error(error.name || error)
})

查看在线DEMO

麦克风案例

因为纯粹用一个audio标签来播放麦克风拾取到的声音显得太没特色了，于是我用到了以前写的一个音频可视化库Vudio.js，代码如下:

创建一个canvas来显示音频波形图

通过Vudio.js和getUserMedia来显示麦克风拾取到的音频的波形

var canvas = document.querySelector("#canvas")

navigator.mediaDevices.getUserMedia({
 audio: true
}).then((stream) => {

  // 调用Vudio
  var vudio = new Vudio(stream, canvas, {
    accuracy: 256,
    width: 1024,
    height: 200,
    waveform: {
      fadeSide: false,
      maxHeight: 200,
      verticalAlign: "middle",
      horizontalAlign: "center",
      color: "#2980b9"
    }
  })

  vudio.dance()

}).catch((error) => {
 console.error(error.name || error)
})

查看在线DEMO

海外云主机云服务器直播平台使用的api json使用案例数据分析使用案例两个账号使用一个安全组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84866.html

getUserMedia API及HTML5 调用手机摄像头拍照

摘要：失败回调函数的参数，可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

xiaokai 2019-08-21 17:21 评论0 收藏0
getUserMedia API及HTML5 调用手机摄像头拍照

摘要：失败回调函数的参数，可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

李增田 2019-08-01 17:54 评论0 收藏0
手把手教你如何实现拍照功能

摘要：实现手机拍照功能，纯书写先上图为主，再做详细讲解需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做属性在代码运行时打开页面自动开启不明白直接上代码的提供了访问媒体的能力基于该特性开发者可以不依赖任何浏览器插件下去访问视频和音频等设备如不实现手机拍照功能，纯JS书写 First：先上图为主，再做详细讲解： showImg(https://segmentfault.com/img/...

Chaz 2019-08-26 12:20 评论0 收藏0