kaimo_rtsp_plugin

# RTSP视图插件这是一个用于在Capacitor应用中显示RTSP视频流的插件。 ## 安装 ```bash npm install rtsp npx cap sync ``` ## 配置 ### Android 在Android项目的MainActivity.java文件中注册插件： ```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中添加了网络权限： ```xml <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> ``` ## 使用方法 ### 显示RTSP视图 ```typescript 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视图 ```typescript import { rtsp_view } from 'rtsp'; // 关闭RTSP视图 await rtsp_view.closeRtspView(); ``` ### 检查RTSP视图状态 ```typescript import { rtsp_view } from 'rtsp'; // 检查RTSP视图是否显示 const result = await rtsp_view.isRtspViewShowing(); console.log(`RTSP视图状态: ${result.isShowing ? "显示中" : "已关闭"}`); ``` ### 监听错误事件 ```typescript import { rtsp_view } from 'rtsp'; // 监听RTSP错误事件 rtsp_view.addListener('rtspError', (error) => { console.error(`RTSP错误: ${error.message}`); }); ``` ## API <docgen-index> * [`startPull(...)`](#startpull) * [`stopPull()`](#stoppull) * [`saveJpg(...)`](#savejpg) * [`saveMp4(...)`](#savemp4) * [`stopRecordMp4()`](#stoprecordmp4) * [`isRecording()`](#isrecording) * [`writeBinaryByJava(...)`](#writebinarybyjava) * [`startCameraPreview(...)`](#startcamerapreview) * [`stopCameraPreview()`](#stopcamerapreview) * [`rtspUpdatePos(...)`](#rtspupdatepos) * [`rtspCreateDir(...)`](#rtspcreatedir) </docgen-index> <docgen-api>  ### startPull(...) ```typescript startPull(options: { url: string; }) => Promise<{ success: boolean; }> ``` 开始拉流 (JNI功能) | Param | Type | Description | | ------------- | ----------------------------- | ------------- | | **`options`** | <code>{ url: string; }</code> | 包含RTSP URL的选项 | **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### stopPull() ```typescript stopPull() => Promise<{ success: boolean; }> ``` 停止拉流 (JNI功能) **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### saveJpg(...) ```typescript saveJpg(options: { directUrl: string; }) => Promise<{ success: boolean; }> ``` 保存JPEG图像 (JNI功能) | Param | Type | Description | | ------------- | ----------------------------------- | ----------- | | **`options`** | <code>{ directUrl: string; }</code> | 包含保存路径的选项 | **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### saveMp4(...) ```typescript saveMp4(options: { directUrl: string; }) => Promise<{ success: boolean; }> ``` 开始录制MP4视频 (JNI功能) | Param | Type | Description | | ------------- | ----------------------------------- | ----------- | | **`options`** | <code>{ directUrl: string; }</code> | 包含保存路径的选项 | **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### stopRecordMp4() ```typescript stopRecordMp4() => Promise<{ success: boolean; }> ``` 停止录制MP4视频 (JNI功能) **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### isRecording() ```typescript isRecording() => Promise<{ recording: boolean; }> ``` 获取录制状态 (JNI功能) **Returns:** <code>Promise<{ recording: boolean; }></code> -------------------- ### writeBinaryByJava(...) ```typescript writeBinaryByJava(options: { url: string; data: string; replace: boolean; isFirstChunk: boolean; isLastChunk: boolean; chunkIndex: number; }) => Promise<{ success: boolean; }> ``` 写入二进制文件数据 | Param | Type | Description | | ------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------ | | **`options`** | <code>{ url: string; data: string; replace: boolean; isFirstChunk: boolean; isLastChunk: boolean; chunkIndex: number; }</code> | 包含文件路径和数据的选项 | **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### startCameraPreview(...) ```typescript 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`** | <code>{ camera: 'rear' \| 'front'; x: number; y: number; width: number; height: number; toBack?: boolean; tapPhoto?: boolean; tapFocus?: boolean; alpha?: number; }</code> | 相机预览配置选项 | **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### stopCameraPreview() ```typescript stopCameraPreview() => Promise<{ success: boolean; }> ``` 停止相机预览 **Returns:** <code>Promise<{ success: boolean; }></code> -------------------- ### rtspUpdatePos(...) ```typescript rtspUpdatePos(options: { x: number; y: number; width: number; height: number; }) => Promise<{ success: boolean; message: string; }> ``` 更新RTSP预览位置 - 接收HTML滑动后的坐标变化 | Param | Type | Description | | ------------- | --------------------------------------------------------------------- | ----------- | | **`options`** | <code>{ x: number; y: number; width: number; height: number; }</code> | 坐标参数 | **Returns:** <code>Promise<{ success: boolean; message: string; }></code> -------------------- ### rtspCreateDir(...) ```typescript rtspCreateDir(options: { directUrl: string; }) => Promise<{ success: boolean; message: string; }> ``` | Param | Type | | ------------- | ----------------------------------- | | **`options`** | <code>{ directUrl: string; }</code> | **Returns:** <code>Promise<{ success: boolean; message: string; }></code> -------------------- </docgen-api> ## 示例参见example-app目录中的示例应用。 ## 许可证 MIT git remote add origin https://github.com/jingtian2163/ionic_html_view git remote set-url origin git@github.com: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/cli@6.20.0 npm install -g @angular/cli@12.2.17 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();