jswebrtc 支持 SRS 的 Webrtc 播放器

WebRTC

WebRTC(Web Real-Time Communication)是一项实时通讯技术,它允许网络应用或站点在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流、音频流或其他任意数据的传输。
WebRTC整体架构从上到下一共分为三层:

  1. Web API层:暴露给开发人员的用于开发WebRTC应用的JavaScript API,如RTCPeerConnection、MediaStream等。
  2. 核心层 :包括音频引擎、视频引擎和网络传输三个模块。
    • 音频引擎:负责音频通信,包括音频编解码和语音信号处理(如回声消除、降噪)。
    • 视频引擎:负责视频通信,包括视频图像编解码和视频图像处理(如视频抖动缓冲、颜色增强、降噪)。
    • 网络传输:负责音视频数据的传输,通过SRTP协议保证数据加密,通过ICE(整合STUN和TURN)协议处理NAT和防火墙穿越问题。
  3. 实现层:由各厂商自主开发,用于实现音视频的采集和网络IO。

JSWebrtc

JSWebrtc 是基于 SRS 实时视频服务器、对浏览器支持的 WebRTC 基础功能的封装。

javascript 复制代码
<script src="dist/jswebrtc.min.js"></script>
<div class="jswebrtc" data-url="webrtc://osiii.com/live/livestream"></div>

用法

JSWebrtc 播放器可以通过 HTML 创建,只需给指定元素添加 CSS 样式 jswebrtc 即可:

html 复制代码
<div class="jswebrtc" data-url="<url>"></div>

OR

javascropt 复制代码
var player = new JSWebrtc.Player(url [, options]);

参数说明:

参数 options 支持下列的配置项:

  • video -- 用于播放视频的 HTML Video 元素.
  • autoplay - 是否自动播放. 默认 false.
  • onPlay(player) -- 播放后回调
  • onPause (player) -- 暂停后回调
    API
    方法和属性:
  • .play() -- 开始
  • .pause() -- 暂停
  • .stop() -- 停止
  • .destroy() -- 停止播放并清理相关的播放资源.
  • .paused -- 只读, 是否暂停播放
相关推荐
eli9606 小时前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js
chen_song_14 小时前
WebRTC中音视频服务质量QoS之RTT衡量网络往返时延的加权平均RTT计算机制‌详解
网络·音视频·webrtc
PagiHi1 天前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js
EasyCVR2 天前
基于WebRTC与P2P技术,嵌入式视频通话EasyRTC实现智能硬件音视频交互,适配Linux、ARM、RTOS、LiteOS
人工智能·音视频·webrtc·h.265·智能硬件
SimpleForest3 天前
OBS推WebRTC流,并添加毫秒级时间显示
webrtc·obs·date-and-time
畅联云平台3 天前
美畅物联丨WebRTC 技术详解:构建实时通信的数字桥梁
webrtc
somnus、清澈3 天前
rtsp在网页上显示(webrtc-stream)
webrtc·拉流·rtsp
EasyCVR3 天前
基于WebRTC技术的EasyRTC嵌入式音视频SDK:多平台兼容与性能优化
性能优化·音视频·webrtc
我命由我123454 天前
微信小程序项目 tabBar 配置问题:“pages/mine/mine“ need in [“pages“]
javascript·微信小程序·小程序·html·css3·html5·js
xiejiashu4 天前
EasyRTC实现海思设备与Web浏览器小程序双向通话时,收到浏览器H5端发来的音频应该如何解码播放
音视频·webrtc·实时音视频·webrtc嵌入式·嵌入式webrtc