uni-app使用video组件播放rtsp格式海康摄像头视频，播放失败如何取消提示

uni-app使用video组件播放rtsp格式海康摄像头视频，播放失败如何取消提示

16 回复

请详细说明在什么设备上复现的问题，上传复现问题示例项目。

更多关于uni-app使用video组件播放rtsp格式海康摄像头视频，播放失败如何取消提示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，我刚才上传了复现问题的示例项目，以及在描述里面添加了问题复现设备和软件版本的描述，麻烦您查看一下

回复 8***@qq.com: 补充系统版本等信息呀

回复 DCloud_App_Array: 你好，抱歉，第一次提问，不熟悉提交的格式，我重新完善了一下问题，麻烦您再帮着看一下

我试试

你好，请问这个问题在您那边能复现吗？

回复 8***@qq.com: 复现了 。但是现在还没时间处理。 你留个qq吧。 稍后qq上说

回复 DCloud_Android_DQQ: 851322691，你好，这是我的QQ

回复 8***@qq.com: 有验证。你加一下我 643833712

回复 DCloud_Android_DQQ: 抱歉，刚看到，我加你了

bug 已确认稍后版本修复

hx 3.3.1 alpha bug已修复

我这边也遇到这个问题嘞， hx 3.4.15。 这个问题还存在

回复 6***@qq.com: 你新提个问题吧，带上可以复现问题的信息。 原本的问题。加了题主的qq。确认修复了。

VLC多媒体播放器：https://ext.dcloud.net.cn/plugin?id=8762 有需要的可以看下，支持海康视频流rtsp:/account:password@ip:port

使用video组件直接播放RTSP流在uni-app中通常不可行，因为video组件依赖浏览器或小程序原生播放器，而它们普遍不支持RTSP协议。

要取消播放失败提示，最直接的方法是避免使用video组件直接播放RTSP流。你可以通过以下两种主流方案来实现播放并自然规避错误提示：

方案一：后端转码（推荐） 这是最稳定、兼容性最好的方案。

  1. 原理：在后端服务器（如FFmpeg、流媒体服务器）将摄像头的RTSP流转码为HLS（.m3u8）或FLV等标准格式。
  2. 前端实现：uni-app的video组件完美支持HLS（在App端需注意平台差异，可配合使用plus.video或条件编译）。
  3. 优点：全平台兼容，性能稳定，可直接使用原生组件。
  4. 关键代码示例（前端）：
    // 假设后端转码后提供了HLS地址
this.videoUrl = 'http://your-server/live/stream.m3u8';

    <video :src="videoUrl" controls></video>

方案二：使用第三方插件或SDK 如果必须在前端处理，可考虑：

  1. App端：使用支持RTSP的原生插件，如uni-plugin-stream或DC-UniVideo。这些插件封装了原生播放器，能直接播放RTSP。
  2. 关键步骤：
    • 在插件市场搜索并导入相关插件。
    • 按照插件文档配置和使用，通常会提供一个自定义组件替代原video组件。

关于“取消提示”的直接处理（治标不治本） 如果仍想尝试直接播放并屏蔽错误，可以监听video组件的错误事件，但不推荐用于生产环境：

<video :src="rtspUrl" @error="onVideoError" controls></video>

methods: {
    onVideoError(e) {
        console.log('播放失败，已静默处理', e);
        // 此处可设置一个标志位，在界面隐藏video组件或显示替代内容
        this.playFailed = true;
    }
}
回到顶部