捕获视频/音频

PPT地址

长久以来,音频/视频捕获都是网络开发中的“圣杯”。多年来,我们总是依赖于浏览器插件(FlashSilverlight)实现这一点。

依靠 WebRTC(网络即时通信)的大力协助,寻找合适捕获 API 的步伐加快了很多。该规范由 W3C WebRTC 工作组负责监管。Google、Opera、Mozilla 和其他一些公司目前正致力于在自己的浏览器中实施该 API。

MediaDevices.getUserMedia() 与 WebRTC 相关,因为它是通向这组 API 的门户。它提供了访问用户本地相机/麦克风媒体流的手段。

MediaDevices.getUserMedia()

**MediaDevices.getUserMedia()**方法提示用户允许使用一个视频和/或一个音频输入设备,例如相机或屏幕共享和/或麦克风。如果用户给予许可,就返回一个Promise 对象

注意,由于用户不会被要求必须作出允许或者拒绝的选择,所以返回的Promise对象可能既不会触发resolve 也不会触发 reject。

这里有一个 Demo【capturing_audio_video】

【注意】新版本的视频获取接口要用HTTPS协议,否则会抛出错误,当然现在在本地访问通过 localhost, 127.0.0.1 或者文件协议,都可以正常使用

capturing_audio_video.html:28 getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

定义输出媒体

使用video组件输出产生的视频

<style type="text/css">
#video{
width: 320px;
height: 180px;
background-color: #000000;
}
</style>
<video id="video" autoplay="autoplay" controls="controls"></video>

指定请求的媒体类型和相对应的参数

var constraints = {
audio: true,
video: true
};

当然可以指定视频源的一些信息,比如摄像头分辨率,最高、最低、理想的摄像头分辨率,强制使用后置摄像头,采样率。当然你可以使用 getSupportedConstraints 方法获取,浏览器支持哪些配置。

var constraints = {
audio: false,
video: {
width: 160,
height: 90,
facingMode: { exact: "environment" },
frameRate: {
ideal: 10,
max: 15
}
}
};

获取视频源

navigator
.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector('video'); video.srcObject = mediaStream
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(error) {
console.log(error);
});

如此就可以看到摄像头的内容了

收集系统上可用的多媒体输入和输出设备的信息

enumerateDevices 用于收集系统上可用的多媒体输入和输出设备的信息。返回一个 Promise ,如果枚举成功that will be fulfilled with 一个包含MediaDeviceInfo 实例的数组, 它包含了可用的多媒体输入输出设备的信息.

navigator
.mediaDevices
.enumerateDevices()
.then(function(MediaDeviceInfo) {
console.log(MediaDeviceInfo);
})

输出

[
{
"deviceId": "default",
"kind": "audioinput",
"label": "Default",
"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
},
{
"deviceId": "e38a9b92758f008e71510a95aa36957553e2a5ce7febc6e4bcd57798807c1519",
"kind": "audioinput",
"label": "Built-in Microphone",
"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
},
{
"deviceId": "5013c01eb0a704c09d15aa668601f8dfb80f1a33d179b2adcbb64a8fbad5fc62",
"kind": "videoinput",
"label": "FaceTime HD Camera",
"groupId": ""
},
{
"deviceId": "default",
"kind": "audiooutput",
"label": "Default",
"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
},
{
"deviceId": "ba0bb7502f314e3ad61511aa6468c6a48ec679e34e5ebd975852db1d8d3ab3e7",
"kind": "audiooutput",
"label": "Built-in Output",
"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
}
]

有默认值

获取用户支持的Constraints

通过 MediaDevices.getSupportedConstraints() 方法可以返回一个基于 MediaTrackSupportedConstraints 的对象,它包含哪些Constraints属性是浏览器支持的。

navigator
.mediaDevices
.getSupportedConstraints()
{
"aspectRatio": true, //采集比例
"channelCount": true,
"deviceId": true,
"echoCancellation": true,
"facingMode": true,
"frameRate": true,
"groupId": true,
"height": true,
"latency": true, //延迟
"sampleRate": true,
"sampleSize": true,
"volume": true,
"width": true
}

MediaTrackConstraints

  • aspectRatio
  • channelCount
  • deviceId
  • echoCancellation
  • facingMode
  • frameRate
  • groupId
  • height [ConstrainLong]
  • latency: [ConstrainDouble] 音频采样延迟
  • sampleRate
  • sampleSize
  • volume
  • width [ConstrainLong]: 可以是一个对象或者number,对象为{exact:number, ideal: number}

参考资料

