从0打造音视频直播系统
李超
前新东方音视频直播技术专家,前沪江音视频架构师
立即订阅
2827 人已学习
课程目录
已完结 40 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 5G的到来将会为音视频插上飞翔的翅膀
免费
WebRTC 1对1通话 (23讲)
01 | 原来通过浏览器访问摄像头这么容易
02 | 如何通过WebRTC进行音视频设备检测呢?
03 | 如何使用浏览器给自己拍照呢?
04 | 可以把采集到的音视频数据录制下来吗?
05 | 原来浏览器还能抓取桌面?
06 | WebRTC中的RTP及RTCP详解
07 | 你竟然不知道SDP?它可是WebRTC的驱动核心!
08 | 有话好商量,论媒体协商
09 | 让我们揭开WebRTC建立连接的神秘面纱
10 | WebRTC NAT穿越原理
11 | 如何通过Node.js实现一套最简单的信令系统?
12 | RTCPeerConnection:音视频实时通讯的核心
13 | 在WebRTC中如何控制传输速率呢?
14 | 如何打开/关闭音视频?
15 | WebRTC中的数据统计原来这么强大(上)
16 | WebRTC中的数据统计原来这么强大(下)
17 | 如何使用Canvas绘制统计图表(上)?
18 | 如何使用Canvas绘制统计图表(下)?
19 | WebRTC能不能进行文本聊天呢?
20 | 原来WebRTC还可以实时传输文件?
21 | 如何保证数据传输的安全(上)?
22 | 如何保证数据传输的安全(下)?
23 | 实战演练:通过WebRTC实现一个1对1音视频实时直播系统
WebRTC多人音视频实时通话 (7讲)
24 | 多人音视频实时通讯是怎样的架构?
25 | 那些常见的流媒体服务器,你该选择谁?
26 | 为什么编译Medooze Server这么难?
27 | 让我们一起探索Medooze的具体实现吧(上)
28 | 让我们一起探索Medooze的具体实现吧(下)
29 | 如何使用Medooze 实现多方视频会议?
30 | 实战演练:通过WebRTC实现多人音视频实时互动直播系统
支持上万人同时在线的直播系统 (8讲)
31 | 一对多直播系统RTMP/HLS,你该选哪个?
32 | HLS:实现一对多直播系统的必备协议
33 | FLV:适合录制的多媒体格式
34 | 如何使用Nginx搭建最简单的直播服务器?
35 | 如何构建云端一对多直播系统?
36 | 如何使用 flv.js 播放 FLV 多媒体文件呢?
37 | 如何使用 video.js 播放多媒体文件?
38 | 实战推演:带你实现一个支持万人同时在线的直播系统
结束语 (1讲)
结束语 | 路漫漫其修远兮,吾将上下而求索
从0打造音视频直播系统
登录|注册

02 | 如何通过WebRTC进行音视频设备检测呢?

李超 2019-07-18
使用过音视频会议或在线教育等实时互动软件的同学都知道,在打开摄像头(Camera)或麦克风(Micphone)的时候,首先要对其进行检测,检测的内容包括:
电脑 / 手机上都有那些音视频设备?
我们选中的音视频设备是否可用?
以手机为例,它一般会包括前置摄像头和后置摄像头。我们可以根据自己的需要,选择打开不同的摄像头。当然,手机上不单有多个摄像头,麦克风的种类就更多了, 如:
系统内置麦克
外插的耳机
蓝牙耳机
……
以上这些设备,我们都可以通过手动或自动的方式打开它们。
那么,WebRTC 是否提供了相关的接口,以便我们查询自己机子上都有哪些音视频设备呢?答案是肯定的。
下面我们就来看看如何使用浏览器下 WebRTC API 来显示我们的音视频设备吧。

WebRTC 处理过程

