kaimo_rtsp_plugin

v0.0.54

Published

7 months ago

RTSP plugin for Capacitor with native AAR support

Downloads

134

0High
0Medium
0Low

yangjun152620828a

capacitor plugin native rtsp video streaming android aar

RTSP视图插件

这是一个用于在Capacitor应用中显示RTSP视频流的插件。

安装

npm install rtsp
npx cap sync

配置

Android

在Android项目的MainActivity.java文件中注册插件：

import com.mycompany.plugins.example.rtsp_viewPlugin;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    // 注册插件
    registerPlugin(rtsp_viewPlugin.class);
  }
}

确保在AndroidManifest.xml中添加了网络权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

使用方法

显示RTSP视图

import { rtsp_view } from 'rtsp';

// 显示RTSP视图
await rtsp_view.showRtspView({
  url: 'rtsp://example.com/stream',
  position: {
    x: 0,
    y: 200,
    width: 300,
    height: 200
  }
});

关闭RTSP视图

import { rtsp_view } from 'rtsp';

// 关闭RTSP视图
await rtsp_view.closeRtspView();

检查RTSP视图状态

import { rtsp_view } from 'rtsp';

// 检查RTSP视图是否显示
const result = await rtsp_view.isRtspViewShowing();
console.log(`RTSP视图状态: ${result.isShowing ? "显示中" : "已关闭"}`);

监听错误事件

import { rtsp_view } from 'rtsp';

// 监听RTSP错误事件
rtsp_view.addListener('rtspError', (error) => {
  console.error(`RTSP错误: ${error.message}`);
});

API

startPull(...)

startPull(options: { url: string; }) => Promise<{ success: boolean; }>

开始拉流 (JNI功能)

| Param | Type | Description | | ------------- | ----------------------------- | ------------- | | options | { url: string; } | 包含RTSP URL的选项 |

Returns: Promise<{ success: boolean; }>

stopPull()

stopPull() => Promise<{ success: boolean; }>

停止拉流 (JNI功能)

Returns: Promise<{ success: boolean; }>

saveJpg(...)

saveJpg(options: { directUrl: string; }) => Promise<{ success: boolean; }>

保存JPEG图像 (JNI功能)

| Param | Type | Description | | ------------- | ----------------------------------- | ----------- | | options | { directUrl: string; } | 包含保存路径的选项 |

Returns: Promise<{ success: boolean; }>

saveMp4(...)

saveMp4(options: { directUrl: string; }) => Promise<{ success: boolean; }>

开始录制MP4视频 (JNI功能)

| Param | Type | Description | | ------------- | ----------------------------------- | ----------- | | options | { directUrl: string; } | 包含保存路径的选项 |

Returns: Promise<{ success: boolean; }>

stopRecordMp4()

stopRecordMp4() => Promise<{ success: boolean; }>

停止录制MP4视频 (JNI功能)

Returns: Promise<{ success: boolean; }>

isRecording()

isRecording() => Promise<{ recording: boolean; }>

获取录制状态 (JNI功能)

Returns: Promise<{ recording: boolean; }>

writeBinaryByJava(...)

writeBinaryByJava(options: { url: string; data: string; replace: boolean; isFirstChunk: boolean; isLastChunk: boolean; chunkIndex: number; }) => Promise<{ success: boolean; }>

写入二进制文件数据

| Param | Type | Description | | ------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------ | | options | { url: string; data: string; replace: boolean; isFirstChunk: boolean; isLastChunk: boolean; chunkIndex: number; } | 包含文件路径和数据的选项 |

Returns: Promise<{ success: boolean; }>

startCameraPreview(...)

startCameraPreview(options: { camera: 'rear' | 'front'; x: number; y: number; width: number; height: number; toBack?: boolean; tapPhoto?: boolean; tapFocus?: boolean; alpha?: number; }) => Promise<{ success: boolean; }>

启动相机预览

| Param | Type | Description | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | options | { camera: 'rear' | 'front'; x: number; y: number; width: number; height: number; toBack?: boolean; tapPhoto?: boolean; tapFocus?: boolean; alpha?: number; } | 相机预览配置选项 |

Returns: Promise<{ success: boolean; }>

stopCameraPreview()

stopCameraPreview() => Promise<{ success: boolean; }>

停止相机预览

Returns: Promise<{ success: boolean; }>

rtspUpdatePos(...)

rtspUpdatePos(options: { x: number; y: number; width: number; height: number; }) => Promise<{ success: boolean; message: string; }>

更新RTSP预览位置 - 接收HTML滑动后的坐标变化

| Param | Type | Description | | ------------- | --------------------------------------------------------------------- | ----------- | | options | { x: number; y: number; width: number; height: number; } | 坐标参数 |

Returns: Promise<{ success: boolean; message: string; }>

rtspCreateDir(...)

rtspCreateDir(options: { directUrl: string; }) => Promise<{ success: boolean; message: string; }>

