如果你已经会写 JavaScript，却一碰到「浏览器怎么把摄像头画面传给另一个人」就卡住，这门课值得先看一眼。它不是讲怎么调第三方 SDK，而是把 WebRTC 这套浏览器原生能力拆开，用原生 JS 从零搭出可用的视频直播链路。
先确认你到底缺哪一块
WebRTC 的门槛不在 API 数量，而在几个容易含糊过去的环节。对着下面几条自查，命中越多说明越该补：
- 用过 getUserMedia 拿到本地画面，但说不清 MediaStream 里音视频轨道的结构，也不知道怎么单独替换某一路轨道。
- 知道 RTCPeerConnection 要交换 SDP，但 offer/answer 谁先发、什么时候设置本地和远程描述，顺序全靠试。
- 听说过 STUN 和 TURN，但分不清什么时候直连能成功、什么时候必须走中继，NAT 穿透失败时不知道从哪排查。
- 一对一通话能跑通，一旦要多人或开房间就无从下手，不清楚信令服务该自己写还是用现成的。
- 能实现「看」，但不清楚「录下来」——屏幕录制、媒体录制、把流落成文件这条线怎么接。
这些不是零散知识点，而是同一条链路上的连续环节。课程按这个顺序推进：先拿到音视频流，再建立点对点连接，然后补上信令和穿透，最后延伸到录制与直播软件形态。
课程里会碰到的具体问题
媒体采集与流处理
摄像头、麦克风、屏幕共享三种来源的采集差异，分辨率与码率的约束怎么设置，前后摄像头切换、静音、关视频这些状态如何反映到流上。这部分练的是对 MediaStream 和 MediaStreamTrack 的操作手感。
连接建立与信令
这是最容易卡住的地方。offer 和 answer 的生成与交换、ICE 候选的收集与传递、连接状态变化的监听，都要靠一个信令通道来协调。课程会带着处理这些时序问题，而不是只贴一段能跑的 demo。
穿透、稳定性与录制
STUN/TURN 的配置与失败排查，弱网下的表现，以及把一路直播流录制下来的做法。做到这一步，你就具备了录屏软件和直播软件的基本骨架。
怎么练才不算白看
建议边看边动手，每个阶段留一个小目标：先用浏览器把本地预览跑通，再做两人互连，接着加入房间和用户列表，最后补录制。每完成一步，用浏览器自带的调试面板看连接状态和统计信息，比单纯看日志有效。遇到连不上时，优先确认信令有没有送达、ICE 候选是否完整，这两点能解决大部分问题。
学完应该能回答这些问题
- 一次成功的 WebRTC 连接，从采集到画面出现在对端，中间依次经过了哪些步骤？
- 如果双方都在 NAT 后面直连失败，该怎么判断并补救？
- 不用任何第三方库，你自己需要写哪几部分代码才能让两个人通话？
- 把直播画面保存成文件，有哪几种实现方式，各自适用什么场景？
这四个问题答得上来，说明这条链路你是真的走通了，而不是拼凑出来的。课程面向的就是想把这块补实的人——有 JS 基础，但要往音视频方向靠。不需要你事先懂网络协议，前提是愿意动手调、愿意在连不上的时候一点点排查。
webRTC 源生JS视频直播教程
课程详情
课程详情
课程名称：webRTC 源生JS视频直播教程
课程核心介绍：本课程旨在帮助学员掌握录屏软件和直播软件的研发技能，通过学习webRTC和原生JS技术，学员将能够开发出功能强大的视频直播应用。
- 适合人群：
- 具有JavaScript基础知识的朋友
- 从事录屏软件开发的人员
- 从事直播软件开发的人员
学习收获：
- 掌握webRTC技术原理和应用
- 精通原生JS在视频直播中的应用
- 能够独立研发录屏和直播软件
课程亮点：
- 理论与实践相结合，注重实际操作能力培养
- 由经验丰富的讲师授课，提供高质量教学服务
- 课程内容全面，覆盖webRTC和原生JS的核心知识
课程目录
01 本地视频流getUserMedia的使用 01 开篇.mp4 02 getUserMedia获取本地摄像头对象的理解.mp4 03 写代码实现获取本地摄像头和音频流.mp4 04 工作中是的开始摄像头的使用.mp4 05 获取本地视频流和音频流的另一种写法.mp4 06 使用拍照功能给媒体流拍照.mp4 07 给媒体流加滤镜并进行拍照.mp4 08 WebRTC分变率属性.mp4 09 设置摄像机的分辨率.mp4 10 设置摄像机的分辨率-2.mp4 11 设置摄像机的分辨率-3.mp4 12 设置摄像机的分辨率-4.mp4 13 本地音频流的使用.mp4 14 通过录制功能录制视频段落-原理解释.mp4 15 通过录制功能录制视频段落-开启相机.mp4 16 通过录制功能录制视频段落-音频比特率.mp4 17 通过录制功能录制视频段落-录制.mp4 18 通过录制功能录制视频段落-插放.mp4 19 通过录制功能录制视频段落-下载.mp4 20 共享视频画面.mp4 02 媒体设备的获取和使用 01 获取媒体设备enumerateDevices接口说明.mp4 02 媒体设备的获取MediaDeviceInfo说明.mp4 03 webRTC安全证书使用.mp4 04 通过Tomcat调试获取媒体设备.mp4 05 媒体设备的使用案例-设备媒体下拉列表.mp4 06 媒体设备的使用案例-摄像头.mp4 07 媒体设备的使用案例-切换设备.mp4 08 媒体设备的使用案例-HTMLMediaElement.set.mp4 09 JS里的一些知识点.mp4 10 使用知识点设置媒体设备案例-获取下拉列表.mp4 11 使用知识点设置媒体案例-获取用户媒体.mp4 12 使用知识点设置媒体案例-本地媒体文件.mp4 13 使用知识点设置媒体案例-添加音频切换事件.mp4 03 本地媒体流和对等流的捕获 01 视频之间流的传递captureStream认识.mp4 02 视频之间流的传递代码实例.mp4 03 对等流连接介绍.mp4 04 RTCPeerConnection介绍.mp4 05 RTCPeerConnection原理讲解.mp4 06 讲解-iceConnectionState属性.mp4 07 讲解-signalingState属性.mp4 08 讲解-localDescription属性.mp4 09 讲解-remoteDescription属性.mp4 10 讲解-createOffer、setLocalDescrip.mp4 11 createAnswer、setRemoteDescript.mp4 12 setRemoteDescription方法 - 异步.mp4 13 讲解-addStream()方法.mp4 14 addTrack()方法.mp4 15 本地对等流视频.mp4 16 视频之间对等流的传递改造.mp4 04 webRTC视频直播案例讲解 01 springboot整合websocket.mp4 02 编写websocket消息通道.mp4 03 编写web前端进行发布消息.mp4 04 编写web前端进行接收消息.mp4 05 编写webRTC的主播端的发送offer.mp4 06 编写webRTC的观看端接收offer.mp4 07 编写webRTC的观看端回答answer.mp4 08 编写webRTC的主播端发送候选信息.mp4 09 接收候选，并发送候选信息.mp4 10 完成主播对客户端的对等流传递.mp4 05 webRTC录屏案例讲解 01 录屏准备.mp4 02 录屏开始和停止.mp4 03 录屏播放.mp4 04 录屏下载.mp4 05 使用谷歌插件进行录屏-插件安装.mp4 06 使用谷歌插件进行录屏-编码.mp4
