从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打造音视频直播系统
登录|注册

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

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

WebRTC 处理过程

在正式讲解如何通过浏览器采集音视频数据之前,我先向你介绍一下 WebRTC 实现一对一音视频实时通话的整个处理过程。对这个过程的了解,可以帮助你在阅读文章时,能清楚明了地知道所阅读的这篇文章、所要学习的知识点在整个处理过程中的位置。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《从0打造音视频直播系统》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(56)

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

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

    2019-07-16
    1
    5
  • 当当
    老师,直接在chrome测试成功,声音不正常(回声很想),加了参数消除回音,还是不行,为什么啊?

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

    2019-07-16
    1
    3
  • 西西弗与卡夫卡
    获取前置摄像头
    const mediaStreamContrains = {
        video: { facingMode: "user" },
        audio: true
    };

    获取后置摄像头
    const mediaStreamContrains = {
        video: { facingMode: "environment" },
        audio: true
    };
    2019-07-16
    3
    3
  • 超威丶
    请问NAT穿越是啥?

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

    2019-07-16
    1
    2
  • XE.COM
    你好,老师,我是做webrtc的原生Android客户端的,您的课程有这方面的讲解吗?

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

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

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

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

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

    2019-07-26
    1
  • 麦晓杰alwaysu
    本地调试https,可以使用这个https://github.com/FiloSottile/mkcert。

    作者回复: 非常棒,谢谢!回头偿试一下。

    2019-07-23
    1
  • qiezitx
    还没专门搭signal服务器和STUN/TRUN服务器,只是用

    python -m SimpleHTTPServer

    简单的试了一下老师的demo,成功了!一点点正反馈,再前进。
    2019-12-10
  • liy
    老师好,我想实时播放公网服务器转发过来的flv视频流,可以怎么做呢
    2019-12-04
  • liy
    老师好!我想做一个在浏览器上实时播放公司服务器传过来的flv视频,可以用webrtc做嘛,方案大概是怎样的啊
    2019-12-04
  • 一一
    1 经测试,通过file:///E:/test/WebRTCTest/day01/WebRTC1.html本地打开Chrome、Edge浏览器,可以正常显示摄像头图像。
    2 将页面部署到 IIS服务器中,通过http://192.168.1.37:81/day01/WebRTC1.html在以上浏览器中,无法显示摄像头图像。
    3 看了网友的留言,老师回复需要https协议,还需要购买个域名,备案,才能解决2中的问题。

    作者回复: 是的!

    2019-11-18
  • 不似旧日
    老师我做Java服务器端的这个专题适合我么?

    作者回复: 如果你需要做直播/学习音视频直播就适合你,不要让语言成为你学习的障碍!

    2019-10-16
  • 小小小丶盘子
    将老师的代码部署到自己站点,手机试了一下可以,电脑没有设备,但是报错是 DOMException,改为alert 的话,就提示 NotFoundError:Requested device not found。

    作者回复: 你是 HTTPS 服务?

    2019-09-27
    1
  • ammo
    想知道chrome如何直接播放rtsp直播流。现在后台给我的就是rtsp的播放链接。找了些方案要不太落后,要不就是要收费的。大致知道可以通过websocket转发给前端。有没有开源的直接方案,马上要上项目了。。。。。

    作者回复: 没办法直接播 rtsp 流,因为浏览器不支持 rtsp。一种比较好的方案是做一个代理将 rtsp 转成 浏览器支持的流,不过短时间内也做不出来的

    2019-09-06
    1
  • Slogen
    想问下大神,如果用webrtc实现多人在线视频,假设是6个人同时在线群聊,那么应该有6路音视频信号,如果同时在浏览器里面渲染着6路信号,对浏览器来说会不会存在性能问题?比如编解码之类的。求指导。

    作者回复: 编码只是一路,其它是解码,渲染在底层用的GPU,没问题的

    2019-09-04
  • Shawn·Pen
    老师,请问基础开发环境如何搭建?有没有截图什么的?多谢!

    作者回复: 你可以使用任何开发工具进行开发,在布署的时候最后有一个云服务器,并申请一个域名和 https 证书来布署你的页面。

    2019-08-20
  • 诸葛亮了
    video: {
                                frameRate: {
                                    min: 20
                                },
                                width: {min: 1280},
                                height: {min: 720},
                                aspectRatio: 16/9
                            },
    这样设置,接收端展示的视频也是1280X720的分辨率吗?

    作者回复: 这个采集端采集的数据,而接收方的分辨率实际上是与你编码器设置的分辨率一致的。如果你的编码器没有特别说明的话,它默认应该就是采集分辩率。

    2019-08-20
  • common
    RTCP协议头中的DLSR指的是发送RR与最近一个SR到达时间的时间差吧?

    作者回复: delay since last SR (DLSR) 的单位是1/65536秒.

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

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

    2019-08-15
收起评论
56
返回
顶部