热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

WebRTC教程三:WebRTC特性,调试方法以及相关服务器搭建方法

本文主要介绍了WebRTC的一些特性,调试方法以及

WebRTC 教程一:WebRTC信令、架构和 API 入门

WebRTC 教程二:WebRTC API 和 Leak

本文是 WebRTC 的第三篇教程,主要介绍了 WebRTC 的一些特性,调试方法以及相关服务器搭建方法。

目录

  • WebRTC: 如何在浏览器中启用/禁用

    • Chrome

    • Firefox

    • Safari

    • Microsoft Edge

    • Opera

  • WebRTC 中的 WebSocket

    • WebRTC 能否代替 WebSocket

  • 如何调试 Chrome 中的 WebRTC

  • 如何调试 Firefox 中的 WebRTC

  • DataChannel API 介绍及使用

    • WebRTC DataChannel

    • 如何设置 WebRTC DataChannel

  • 通过 WebSocket 搭建一个信令服务器

WebRTC: 如何在浏览器中启用/禁用

以下这些浏览器是支持WebRTC的浏览器:

  • Google Chrome(28+)

  • Mozilla Firefox(22+)

  • Safari(11+)

  • Microsoft Edge(12+)

  • Opera(18+)

Chrome

Chrome 浏览器中,WebRTC 是默认开启的,如果没有开启,就需要检查是否有其他扩展在阻拦 WebRTC 服务,如 WebRTC Leak Prevent 和 WebRTC Control 和 Easy WebRTC Block 和 WebRTC Network Limiter 等。

Firefox

Firefox 浏览器中,WebRTC 也是默认开启的,如果想要关闭 WebRTC,可以直接在浏览器权限中设置:在地址栏中填入"about:config"并进入,在搜索栏中搜索 media.peerconnection,就可以在列表中看到 media.peerconnection.enabled,可以在此直接设置开启与否。

Safari

Safari 浏览器中同样也可以在浏览器权限中设置开启与关闭 WebRTC。方法:Preference -> Advanced 中开启开发模式的菜单,并在开发模式中选择 Experimental Features 并开启 WebRTC DTMF。关闭 WebRTC 也是相同的方法

Microsoft Edge

Edge 浏览器中,WebRTC 是默认开启的,如果没有,就需要在已安装的扩展中搜索有没有 WebRTC 控制相关的设置。

Opera

Opera 浏览器中,可以通过其他扩展或者浏览器两种方式来开启或关闭 WebRTC 服务。Opera 中可以用于关闭 WebRTC 的扩展有:WebRTC Leak Prevent, WebRTC Control, Easy WebRTC Block, WebRTCNetwork Limiter 等。或是用设置的话:Settings->Preference 中输入 WebRTC 就能看到 WebRTC 的开启或关闭选项。

WebRTC 中的 WebSocket

WebSocket 是一个基于 HTTP 的协议,并且需要一个服务器。用户可以通过 WebSocket 接收或发送任何类型的数据。

WebRTC 能否代替 WebSocket

首先,WebSocket 只是一个基于 HTTP 的传输协议,不是一个采集音视频流的工具,而 WebRTC 是一个专门为媒体流而不是数据流分享而设计的,且其基于 DTLS,也就带来了更高的安全性,且也可以使用 WebRTC DataChannel 来发送或接收任何数据。

其次,WebSocket 需要一个服务器,可以支持一个浏览器和一个网页服务器之间的全双工通信,并可以使用 wss 来让其更安全。WebRTC 需要一个信令服务器来交换 SDP,它会直接与某人的浏览器进行连接并交换数据,它也可以在两个浏览器之间完成全双工通信。

总而言之,WebSocket 是为可靠通信设计的,其更注重于网页应用,如果想要的是服务器-客户端模式的通信,WebSocket 是更好的选择。而在 WebRTC 中传输的是非可靠流,意味着可以在网络中出现丢包,WebRTC 主要面向的是安全的浏览器间之间通信。

在 WebRTC 中,也可以使用 WebSocket 来搭建信令服务器。讲者展示了一个两个浏览器通过一个 WebSocket 信令服务器建立连接的示意图:

其中,信令服务器是使用 nodeJS 应用写的,nodeJS 是一个异步的服务端 Javascript 服务器。WebSocket 服务器可以直接不借助其他协议的情况下完成信令过程。

如何调试 Chrome 中的 WebRTC

假设现在有一个应用正在 Web 浏览器上运行,WebRTC 通信中的进程都是异步的,那么问题来了:如何找到一次通话中哪个 WebRTC 进程停止了?这时候就需要用到 WebRTC Logs 了。

Chome 浏览器提供了一个 WebRTC 内部页面用于跟踪 WebRTC 连接,如下图右侧所示。