前端多媒体(1)——获取摄像头&麦克风的更多相关文章

  1. 升级iOS10之后调用摄像头/麦克风等硬件程序崩溃闪退的问题

    在升级到iOS10之后, 开发过程中难免会遇到很多的坑, 下面是一些常见的坑, 我做了一些整理, 希望对大家开发有帮助: &1. 调用视频,摄像头, 麦克风,等硬件程序崩溃闪退的问题: 要注意 ...

  2. iOS UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  3. Opencv+MFC获取摄像头数据,显示在Picture控件

    分为两步:OpenCV获取摄像头数据+图像在Picture上显示 第一步:OpenCV获取摄像头数据 参考:http://www.cnblogs.com/epirus/archive/2012/06/ ...

  4. C# 封装SDK 获取摄像头的水平角度和垂直角度

    最近需要做一个C#版本的控制终端,控制摄像头,获取摄像头的水平角度和垂直角度 获取当前摄像头的角度,需要调用一个名为NET_DVR_GetDVRConfig的bool类型的函数 在C++中,函数定义: ...

  5. iOS 获取摄像头当前方向

    在做二维码扫描和直播获取视频流的过程中,可能会用到 AVCaptureDevice AVCaptureVideoPreviewLayer AVCaptureSession 这几个参数,其中 1.定义显 ...

  6. onvif获取摄像头的流媒体地址完整流程

    linux设备上的Onvif 实现6:获取摄像头的流媒体地址完整流程 整体流程: Probe: 发现网络摄像头,获取webserver地址 http://192.168.15.240/onvif/de ...

  7. EasyDarwin+ffmpeg进行PC(摄像头+麦克风)流媒体直播服务

    上一回我们描述了用EasyDarwin+ffmpeg进行摄像机直播的过程:ffmpeg推送,EasyDarwin转发,vlc播放 实现整个RTSP直播 我们再进行一个方面的描述,那就是pc摄像头+麦克 ...

  8. UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  9. RK3288获取摄像头的Sensor ID【原创】

    平台信息:内核:linux3.0.68 系统:android/android6.0平台:RK3288 作者:庄泽彬(欢迎转载,请注明作者) 邮箱:2760715357@qq.com 说明:通过I2C总 ...

随机推荐

  1. EasyUI这个框架用了好久了,总结一下遇到的问题和解决方法

    1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法: 我们之所以在页面中,只要书写相应easyui的class,Easyui就能成功渲染页面,这是因为解析器在 ...

  2. Node.js 把抓取到的电影节目列表单发或者群发到QQ邮箱

    代码地址如下:http://www.demodashi.com/demo/12381.html 一.前言 上一节我们演示了如何用Node的各种包去抓取电影天堂最新电影列表,接下来我们会讲解如何发送我们 ...

  3. UML--组件图,部署图

    组件图用于实现代码之间的物理结构,详细来说,就是实现代码交互.通过接口,将不同的软件,程序连接在一起. [理解] 1.组件的定义相当广泛,包含:源码,子系统,动态链接库,Activex控件. 2.组件 ...

  4. 连续调用scanf的问题总结

    对于非常简单的scanf函数,一直使用,但是却是有很多的知识点没有掌握好,现总结如下: 1.多个scanf之后,后序以 scanf("%c",&c) 当程序连续调用scan ...

  5. 我的IT成长史,不以物喜,不以己悲

    http://bbs.51cto.com/thread-1066048-1.html本人87年,出生在北方一座3线城市,从小学就喜欢计算机,带着鞋套去机房练习打英文字母:初中顺理成章的通过了计算机1级 ...

  6. Redis主从同步分析

    一.Redis主从同步原理1.1 Redis主从同步的过程配置好slave服务器连接的master后,slave会建立和master的连接,然后发送sync命令.无论是第一次同步建立的连接还是连接断开 ...

  7. java String概述

    class StringDemo { public static void main(String[] args)  {  String s1 = "abc";//s1 是一个类类 ...

  8. 深入Asyncio(七)异步上下文管理器

    Async Context Managers: async with 在某些场景下(如管理网络资源的连接建立.断开),用支持异步的上下文管理器是很方便的. 那么如何理解async with关键字? 先 ...

  9. Unix环境高级编程—进程关系

    终端登录 网络登录 进程组 getpgrp(void) setpgid(pid_t pid, pid_) 会话: 是一个或多个进程组的集合,通常由shell的管道将几个进程编成一组. setsid(v ...

  10. iOS 跳转到Appstore的链接及二维码

    1.应用内部跳转到Appstore 1.跳转到应用详情 [[UIApplication sharedApplication]openURL:[NSURL URLWithString:@"it ...