Logo
Project Icon

html5_rtsp_player

浏览器直播RTSP流媒体的JavaScript库

RTSPHTML5播放器实时流媒体网络摄像头WebSocket代理Github开源项目

html5_rtsp_player是一个JavaScript库，实现在浏览器中直接播放RTSP流媒体。它将解码任务转移到用户浏览器，避免中间服务器转码，从而降低延迟并提高性能。该项目支持H264和AAC编码，兼容多数主流浏览器，集成方便。这为在网页上播放IP摄像头等RTSP源提供了高效方案。

访问官网访问官网GithubGithub文档文档
介绍相关项目

概述

所有现代浏览器都不原生支持播放RTSP(实时流协议)流，而这是许多流行IP摄像头的常用格式。因此长期以来，如果你想在网页上显示RTSP IP摄像头流，就必须使用中间转码服务器。这些服务器会接收RTSP流，解码并转换成浏览器可接受的格式，如HLS、MPEG-DASH或MP4。这种解决方案虽然可行，但由于需要转码和转换视频，可能会导致较大的延迟和性能不佳，而且输出视频质量往往会受到影响。

这个直接基于标准HTML5 <video> 元素的自定义HTML5播放器开发采用了不同的理念。它不是在中间服务器上解码RTSP流，而是将这个繁重的任务转移到最终用户的浏览器上，在那里解码单个流的任务微不足道。这意味着你的中间服务器不再需要承担所有负载，你可以将负载分散到所有观看RTSP流的人之间。另一个优点是，最终用户的浏览器将始终接收到来自IP摄像头的完整质量、未经改变的画面。

Streamedian是一个JavaScript库，它实现了RTSP客户端，用于在浏览器中观看实时流。它需要支持带有媒体源扩展的HTML5视频进行播放。此外，播放器还依赖于服务器端的WebSocket代理来将RTSP流重新传输到浏览器。

它通过将RTP H264和AAC有效载荷封装成ISO BMFF (MP4)片段来工作。

Streamedian使用ECMAScript 2015标准编写。

实时测试流

演示可在https://streamedian.com上查看

浏览器支持(ES5转译版本):

  • Firefox v.42+
  • Chrome v.23+
  • OSX Safari v.8+
  • MS Edge v.13+
  • Opera v.15+
  • Android浏览器 v.5.0+
  • IE Mobile v.11+

不支持iOS Safari和Internet Explorer

安装

npm install git://github.com/Streamedian/html5_rtsp_player.git

使用方法

浏览器端

附加带有RTSP URL的HTML视频

<video id="test_video" controls autoplay src="rtsp://your_rtsp_stream/url"></video>

或

<video id="test_video" controls autoplay>
    <source src="rtsp://your_rtsp_stream/url">
</video>

你可以通过传递data-ignore="true"来忽略源：

<video id="test_video" controls autoplay>
    <source src="natively_supported_video_url" data-ignore="true">
    <source src="rtsp://your_rtsp_stream/url">
</video>

如果浏览器可以播放该源，则不会为此元素初始化播放器。

在你的js中设置播放器：

import * as streamedian from 'streamedian/player.js';
// import WebsocketTransport from 'wsp/transport/websocket';
// import RTSPClient from 'wsp/client/rtsp/client';

let mediaElement = rtsp.attach(document.getElementById('test_video'));
let player = new streamedian.WSPlayer(mediaElement, {
    // url: `${STREAM_URL}`,      // 覆盖mediaElement的源
    modules: [
        {
            // 客户端模块构造函数。应为BaseClient的子类或默认的RTSPClient
            // client: RTSPClient,
            transport: {
               // 客户端模块构造函数。应为BaseTransport的子类或默认的WebsocketTransport
               // constructor: WebsocketTransport,
               options: {
                   // 下面描述的websocket代理地址。默认为ws${location.protocol=='https:'?'s':''}://${location.host}/ws/
                   socket: "ws://websocket_proxy_address/ws",
                   // 处理播放器异常的函数
                   errorHandler (e) {
                       alert(`启动播放器失败: ${e.message}`);
                   },
                   // 获取受保护流凭证的函数
                   queryCredentials() {
                       return new Promise((resolve, reject)=>{
                           let c = prompt('以user:password格式输入凭证');
                           if (c) {
                               this.setCredentials.apply(this, c.split(':'));
                               resolve();
                           } else {
                               reject();
                           }
                       });
                   }
               }
           }
        },
    ]
});

需要ES6模块支持。你可以使用rollup来构建这个脚本：

rollup.config.js

import buble from 'rollup-plugin-buble';
import alias from 'rollup-plugin-alias';

const path = require('path');

export default {
    entry: path.join(__dirname, 'example.js'),
    targets: [
        {dest: path.join(__dirname, 'example/streamedian.js'), format: 'es'}
    ],
    sourceMap: true,
    plugins: [
        // 如果你想转译成es5，取消下面的注释
        //buble({
            //exclude: 'node_modules/**'
        //}),
        alias({
            bp_logger: path.join(__dirname,'node_modules/bp_logger/logger'),
            bp_event: path.join(__dirname,'node_modules/bp_event/event'),
            bp_statemachine: path.join(__dirname,'node_modules/bp_statemachine/statemachine'),
            //jsencrypt: path.join(__dirname,'node_modules/jsencrypt/src/jsencrypt.js'),
            streamedian: path.join(__dirname,'src')
        })
    ]

}

