streaming html5

要求•发布•订阅

RED5 PRO HTML流测试床

该存储库包含一个简单的项目，其中包含许多示例，可用于测试和参考Red5 Pro WebRTC SDK。

要求

您将需要一个功能性的运行Red5 Pro服务器Web（或本地）访问客户端浏览器（移动和桌面）才能连接到。

有关更多信息，请访问https://www.red5.net/。

浏览器的复杂性

RED5 Pro WEBRTC SDK旨在利用WEBRTC用于其流媒体解决方案（出版和订阅），但也为浏览器提供了HLS支持（例如，移动和桌面Safari）。

有关浏览器复杂性的更多信息，请访问webrtc对等康纳恩（Caniuse.com）上的信息。

出版商

在Red5 Pro的上下文中，术语发布者是指生产广播流的客户端。 SDK中有两种类型的实例可以用于启动发布者：

1. WHIPClient - WHIPClient依赖于WEBRTC -HTTP摄入原始量来通过一系列HTTP/S请求建立连接。
2. RTCPublisher RTCPublisher依靠WebSocket连接来建立广播会话。

WHEPClient连接序列非常快-〜1秒 - 而RTCPublisher由于其依赖WebSocket的依赖，大约需要3-5秒才能获得流的连接。

订户

在Red5 Pro的背景下，术语订阅者是指消耗并播放已经实时广播流的客户。 SDK中有三种类型的实例可以用来启动订户：

1. WHEPClient WHEPClient依靠WEBRTC -HTTP出口协议来通过一系列HTTP/S请求建立连接。
2. RTCSubscriber RTCSubscriber依靠WebSocket连接来建立广播会话。
3. HLSSubscriber HLSSubscriber依赖于播放HLS流的本地能力（例如，移动和桌面Safari）。

WHEPClient连接序列非常快-〜1秒 - 而RTCPublisher由于其对WebSocket的依赖，大约需要3-5秒

HLSSubscriber不会通过连接序列并直接从服务器流式传输HLS，但是由于其实时段的长度，它确实具有高达6秒的延迟。

注意： WHIPClient和WHEPClient是在RED5 Pro WebRTC SDK的11.0.0发行中引入的。

设置

您需要将主机字段从设置页面进行修改，以指向服务器实例的IP地址。如果您不这样做，则构建时示例将不起作用。如果您在本地运行服务器，则您的计算机和移动设备需要在同一WiFi网络上。

关于TLS和CORS的注释

重要的是要注意，其中一些示例（特别是涉及使用WEBRTC发布的示例）需要在TLS上运行，因此可以通过HTTPS运行。如果在localhost上运行示例，则不应该看到问题，但是如果远程部署服务器，则需要确保通过HTTPS提供这些示例，并且为服务器定义了适当的交叉原点资源共享（CORS）设置。

• 阅读有关Red5 Pro和SSL的更多信息。
• 有关CORS的更多信息。

指示

要定义服务器实例的IP地址，请在浏览器中打开测试床WebApp，并在启动时导航到设置页面。要访问设置，请从位于顶部的示例列表中选择“主项目”。

要使用服务器实例的IP来定义主机，请单击“主机”字段f form f，然后输入本地或远程IP地址 - 例如， 10.0.0.5 76.199.199.199

提示：您还可以在端口5080上打开服务器实例的着陆页（即， http://localhost:5080 ，如果本地启动），并且该页面将在右上角显示其IP。

WHIP/WHEP设置选项

您可以选择从“设置”页面中选择鞭子/惠普。通过选择此选项，所有测试将分别利用WHEPClient和WHIPClient来发布和订阅。

如果您决定取消选择鞭子/WHEP选项，则所有测试将恢复为使用RTCPublisher和RTCSubscriber分别发布和替补出现。这些实例需要在其谈判阶段的浏览器中的网络支持。连接建立后，消息传输系统将切换到RTCDataChannel ，并且Websocket已关闭。

例子

出版

出版商
基本出版商使用WEBRTC，并选择使用WEBRTC-HTTP摄入（又名， WHIP ）或WebSockets来建立广播连接。

1080p
高质量的出版商。

附加
用附录选项演示将流录制到服务器的流。

验证
用简单的作者插图证明了用于发布的简单验证。

相机来源
演示选择要发布的所需相机。

