从 0 打造音视频直播系统
李超
前新东方音视频直播技术专家,前沪江音视频架构师
32579 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 41 讲
WebRTC 1对1通话 (23讲)
从 0 打造音视频直播系统
15
15
1.0x
00:00/00:00
登录|注册

01 | 原来通过浏览器访问摄像头这么容易

MediaStreamConstraints参数
getUserMedia方法
流(Stream)
轨(Track)
麦克风
宽高比
分辨率
帧率
摄像头
STUN/TURN服务器
Signal服务器
WebRTC终端
JavaScript代码
HTML代码
音视频采集
音视频采集基本概念
WebRTC处理过程
getUserMedia API控制设备的参数及其含义
思考时间
如何使用getUserMedia API
WebRTC
参考
总结

该思维导图由 AI 生成,仅供参考

对于很多从事 JavaScript 开发的同学来说,基本都认为 JavaScript 是专门做页面控制的。如果用 JavaScript 做音视频处理,那真是很难想象的事儿。你可能首先想到的问题是:JavaScript 或者浏览器的性能跟得上吗?
而 Google 却不这么认为。 Google 就是要做一些常人无法想象,又难以理解的事情,否则它就不是 Google 了。
浏览器 + WebRTC”就是 Google 给出的答案。2011 年,Google 创立了 WebRTC 项目,其愿景就是可以在浏览器之间快速地实现音视频通信。
随着 WebRTC 1.0 规范的推出,现在主流浏览器 Chrome、Firefox、Safari 以及 Edge 都已经支持了 WebRTC 库。换句话说,在这些浏览器之间进行实时音视频通信已经很成熟了
下面我就通过讲解 JavaScript/ 浏览器访问电脑上的音视频设备,向你展示通过现代浏览器访问音视频设备是何其简单。

WebRTC 处理过程

在正式讲解如何通过浏览器采集音视频数据之前,我先向你介绍一下 WebRTC 实现一对一音视频实时通话的整个处理过程。对这个过程的了解,可以帮助你在阅读文章时,能清楚明了地知道所阅读的这篇文章、所要学习的知识点在整个处理过程中的位置。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了通过浏览器访问摄像头的过程以及WebRTC技术实现音视频通信的方法。通过介绍WebRTC终端、信令服务器和STUN/TURN服务器的作用,读者可以了解音视频通话的处理过程。文章还详细介绍了JavaScript采集音视频数据的API,包括摄像头、帧率、分辨率、麦克风等基本概念,并通过getUserMedia方法展示了在现代浏览器中访问音视频设备的简单方法。通过对MediaStreamConstraints参数的控制,读者可以轻松了解如何在现代浏览器中访问音视频设备。此外,文章强调了WebRTC中的重要概念MediaTrack和MediaStream,并指出了getUserMedia这一核心API的重要性。最后,文章提出了思考问题,引发读者对于获取指定设备音视频数据的思考。整体而言,本文通过清晰的示例和解释,使读者能够快速了解现代浏览器中访问音视频设备的方法和技术特点。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《从 0 打造音视频直播系统》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(80)

  • 最新
  • 精选
  • 当当
    老师,直接在chrome测试成功,声音不正常(回声很想),加了参数消除回音,还是不行,为什么啊?

    作者回复: 自己的音频没有mute 吧?把video 标签里加个muted 试试

    2019-07-16
    3
    9
  • 蓝桥
    你好,老师,现有的 rtmp 的直播解决方案和 webRTC 之间优劣势在什么地方?

    作者回复: Rtmp 底层用的tcp,wenrtc底层主要使用udp,使用tcp 就注定他在极端网络情况下没法实时通信

    2019-07-18
    7
  • 其他平台学过老师的课程,讲的很详细。一直希望老师讲讲Android端相关的知识点,后来想来,音视频重点还是在服务端,Web 目前又比较普及,无论是PC还是移动终端,都越来越多的支持 Web 了。

    作者回复: 谢谢,铁粉呀!

    2019-07-16
    6
    6
  • venn
    请问老师,用webrtc做视频直播的话,是不是意味着教师端需要同时和所有学生端直接建立连接,然后音视频不需要经过服务器而直接发到学生端,这样的话对教师端的带宽有要求吗?这种直播稳定吗

    作者回复: 你说的是通过 WebRTC 实现多人实时互动。这个有好几种方案,多终端互联是Mesh方案,还有 SFU, MCU方案。多人互动最好的方案是 SFU,这个在专栏中我已经介绍过了。使用这种方案可以节省多人互动时的带宽。

    2019-10-13
    5
  • Geek_4b4f4a
    你好,老师,我是做webrtc的原生Android客户端的,您的课程有这方面的讲解吗?

    作者回复: 这个专栏中没有,其实学完这个专栏你自己可以用android 实现了,很简单

    2019-07-16
    5
  • 李尧|Wonder
    老师,我打开audio之后回音特别大最后有很尖锐的声音,是什么原因?我试着在video中加入muted还是不行

    作者回复: 那是产生了啸叫,应该是你其它页面也开着音频,你将 所以音频关掉试试还有吗?没有后再将其它开,保证只有一个页页开着音频就好了。

    2019-07-26
    2
    3
  • 超威丶
    请问NAT穿越是啥?

    作者回复: P2P,端与端直接进行连接,不需要服务器中转数据,这样可以节省服务器带宽,但并不意味着不需要服务器,服务器作为辅助功能

    2019-07-16
    2
    3
  • hh
    请问老师,本地打开html可以看到到画面,代码理解,但不知如何给server.js跑起来,如何部署在服务器里呢,配合nginx咋弄呢,对js这方面几乎是小白,望解惑?

    作者回复: 后面的文章会有讲,也会有例子,别着急!

    2019-08-15
    2
  • 1900
    数据轨和音频轨视频轨的区别在哪里呢?

    作者回复: 数据轨是存放二进制数据,比如传输文件,就要使用数据轨。

    2019-07-16
    2
  • 不是山谷-13.25
    老师,拒绝了摄像头访问之后再次进入怎么才能重新弹出授权弹框啊?

    作者回复: 如果重新刷新不行的话,你就到浏览器的设置中去修改一下;具体位置你在网上找找

    2020-03-23
    2
    1
收起评论
显示
设置
留言
80
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部