| Param | Type | | ------------- | ----------------------------------- | | options | { directUrl: string; } |

Returns: Promise<{ success: boolean; message: string; }>

示例

参见example-app目录中的示例应用。

许可证

MIT

git remote add origin https://github.com/jingtian2163/ionic_html_view git remote set-url origin [email protected]:jingtian2163/ionic_html_view.git

上传包

npm config set registry https://registry.npmjs.org/ 切换区域 https://www.npmjs.com/ yangjun152620828a 152620828aA!

npm login npm publish --access public 上传

https://www.npmjs.com/package/kaimo_rtsp_plugin

/Volumes/zhitai/third/ffplay -rtsp_transport tcp -fflags nobuffer -flags low_delay -framedrop rtsp://192.168.108.71/live 直接推流

//创建新工程 ionic start testrtsp blank --type react

npm config set registry https://registry.npmjs.org/

npm config set registry https://registry.npmmirror.com

npm install -g @ionic/[email protected] npm install -g @angular/[email protected] ionic start rtsp-app blank --type=angular --package-manager=npm --no-interactive

router_ssid=rongyaox50 router_password=12345678a stream_resolution=1080P stream_bitrate=10000000 stream_framerate=30 stream_type=rtsp

router_ssid=TP_LINK_6DF7 router_password=12345678a stream_resolution=1080P stream_bitrate=10000000 stream_framerate=30 stream_type=rtsp

router_ssid=Xiaomi_C669_5G router_password=66668888 stream_resolution=1080P stream_bitrate=10000000 stream_framerate=30 stream_type=rtsp

管理密码:12345678aA\

/Users/olaola/Desktop/ola/opensource/ffmpeg/ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i "0" -c:v libx264 -preset ultrafast -tune zerolatency -x264-params "keyint=60:min-keyint=60:bframes=0:repeat-headers=1:annexb=1" -pix_fmt yuv420p -b:v 10000k -bsf:v h264_mp4toannexb -f rtsp rtsp://127.0.0.1:554/live/camera

olaola@olaoladeMacBook-Pro-2 ffmpeg % /Users/olaola/Desktop/ola/opensource/ffmpeg/ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i "0" -c:v libx265 -preset ultrafast -tune zerolatency -x265-params "keyint=60:min-keyint=60:bframes=0" -pix_fmt yuv420p -b:v 10000k -f rtsp rtsp://127.0.0.1:554/live/camera

构建AAR（包含JNI+FFmpeg）

npm run build:aar

完整构建（AAR + TypeScript）

npm run build:full

自动构建并发布

npm publish --access public

或手动构建后发布

//implementation project(':android-native') implementation(name: 'rtsp-native-1.0', ext: 'aar') npm run build:full npm publish --access public

//使用 npm install kaimo_rtsp_plugin npx cap sync android

import { rtsp_view } from 'kaimo_rtsp_plugin';

// 开始拉流 await rtsp_view.startPull({ url: 'rtsp://example.com/stream', width: 1920, height: 1080, fps: 30, renderPosition: { left: 0, top: 0, right: 800, bottom: 450 }, devicePixelRatio: window.devicePixelRatio });

// 停止拉流 await rtsp_view.stopPull();

/Users/olaola/Desktop/ola/opensource/ffmpeg/ffmpeg -re -i /Users/olaola/Desktop/tmp/ionic6test/testolugin/rtsp-app/output.mp4 -c copy -f rtsp rtsp://127.0.0.1:554/live/camera 重复推流

1、保存图片同步编码 2、修改ringbuffer 3、zlmediakit 拉流 4、ffmpeg保存图片 curl -X POST -d "eventtype=test&value=123" http://172.20.30.72:8080

curl -X POST -d "eventtype=test&value=123" http://172.20.30.72:8080curl -X POST -d "eventtype=test&value=123" http://172.20.30.72:8080 // RTSP - 添加回调 window.startPull = async () => { try { rtsp_view.addListener('h264Data', (data) => { console.log('Raw JSON data:', JSON.stringify(data)); });

// RTSP - 移除回调 window.stopPull = async () => { try { const result = await rtsp_view.stopPull(); console.log(🛑 停止拉流: ${result.success ? "成功" : "失败"}); rtsp_view.removeAllListeners();

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

RTSP视图插件

安装

配置

Android

使用方法

显示RTSP视图

关闭RTSP视图

检查RTSP视图状态

监听错误事件

API

startPull(...)

stopPull()

saveJpg(...)

saveMp4(...)

stopRecordMp4()

isRecording()

writeBinaryByJava(...)

startCameraPreview(...)

stopCameraPreview()

rtspUpdatePos(...)

rtspCreateDir(...)

示例

许可证

上传包

构建AAR（包含JNI+FFmpeg）

完整构建（AAR + TypeScript）

自动构建并发布

或手动构建后发布