相机交换
根据移动设备的后部和前面摄像头以及支持facingMode媒体违规的浏览器，展示了具有定义的video源的MediaStream的请求。

自定义设置
允许您为WEBRTC发布者自定义媒体广播设置。

自定义音频设置
允许您自定义WEBRTC Publisher的音频设置。

MediaStream交换
证明使用replaceTrack将基于WEBRTC的发布者动态交换在不同的相机源中。

图像捕获
展示捕获正在发布的现场视频的图像。

沉默的
发表现场视频的静音和解开音频。

记录
演示将流录为VOD（视频点播）播放的服务器。

附加
演示录音函数的函数流到服务器的VOD（视频按需）播放。

远程通话
演示向所有订阅客户端发送远程消息。

往返身份验证
使用RED5 Pro利用往返身份验证的示例。

屏幕共享
使用Chrome和Firefox的屏幕共享功能的一个示例。 用于订阅屏幕共享示例。

共享对象
演示使用远程共享对象在连接的客户端之间发送和收到信息。

社交媒体流推动
将直播流到社交媒体平台的重新播放的一个示例。

VP8
在发布上请求VP8视频编解码器的示例

出版 - 流管理器示例

流管理器
演示利用RED5 Pro Manager API发布到自动群集的起源。

流管理器代理
演示将RED5 Pro流管理器作为SSL WebSocket代理，以将WEBRTC发布到自动群集的起源。

流管理器代理摄像头选择
演示使用RED5 Pro Stream Manager作为SSL WebSocket代理，将WEBRTC发布到Autoscalsing Cluster的起源，并使用Camera Select。

流管理器代理设置
演示将RED5 Pro流管理器作为SSL WebSocket代理，以自定义视频设置发布WEBRTC，以自动群集的来源。

带有音频的流管理器代理设置
演示将Red5 Pro流管理器作为SSL WebSocket代理，以自定义音频设置发布WEBRTC，以自动群集的来源。

Stream Manager代理往返Authenticaion
使用RED5 PRO通过流管理器代理使用RED5 Pro的往返身份验证的示例。

流管理器代理屏幕共享
使用Chrome和Firefox的屏幕共享功能的一个示例。与Stream Manager代理订阅屏幕共享示例一起使用。

Stream Manager代理社交媒体流推动
将直播流到社交媒体平台的重新播放的一个示例。

流管理器Transcode Provision表格
提供了一个简单的表格，向流管理器以ABR广播发布新的规定。发布后，使用您喜欢的媒体编码器来广播这些变体。

流管理器代理转码
提供了一个简单的表格，向流管理器发布新的ABR广播并使用Transcoder启动单个变体广播。

流Manager代理转码与身份验证
提供了一个简单的表格，向流管理器以ABR广播发布新的规定，并使用Transcoder（包括身份验证）启动单个变体广播。

流管理器代理验证
使用RED5 PRO通过流管理器代理使用RED5 PRO的验证参数的示例。

多

双向
在订阅时同时出版 - 允许对话。包括流检测和自动连接。

双向流管理器代理
通过流管理器的双向示例 - 包括使用代理。包括流检测和自动连接。

会议
使用RED5 Pro演示多方通信。它还证明使用共享对象作为通知，以识别当事方广播的添加和删除。

会议 - 溪流经理
使用RED5 Pro通过流管理器演示多方通信。它还证明使用共享对象作为通知，以识别当事方广播的添加和删除。

共享对象（仅WebSockets）
通过RED5 Pro HTML SDK的Websocket代理演示共享对象的使用。

订阅

订户
基本订户示例与故障转移。 即，如果没有WebRTC浏览器支持，则检测到第一个Flash播放器，则是HLS。

360
订阅360相机流的示例

仅音频
演示仅音频流的播放。

验证
用简单的作者插图来订阅身份验证。

图像捕获
展示捕获正在消费的现场视频的图像。

簇
演示从RED5 Pro cluster API访问IP以将其列出为实时流。

HLS
这是仅使用HLS订阅流的一个示例。如果浏览器本地不支持HLS，则使用HLS.JS第三方库。

图像捕获
此示例通过使用CanvasRenderingContext2D的drawImage API来演示捕获播放的静止。