在正式讲解之前,咱们先回顾一下 WebRTC 的整体处理过程图,以便让你清楚地知道咱们这篇文章在整个处理过程中的位置。
WebRTC 1 对 1 音视频实时通话过程示意图
上面这幅图与第一篇文章中的图几乎是一模一样的。其差别在于,我将图中两个音视频设备检测模块置红了。
这样,我们本文所讲的内容在整个 WebRTC 处理过程中的位置就一目了然了!

音视频设备的基本原理

既然说到音视频设备,那么我们再顺便介绍一下音视频设备的基本工作原理,对于这些设备工作原理的了解,会为你后续学习音视频相关知识提供很大的帮助。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《从0打造音视频直播系统》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(20)

  • Keep-Moving
    想问一下,后续的实例代码也都是js语言的吗?

    作者回复: 基本都是,服务端会有一点 C/C++的

    2019-07-18
    1
    2
  • 一步
    我这通过 navigator.mediaDevices.enumerateDevices() 获取到的设备列表想请教下老师:
    1: 对于每个设备 还有个 groupId ,这个字段是干什么用的? 每一组的设备还有特殊的含义吗?
    2: 获取的设备分为 InputDeviceInfo 和 MediaDeviceInfo ,这里 InputDeviceInfo 是指输入设备信息,那么MediaDeviceInfo(下面的kind:都是 "audiooutput" 没有 videooutput)是指输出的设备信息吗?

    作者回复: 举个例子,对于耳机,它即是音频输入设备又是音频输出设备,因此它们属于同一个 groupID,你可以自己做个实验验证一下哈。对于第二个问题不同的浏览器表现不一样,其中chrome与webrtc规范是最接近的,你可以用chrome实验一下,是可以区分出音频的输入与输出设置的。

    2019-07-18
    2
  • 李跃爱学习
    老师音频采样率解释得很清楚,可是采样大小没有深入解释,能否补充一下,不同采样大小意味着什么差别?

    作者回复: 如果采样大小太小的话,你的声音的振幅又很大,这时就会对声音产生损失呀!

    2019-07-18
    2
    1
  • SherwinFeng
    小白的基本思路是这样的:
    通过enumerateDevices()遍历所有的输入输出设备列表,如果当前设备的id和想要访问的设备id一致,就通过某个函数使用它。

    作者回复: 调用那个函数呢?

    2019-11-19
    3
  • 月光伴奏
    我本地测试不用https也能拿到lable 哈哈

    作者回复: 本地是可以的,但真正的产品不会放在本地。另外,只测试本地有可能很多环节在真实环境是是打不通的。

    2019-11-15
  • style
    老师我打印了下devices信息,有两点不明白
    kind=audioinput label= id=default
    kind=audioinput label= id=communications
    kind=audioinput label= id=afab9796f6f60aa5d0a7c6604619ccbf452e5abfbf33a7adf76839f480ae3a14
    kind=audiooutput label= id=default
    kind=audiooutput label= id=communications
    kind=audiooutput label= id=8e2cdf7151acd5c488d56bb1b397dcf23063d4cdf7a3a39b3a9c723090073c6b
     kind=audiooutput label= id=d1c85beda42b8586f603e24335eec7e430d88320a91a99c4eee3d2eecedd581c
    1,我把电脑上的耳机,麦都拔下来了,但还是输入和输出设备
    2,我也授权访问麦克风了,但是我打印的label始终为空

    作者回复: 你要在你的音频设置管理里边看,耳机是外摄,还是内置扬声器。另外你有没有使用https?

    2019-08-06
    1
  • 曙光
    1 我测试的结果没有videooutput(显示器不算么?)
    2 default和communications 有啥区别?如何显示它们的id信息?
    3 ()是lable,老师说需要HTTPS才能看到,有其他方法么?
    谷歌浏览器,测试结果如下:
    audioinput:(): id = default
    audioinput:(): id = communications
    audioinput:(): id = 101a8.....
    videoinput:(): id = f9b4.....
    audiooutput:(): id = default
    audiooutput:(): id = communications
    audiooutput:(): id = 71b3....

    作者回复: 显示器明明是输出设备,啥时候变成了输入设备哈?只能用 HTTPS...,不要在这方面浪费时间了,在国外买个云服务器(花不了几个钱的),这样可以省去域名备案的时间。能用钱解决的问题就不要用时间去解决,因为这些时间可以用来挣更多的钱哈

    2019-07-29
  • Sunsmile
    老师,js可以实现音量柱吗?怎样获取音量柱数据的呢?

    作者回复: 可以,需要使用 AudioContext,你可以查一下相关信息

    2019-07-23
    1
  • Reco
    我也是 mac 环境,我以为接入耳机后id也会发生变化。把label打出来就看到label变了。。
    老师我还有个问题,Safari只有两个,分别是 内建麦克风 和 FaceTime 高清摄像头(内建)。没看到有audioOutput,是权限问题吗?

    作者回复: 是的, safari这块是有这个问题,目前各浏览器的实现上还有一些区别

    2019-07-23
  • Reco
    老师好,我想问一下这个列表里的 audioOutput 有耳机吗?我接入耳机和拔掉耳机打印出来的设备数量没有变化。

    作者回复: 有耳机呀,你用的什么设备测试的?我在 mac 环境下,chrome 浏览器没有问题。

    2019-07-23
  • 麦晓杰alwaysu
    学习打卡!!

    作者回复: 打卡!大卡!

    2019-07-23
  • 赵健
    需要注意的是,出于安全原因,除非用户已被授予访问媒体设备的权限,否则 label 字段始终为空 --- 老师,您好,不太明白何为用户已被授予访问媒体设备的权限?比如,第一节课里面的电脑的摄像头已经被打开了,这个还不算有访问设备的权限吗?

    作者回复: 要满足两个条件,一是使用https;二是调用getUserMedia

    2019-07-21
  • 熊出没
    怎么把这里面的代码用起来 JS还是太陌生了

    作者回复: 首先代码部分我会放到github上,下周一你就可以看到了。其次我想你是对如何发布写的H5页面不熟悉,这块我还会再写一篇简短的文章放出来。耐心等待!

    2019-07-20
  • tommy_zhang
    怎么实现摄像头的关闭操作?

    作者回复: 从stream获取的 track后,调stop方面,可以去试一试。我想你应该可以自己解决这个问题哈!

    2019-07-20
  • 恋着歌
    在调用 getUserMedia 的时候,可以通过 MediaStreamConstraints 参数可以指定采集设备的deviceId。但是这样只能切换输入设备。

    作者回复: 为啥?如果你有多个输出设备切换不了?

    2019-07-18
  • 移动端收到web端的视频显示不完全,居中截取,请问怎么把web端的视频全部显示出来

    作者回复: 没有这种情况,一定是你自己写的逻辑有问题,再仔细找找原因!

    2019-07-18
  • 一步
    老师 我这里就是用 Chrome 进行实验的, navigator.mediaDevices.enumerateDevices() 返回的设备信息,有时候是 MediaDeviceInfo,InputDeviceInfo 这两个有什么区别呢?

    作者回复: MediaDeviceInfo 表是所有设备信息,InputDeviceInfo表式输入设备信息,MediaDeviceInfo 包含 InputDeviceInfo。

    2019-07-18
  • Geek_miao
    排查设备这部分,能不能加上代码说明一下

    作者回复: 原理已经说的很清楚了,至于排查的细节逻辑属于业务逻辑,这不是本专栏的重点,这块要你自己解决哈。实在抱歉!

    2019-07-18
  • 恋着歌
    deviceID 切换,通过观察 enumerateDevices() 返回的数据,目的是要向 default 切换。对目标设备信息做一次拷贝,修改 deviceId 为 default,修改 label 加上前缀“默认 - ”。不知道老师的题目是不是这样解答?

    作者回复: 你加上“默认 - ”它能真的变成默认吗哈?你可以自己亲自试一下

    2019-07-18
  • LongXiaJun
    打卡!

    作者回复: 打卡,哈哈

    2019-07-18
收起评论
20
返回
顶部