![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebRTC基础实践
文章平均质量分 93
铁锚
系统架构师,Java性能调优专家。热爱程序开发和设计; 积极应对各种情境和挑战;
喜欢钻研新技术, 闲暇时喜欢翻译和分析英文文档/技术博客。
展开
-
WebRTC基础实践 - 1. WebRTC简介
WebRTC 是一个开源的实时通信项目, 主要目标是对Web/原生App平台上的语音、视频、以及数据传输等实时通讯提供支持。WebRTC 主要包括以下 JavaScript API(点击链接可查看相关demo)。getUserMedia(): 获取用户设备的音频和视频.MediaRecorder: 录制音频和视频.RTCPeerConnection: 流式传输两个客户端之间的音频与视频....翻译 2018-10-14 11:17:27 · 7559 阅读 · 1 评论 -
WebRTC基础实践 - 9. 拍照并传给对方
本节内容在本节课程中, 我们将学习以下内容:拍照并通过canvas元素获取图像数据。给对面发送图片。本节的完整版代码位于 step-06 文件夹中。工作原理前面的小节中, 我们使用 RTCDataChannel 来传递文本消息。本节课程, 将学习如何发送文件: 下面的示例发送的是通过 getUserMedia() 捕获的照片文件, 原理都是一样的。核心内容包括:建立数据通道...翻译 2018-12-16 21:29:12 · 3756 阅读 · 0 评论 -
WebRTC基础实践 - 8. 集成对等通信和信令服务
本节内容在本节课程中, 我们将学习以下内容:在Node.js平台, 通过Socket.IO来启动信令服务。用信令服务交换WebRTC客户端之间的元数据(metadata)。本节的完整版代码位于 step-05 文件夹中。更新HTML和JavaScript代码更新 index.html 文件, 内容如下:<!DOCTYPE html><html>&lt...翻译 2018-12-14 11:01:45 · 2803 阅读 · 0 评论 -
WebRTC基础实践 - 7. 配置信令服务
本节内容在本节课程中, 我们将学习以下内容:通过 npm 安装 package.json 文件中指定的项目依赖运行Node.js服务器, 通过 node-static 提供静态文件服务。用Socket.IO创建消息传递服务创建聊天室以及发送聊天消息。本节的完整版代码位于 step-04 文件夹中。基本概念要创建并保持WebRTC通话, 客户端之间需要互相交换元数据信息, 包括:...翻译 2018-11-28 16:43:55 · 4885 阅读 · 0 评论 -
WebRTC基础实践 - 6. 通过RTCDataChannel传输数据
本节内容WebRTC客户端(peers)之间如何传递数据。本节的完整版代码位于 step-03 文件夹中。修改HTML代码在本示例中, 使用WebRTC的数据通道(data channel), 将一个 textarea 的内容, 传递给同页面中的另一个textarea。这个demo本身没什么实用价值, 主要目的是展示怎样使用WebRTC来传输数据和视频。接着上一节的代码, 将 ind...翻译 2018-11-20 19:16:38 · 13711 阅读 · 1 评论 -
WebRTC基础实践 - 4. 获取摄像头的视频流
本节内容在本节课程中, 我们将学习以下知识点:从摄像头(webcam)获取视频流(video stream)控制视频内容的回显通过CSS和SVG处理视频内容。本节的完整版代码位于 step-01 文件夹中。HTML代码在 work 目录下的 index.html 文件中, 增加 video 标签和 script 标签:<!DOCTYPE html><html...翻译 2018-11-12 19:50:09 · 17412 阅读 · 4 评论 -
WebRTC基础实践 - 5.通过RTCPeerConnection传输流媒体视频
本节内容在本节课程中, 我们将学习以下内容:使用WebRTC兼容库: adapter.js, 来抹平各浏览器间的差异。通过 RTCPeerConnection API 传输流媒体视频。控制 media 的捕捉和传输。本节的完整版代码位于 step-02 文件夹中。RTCPeerConnection 简介在WebRTC规范中, RTCPeerConnection用于视频流/音频流、...翻译 2018-11-13 19:36:51 · 23603 阅读 · 2 评论 -
WebRTC基础实践 - 3. 获取示例代码
下载示例代码如果安装有git工具, 直接用下面的脚本, 从GitHub克隆代码即可:git clone https://github.com/googlecodelabs/webrtc-web.git或者, 点击链接下载 zip 压缩包: https://github.com/googlecodelabs/webrtc-web/archive/master.zip如果下载失败或者本地...翻译 2018-11-09 15:40:36 · 4529 阅读 · 0 评论 -
WebRTC基础实践 - 2. WebRTC课程概述
本课程将逐步开发一个 WebRTC 应用, 通过网络摄像头来拍照、录像、并将这些信息传递给另一方. 在此过程中, 我们将学习如何使用WebRTC的核心API, 还会通过 Node.js 来搭建一个消息服务器。课程内容从摄像头获取视频通过 RTCPeerConnection 传输视频流通过 RTCDataChannel 传输数据流配置信令服务来交换消息集成对等连接与信令服务拍照, 并...翻译 2018-10-15 18:08:57 · 3509 阅读 · 1 评论 -
WebRTC基础实践 - 10. 总结
我们创建了一个视频聊天的APP, 同时支持传输文件以及其他数据!内容回顾在本教程中, 我们学习了以下内容:获取webcam摄像头的视频内容。通过 RTCPeerConnection 传输视频。通过 RTCPeerConnection 传输数据。配置信令服务来交换消息。集成对等连接和信令服务。拍照并用数据通道传递给对方。下一步体验WebRTC官方示例程序AppRTC: ht...翻译 2018-12-16 21:30:59 · 2222 阅读 · 0 评论