在一个 WebRTC 会话的过程中,可以打开 chrome://webrtc-internals 页面,来看到这些 log 信息。可以点击这些 api 的任意一项来看到其参数。讲者进一步列举了常用的连接方法和事件的内容及其参数:

这些方法都可以点进去,查看当前的参数或返回的成功与否,比如AddStream方法中的流id,CreateOffer方法是否调用成功等。

CSDN站内私信我(关注旁边,就是私信),领取最新最全C++音视频学习提升资料,内容包括(C/C++Linux 服务器开发,FFmpeg webRTC rtmp hls rtsp ffplay srs

 

如何调试 Firefox 中的 WebRTC

要在 Firefox 浏览器中调试 WebRTC,首先需要安装 DevTools Media Panel,然后在加载了插件后,运行 WebRTC 应用,并点击 Tools->Browser Tools->Web Developer Tools 并点击 Media-WebRTC。之后就可以看到 WebRTC 进程和连接状态,此外也可以点击任意的 API 来查看其参数。随后讲者通过视频具体展示了 Debug WebRTC 流程。

DataChannel API 介绍及使用

WebRTC DataChannel

在只希望使用 WebRTC 传输文件或文本时,WebRTC 标准也支持一个 API 来通过 RTCPeerConnection 发送任意的数据,即 RTCDataChannel。RTCDataChannel 负责所有的实时数据的交换,并把这些数据直接从一端传输到另一端。RTCDataChannel 相对于其他通信信道最大的优势在于,它是不借助第三个服务器,直接在端到端之间传输的,使用 Stream Control Transmission Protocal(SCTP) 就导致其有很低的延迟。

WebRTC DataChannel 支持 Blob,ArrayBuffer 以及 ArrayBufferView,这些在文件传输以及多人游戏服务中都十分关键。SCTP 协议可以允许设置可靠性,基于信息的传输,流控以及拥塞控制,它还会使用 DTLS 来完成加密保护隐私。总而言之,DataChannel 可以提供一个飞快的安全的浏览器间传输方案。

如何设置 WebRTC DataChannel

DtaChannel 是从一个已经连接的 PeerConnection 中建立的,可以设置其中一些可选项,如 ordered, maxPcketLifeTime, maxRetransmits 等。DataChannel 还提供了一些事件,连接建立了,断开了或是遇到错误,以及从对端接收到信息时。

通过 WebSocket 搭建一个信令服务器

信令服务器负责帮助 WebRTC 搭建其中的端到端连接。WebSocket 在服务端和客户端之间提供一个持续的低延迟连接。

WS library 可以基于 Node.js 帮助搭建 WebSocket,而 NPM 则是 NodeJS 的包管理平台。接着讲者展示了一个搭建 WebSocket 连接的 demo。

首先可以看到通过 require 方法引入了 WebSocket 包,在第二行就生成了一个监听 8895 端口的服务器,并在连接建立成功情况下,通过 connection.send 发送信息,connection.on 接收信息以及关闭连接。


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • Python 异步编程:ASGI 服务器与框架详解
    自 Python 3.5 引入 async/await 语法以来,异步编程迅速崛起,吸引了大量开发者的关注。本文将深入探讨 ASGI(异步服务器网关接口)及其在现代 Python Web 开发中的应用,介绍主流的 ASGI 服务器和框架。 ... [详细]
  • 本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣,并提供了具体的代码示例,帮助读者理解两者在不同场景下的适用性。 ... [详细]
  • 远程过程调用(RPC)是一种允许客户端通过网络请求服务器执行特定功能的技术。它简化了分布式系统的交互,使开发者可以像调用本地函数一样调用远程服务,并获得返回结果。本文将深入探讨RPC的工作原理、发展历程及其在现代技术中的应用。 ... [详细]
  • 本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 本文详细介绍了如何在Apache Shiro框架中实现对并发登录人数的限制,包括配置和自定义过滤器的具体步骤。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 在当前众多持久层框架中,MyBatis(前身为iBatis)凭借其轻量级、易用性和对SQL的直接支持,成为许多开发者的首选。本文将详细探讨MyBatis的核心概念、设计理念及其优势。 ... [详细]
  • 本文介绍了一个基于 Java SpringMVC 和 SSM 框架的综合系统,涵盖了操作日志记录、文件管理、头像编辑、权限控制、以及多种技术集成如 Shiro、Redis 等,旨在提供一个高效且功能丰富的开发平台。 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 利用HTML5构建网页便利贴
    本文探讨了通过HTML5的新特性,如内容可编辑性和本地存储功能,创建一个实用的网页便利贴。此项目不仅展示了HTML5的强大能力,还为开发者提供了实际应用这些技术的方法。 ... [详细]
author-avatar
等了哭了累了55
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有