WebRTC 示例

Posted 2022-07-30 上下求索.

这是一组小样本，展示了WebRTC API 的各个部分。GitHub 存储库中提供了所有示例的代码。

大多数示例都使用了adapter.js，一个 shim 将应用程序与规范更改和前缀差异隔离开来。

https://webrtc.org/getting-started/testing 列出了对使用 Chrome 进行开发和测试有用的命令行标志。

欢迎使用补丁和问题！有关 说明，请参阅CONTRIBUTING.md。

警告：强烈建议在测试这些样本时使用耳机，否则可能会导致系统出现啸叫声。

获取用户媒体（）：

访问媒体设备

• 基本 getUserMedia 演示
• 将 getUserMedia 与画布一起使用
• 将 getUserMedia 与画布和 CSS 过滤器一起使用
• 选择相机分辨率
• 仅音频 getUserMedia() 输出到本地音频元素
• 仅音频 getUserMedia() 显示音量
• 记录流
• 使用 getDisplayMedia 进行屏幕共享
• 控制摄像机平移、倾斜和缩放

设备：

查询媒体设备

• 选择摄像头、麦克风和扬声器
• 选择媒体源和音频输出

流捕获：

从画布或视频元素流式传输

• 从视频元素流式传输到视频元素
• 从视频元素流式传输到对等连接
• 从画布元素流式传输到视频元素
• 从画布元素流式传输到对等连接
• 从画布元素记录流
• 使用内容提示指导视频编码

RTCPeer连接：

控制对等连接

• 单个选项卡中的基本对等连接演示
• 两个选项卡之间的基本对等连接演示
• 使用完美协商的对等连接
• 纯音频对等连接演示
• 即时更改带宽
• 通话前更改编解码器
• 升级通话并开启视频
• 一次多个对等连接
• 将一台 PC 的输出转发到另一台
• 芒格 SDP 参数
• 设置对等连接时使用 pranswer
• 约束和统计
• 更多约束和统计信息
• RTCPeerConnection 和 requestVideoFrameCallback()
• 显示各种场景的 createOffer 输出
• 使用 RTCDTMFSender
• 显示对等连接状态
• 从 STUN/TURN 服务器收集的 ICE 候选者
• 重新启动 ICE
• Web 音频输出作为对等连接的输入
• 对等连接作为 Web 音频的输入
• 衡量重新谈判需要多长时间

RTC 数据通道：

通过对等连接发送任意数据

• 传输文本
• 传输文件
• 传输数据
• 消息传递

视频聊天：

全功能 WebRTC 应用程序

• 由 Google App Engine 提供支持的AppRTC 视频聊天客户端
• AppRTC URL 参数

可插入流：

用于处理媒体的 API

• 使用 WebRTC 可插入流进行端到端加密
• （实验性）
• 使用 WebRTC 可插入流的视频分析器
• （实验性）
• 使用 MediaStream 可插入流进行视频处理
• （实验性）
• 使用 MediaStream 可插入流进行音频处理
• （实验性）
• 在 Worker 中使用 MediaStream 可插入流进行视频裁剪
• （实验性）
• 与 WebGPU 集成以进行自定义视频渲染：
• （实验性）