1.vue+leaflet示例:视频监控播放(附源码)
2.OWT(Intel WebRTC Server)入门
3.Tiny Player (js) - 轻量好用、免费开源的 web 视频播放开发组件，内置硬解、软解视频功能

vue+leaflet示例:视频监控播放(附源码)

       运行环境及配置说明：本示例代码依赖Node.js环境，推荐使用Node版本..1。您可以使用vscode或其他开发工具进行开发。如何学习网站源码配置步骤如下：首先下载示例源码，并在vscode中打开。接着，依次执行以下命令：安装依赖包（npm i），启动开发环境（npm run dev），以及打包发布版本（npm run build:release）。

       示例效果展示：由于视频流在线地址无法访问，视频流效果未能呈现。源码仅供参考，具体实现方式可参考以下内容。石破惊天主图源码

       实现思路：首先在萤石官网添加视频设备，并开启直播以获取RTMP或HLS格式的视频流。然后，利用js插件video.js及videojs-flash等，结合leaflet地图在网页上展示视频监控播放效果。萤石官网提供了丰富的示例和开发文档，您可以参考以下链接获取更多信息：萤石官网（），萤石开发文档（open.ys7.com/doc/zh/）。

       源码下载：感兴趣的朋友，可通过私聊我获取核心源码，仅需8.8元。

OWT(Intel WebRTC Server)入门

       一、OWT(Intel WebRTC Server)入门：安装与原理分析

       在安装OWT时，需要针对Ubuntu .环境进行如下调整：

       1. 需在scripts/installDepsUnattended.sh文件中，确保在install_libexpat前安装docbook2x，java二次解析源码通过执行命令"apt install docbook2x -y"，避免安装过程中出现错误。

       2. 在installwebrtc步骤中，需在scripts/installCommonDeps.sh文件中运行"src/tools-woogeen/install.sh"之前设置http代理。在完成该命令后，记得取消代理设置。

       二、OWT的Demo使用：多模式探索

       除了常规的forward和mcu模式，OWT还支持streaming url模式。使用URL "https://XXXXX:/?url=rtsp_stream_url"即可打开并播放多种流媒体格式，包括RTSP、RTMP、HLS等。

       三、OWT原理分析

       1. Forward模式：在该模式下，大牛起拨拉升源码公式webrtc-agent负责处理webrtc-connection逻辑，其主要步骤包括：

       源代码中的publish操作，依据connectionType分为internal和webrtc类型，其中internal类型连接方式由agent/conference/agent.toml文件设定。

       创建WebRtcConnection对象，此对象封装了erizo:WebRtcConnection。

       创建AudioFrameConstructor和VideoFrameConstructor，它们封装了纯C++类，并作为WebRtcConnection的MediaSink，接收并转换WebRtcConnection发出的rtp数据为Frame格式。

       连接完成并经过信令交互后，两个connection分别与客户端建立连接。

       2. MCU模式：MCU模式由webrtcAgent、audioAgent和videoAgent协同工作，webrtcAgent连接客户端，通达信指标源码peaudioAgent和videoAgent负责音视频混流，内部连接至webrtcAgent。订阅混流步骤包括：

       webrtcAgent创建webrtcConnection（output）用于传输音视频至客户端。

       webrtcAgent创建两个internalConnection（input），分别连接audioAgent和videoAgent。

       连接完成并进行信令交互后，模块间实现音视频数据传输。

       3. Streaming模式：此模式支持LiveStreamIn/Out或MediaFileIn/Out，同样使用internalConnection实现模块间数据传输。以StreamIn为例，其主要步骤包括：

       agent/streaming/index.js中的publish操作选择internal或streaming作为输入。

       AVStreamInWrap模块用于封装MediaFileIn和LiveStreamIn。

       LiveStreamIn启动新线程，使用ffmpeg循环读取streamUrl中的AVPacket，放入jitterBuffer或直接交付FrameDestination。

       四、信令分析与系统架构

       系统架构涉及多个组件，包括workerAgent、conference、workerNode、clusterWorker和clusterManager，共同构建了一套复杂的信令机制。此机制旨在实现伸缩性和容错性，具体步骤如：

       客户端通过socketio登录。

       portal接收socketio请求并处理。

       通过clusterManager获取并调度所需的agent。

       conference使用nodeManager分配控制节点。

       实现节点加入控制流程。

       通过上述架构，OWT能够高效地管理和处理多节点间的通信，同时保证系统在不同负载条件下的稳定运行。

Tiny Player (js) - 轻量好用、免费开源的 web 视频播放开发组件，内置硬解、软解视频功能

       一款简单易用的 JS 视频播放器，完美满足我移动端播放视频的需求，向大家强烈推荐。

       关于 Tiny Player

       Tiny Player 是一个轻量级的视频播放器 JS 库，内嵌硬解和软解视频功能，支持原生控件样式及自定义控件样式，以小巧的体积实现了全面的视频播放功能。

       Tiny Player JS 视频播放器技术特性

       开发上手体验

       在 web 开发中，若需实现视频播放功能，原生视频播放器往往兼容性差，且控制样式基础，使用不便。此时，一款优秀的视频播放器显得尤为重要。此前我曾推荐 xgplayer.js 西瓜播放器，虽然好用，但体积较大。今天我要介绍的是 Tiny Player，它小巧轻便。

       安装使用

       以下是三种安装方式：

       tiny-player.min.js 文件可通过下载 Github 项目获得。从示例代码中可以看出，使用十分简单。

       视频播放方式

       TinyPlayer 支持 MSE (Media Source Extensions)，这是一种 HTML5 规范，允许 JavaScript 控制媒体流的缓冲区，实现无缝播放。

       目前也支持 HLS (HTTP Live Streaming)，这是 Apple 的动态码率自适应技术，常用于 PC 和 Apple 终端的音视频服务。它包含一个 m3u(8) 格式的索引文件，记录了音视频文件的网络地址，播放软件根据索引打开文件进行在线播放。这种方式在视频播放中非常常见。

       更多参数用法请查阅文档，官网也提供了丰富的代码示例，集成到项目中非常简单。但根据我的体验，官网可能挂在 Github 上，访问不稳定，有时需要借助工具才能打开。

       免费开源说明

       TinyPlayer 是一个免费开源的 JavaScript 视频播放器项目，源码托管在 Github 上，任何人都可以免费下载使用。尽管 Github 仓库主页上没有明确说明采用 MIT 开源协议，但官网页脚中有说明，因此可以放心使用。