> npm install bp_event bp_logger bp_statemachine
> rollup -c

将编译后的脚本包含到你的HTML中：

<script src="streamedian.js"></script>

RTSP认证

Streamedian播放器支持基本认证和摘要认证。当你连接到流时，会自动检测认证类型。 你可以在rtsp url中直接指定用户名/密码，格式为rtsp://username@password:stream.url/resource/， 或者将_queryCredentials()函数传递给_streamedian.WSPlayer。这个函数应该返回一个promise， 调用_this.setCredentials(user, password)_。

服务器端

  1. 安装websocket代理

    在http://streamedian.com注册并安装websocket代理

    注册你想要使用此播放器的域名

    将许可文件下载到你的服务器 请注意，此软件包依赖于systemd和gcc5+运行时，因此只能安装在较新的发行版上。

  2. 在/etc/ws_rtsp.ini中配置端口和许可证文件路径

    此端口应在防火墙中开放。您也可以通过代理将请求传递到此端口。（例如：http://nginx.org/en/docs/http/websocket.html）

  3. 运行它

> service ws_rtsp start

播放器架构

播放器包括三个主要模块：传输、客户端和重新封装器。

传输负责数据传递和数据排队。它应触发_connected_、_disconnected_和_data_事件。 一旦接收到数据，传输应将其推入dataQueue并触发_data_事件。传输的基类可以在core/base_transport中找到。 默认情况下，实现了依赖于websocket代理的WebsocketTransport。

客户端监听数据事件，将其解析为基本流数据包，并将解析后的数据排入自己的队列。客户端可以 通过_samples_事件将排队的缓冲区传递给重新封装器。为识别流轨道，客户端应触发_tracks_事件。准备就绪时，可以使用_flush_ 事件构造媒体片段并将其传递给视频呈现器。传输的基类可以在core/base_client中找到。 默认客户端是基于websocket传输的RTSP客户端。

重新封装器为视频呈现器准备媒体片段并推送它。目前只有一个基于媒体源扩展的视频呈现器。 重新封装器将数据收集到mp4媒体片段（moof+mdat）中，并将其传递到源缓冲区。

RTSP代理如何工作？

RTSP播放器使用以下协议与代理建立连接：

  1. 通过指定"rtsp"协议连接websocket来连接RTSP通道，并获取连接ID

    c>s:
WSP/1.1 INIT\r\n
seq: <用于响应跟踪的序列ID>
host: <RTSP流主机>\r\n
port: <RTSP流端口>\r\n\r\n
   
s>c:
WSP/1.1 200 OK\r\n
seq: <用于响应跟踪的序列ID>
channel: <通道ID>\r\n\r\n

错误代码 >= 400 表示错误

  2. 通过连接"rtp"协议的websocket来连接RTP通道

    c>s:
WSP/1.1 JOIN\r\n
seq: <用于响应跟踪的序列ID>\r\n
channel: <从RTSP套接字初始化获得的通道ID>\r\n\r\n

s>c:
WSP/1.1 200 OK\r\n
seq: <用于响应跟踪的序列ID>\r\n\r\n

错误代码 >= 400 表示错误

  3. 发送包装在WSP协议中的RTSP命令：

    c>s:
WSP/1.1 WRAP\r\n
seq: <用于响应跟踪的序列ID>\r\n
\r\n
<RTSP协议数据>

s>c:
WSP/1.1 200 OK\r\n
channel: <通道ID>\r\n
\r\n
<RTSP协议响应>

错误代码 >= 400 表示错误

  4. RTP通道应发送带有4字节头（$<通道><大小>）的交错数据。目前不支持单独的RTP。

负载均衡

RTSP代理本身不支持负载均衡，但可以轻松集成到nginx等负载均衡器中。 您可以在不同的套接字上启动多个代理实例，并配置nginx上游。

有任何建议来改进我们的播放器吗？ 欢迎发送评论或想法至streamedian.player@gmail.com

相关项目
项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手，通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能，支持100+编程语言，与主流编辑器无缝集成，显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台，能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐，Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案，通过智能技术简化视频制作流程。无论是企业宣传还是个人分享，有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持，能够阅读和理解用户上传的文件内容，解析网页信息，并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题，Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术，为商家提供一键生成商品图和营销文案的服务，显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台，让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型，免费访问各种图像生成与AI训练工具，从Stable Diffusion等基础模型开始，轻松实现创新图像生成。体验前沿的AI技术，推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器，它将改变您观看视频的方式！SubCat结合了先进的人工智能技术，为您提供即时视频字幕翻译，无论是本地视频还是网络流媒体，让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台，利用前沿AI技术，为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图，再到文案生成，美间让创意设计更简单、更高效。

Project Cover

稿定AI

稿定设计 是一个多功能的在线设计和创意平台，提供广泛的设计工具和资源，以满足不同用户的需求。从专业的图形设计师到普通用户，无论是进行图片处理、智能抠图、H5页面制作还是视频剪辑，稿定设计都能提供简单、高效的解决方案。该平台以其用户友好的界面和强大的功能集合，帮助用户轻松实现创意设计。

使用协议隐私政策广告服务
投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号