重新连接
演示RED5 Pro HTML SDK的故障转移机制，以根据浏览器支持选择订户，并在广播关闭或连接丧失时自动连接。

远程通话
演示从广播公司接收远程消息。

在无效的名称上重试
展示了使用订户的maintainConnectionOnSubscribeErrors配置属性，以便在Intializing后从subscribe请求中的错误中维护Websocket连接。

往返身份验证
使用RED5 Pro通过流管理器代理使用RED5 Pro的往返身份验证的示例

屏幕共享
使用Chrome和Firefox的屏幕共享功能的一个示例。与发布屏幕共享示例一起使用。

共享对象
演示使用远程共享对象在连接的客户端之间发送和收到信息。

支持
使用备用API在接收MediaStream上接收视频和音频数据时请求“暂停”的示例，同时还保持客户端与服务器的连接。

流开关
一个示例，证明了通过WEBRTC切换当前订户流到另一个实时流。

两个流
使用Stream1 Name和Stream 2 Name变量从设置页面页面上订阅了两个流的示例。

视频静音
示例以证明订阅的广播，该广播具有“静音”的视频流。

VP8
演示要求为播放流提供VP8视频编码。

订阅 - 流管理器示例

流管理器
演示使用RED5 Pro流管理器API并充当SSL Websocket代理，以访问Edge Server IP以订阅实时流。

流管理器代理
演示利用Red5 Pro流管理器API访问Edge Server IP以订阅实时流。

流管理器代理重新连接
演示RED5 Pro HTML SDK的故障转移机制，以根据浏览器支持选择订户，并在广播关闭或连接丧失时自动连接。

流管理器代理区
演示利用Red5 Pro流管理器API访问Edge Server IP以订阅实时流。

流管理器代理往返身份验证
使用往返身份验证（指定区域）证明订阅。

Stream Manager代理Transcoder（RTC）
演示利用RED5 Pro Manager API访问配置和Edge Server IP订阅具有自适应比特率控件的基于实时WEBRTC的流。

Stream Manager代理Transcoder（RTMP）
演示利用Red5 Pro Manager API访问“配置”和Edge Server IP订阅具有自适应比特率控件的基于实时闪存的流。

Stream Manager代理Transcoder（HLS）
演示利用RED5 Pro Manager API访问配置和Edge Server IP订阅具有自适应比特率控件的基于HLS的流。

流管理器代理屏幕共享
使用Chrome和Firefox的屏幕共享功能的一个示例。与发布屏幕共享示例一起使用。

混音器 - 流管理器示例

Stream Manager代理会议参与者
展示使用RED5 Pro Manager API加入带有单个返回流的视频会议。

Stream Manager代理会议主持人
展示利用RED5 Pro Manager API主持和管理带有单个返回流的视频会议。

流管理器电网组成主机
演示利用Red5 Pro Manager API将几个实时流的组成创建和管理到单个流中。

流管理器2x2网格布局示例
演示将一组直播流组成2x2网格，可以将其加载到Red5 Pro混合器中，以创建最多4个流的构图。

流管理器3x3网格布局示例
演示将一组实时流组成的3x3网格可以加载到Red5 Pro混合器中，以创建最多9个流的构图。

流管理器NXN网格布局示例
演示将一组实时流组成到NXN网格中，随着新流的添加，可以自动调整大小。该页面可以加载到Red5 Pro混合器中，以创建带有许多流的构图。

溪流管理会议布局
演示将一组直播流构成一个集中的布局，以重点介绍主持人。该页面可以加载到Red5 Pro混音器中，以创建带有单个返回流的视频会议。

笔记

1. 对于订户示例，您需要根据设置的流1个名称字段进行当前发布和命名的实时流。您可以使用另一个设备开始使用此WebApp开始流式传输，也可以使用Web浏览器通过Flash，http：// your_red5_pro_server_ip：5080/live发布。
2. 您可以通过导航到http：// your_red5_pro_server_ip：5080/live/subscribe.jsp来查看活动流的列表（在您开始发布后需要刷新此页面）。
3. 您可以通过打开http：// your_red5_pro_server_ip：5080/并查找页面上右上方打印的I​​P，可以访问RED5 PRO服务器安装的服务器IP-将在设置的主机字段中使用。
4. 除非您在本地运行服务器，否则WEBRTC发布需要有效的SSL证书。