HTML5 RTSP播放器streamedian/HTML5

・7 分钟阅读

概述,

Streamedian是一个Javascript库,它实现了在浏览器中观看实时流的RTSP客户端,它直接在标准HTML元素之上工作, 它需要支持HTML5视频和播放媒体源扩展, 同时播放器依赖服务器端websocket代理将RTSP流重新传送到浏览器。

它通过将rtph264和aac payload 复用为isobmff(mp4)fragment来工作。

Streamedian是使用ECMAScript2015标准编写的。

实时测试流,

http://streamedian.com/demo/free/上提供演示

浏览器支持(ES5transpiled版本):

  • 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

在iossafari和ie中不支持

安装

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

用法

浏览器端

附加带有RTSP URL的HTML视频




or


 


通过传递data-ignore="true"可以忽略源:



 
 


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

在你的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}`, //overrides mediaElement's sources
 modules: [
 {
 //client module constructor. Should be subclass or BaseClient. RTSPClient by default
 //client: RTSPClient,
 transport: {
 //client module constructor. Should be subclass or BaseTransport. WebsocketTransport by default
 //constructor: WebsocketTransport,
 options: {
 //address of websocket proxy described below. ws${location.protocol=='https:'?'s':''}://${location.host}/ws/by default
 socket: "ws://websocket_proxy_address/ws"
 }
 }
 },
 ]
});


需要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: [
 //uncomment if you want to transpile into 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中:

 


 

服务器端,

  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

播放器体系结构

播放器由三个主要模块组成: transport , client 和 remuxer .

负责数据传送和数据队列的传输 , 它应该触发连接断开的数据事件 , 一旦收到数据,传输应该将它推入dataQueue,并且触发数据事件, 可以在核心/base_transport中找到传输的基类, 默认情况下,实现依赖于websocket代理的WebsocketTransport。

客户端侦听数据事件,将它解析为基本流数据包,并将解析后的数据排入它自己的队列。客户端可以通过示例事件将排队缓冲区传递给 remuxer , 标识流跟踪客户端应激发跟踪事件, 就绪后,flush事件可用于构造媒体fragment,并且将它传递给视频演示者, 可以在core/base_client中找到传输的基类, 默认客户端是通过websocket传输的RTSP客户端。

Remuxer为视频演示器准备媒体fragment,并且推送它, 目前只有基于媒体源扩展视频演示者。Remuxer将数据收集到mp4媒体Fragments(moof+mdat)中,并且将它传递到源缓冲区。

如何工作?

RTSP播放机通过以下协议与代理建立连接:

  1. 通过连接到指定的"rtsp"协议连接到RTSP通道,并获取连接 id,

    
    c>s:
    WSP/1.1 INITrn
    seq: 
    host: rn
    port: rnrn
     
    s>c:
    WSP/1.1 200 OKrn
    seq: 
    channel: rnrn
    
    Error codes> = 400 means error
    
    
  2. 连接通道与"rtsp"协议连接到RTP通道

    
    c>s:
    WSP/1.1 JOINrn
    seq: rn
    channel: rnrn
    
    s>c:
    WSP/1.1 200 OKrn
    seq: rnrn
    
    Error codes> = 400 means error
    
    
  3. 发送包装到WSP协议中的RTSP命令:

    
    c>s:
    WSP/1.1 WRAPrn
    seq: rn
    rn
    
    
    s>c:
    WSP/1.1 200 OKrn
    channel: rn
    rn
    
    
    Error codes> = 400 means error
    
    
  4. RTP通道应该发送带有4字节报头($)的交错数据。 目前不支持单独的RTP

有什么建议来改善我们的播放器吗?欢迎发表评论或意见 streamedian.player@gmail.com

学以致用 profile image