uni-app 播放 rtsp协议直播视频

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 播放 rtsp协议直播视频

如何在uni-app中支持RTSP协议的直播视频

问题描述

RT 想请问 uni-app 如何支持 rtsp 协议的直播视频

26 回复

目前rtsp在小程序和app里使用不同的开发方式。 在条件编译里写各自的代码。 微信的需要参考微信直播的开发文档, app里播放就是用video标签。 但推流在app里这么用 http://ask.dcloud.net.cn/article/13416。 http://ask.dcloud.net.cn/article/35036


video = new plus.video.VideoPlayer(‘video’,{ src:‘rtmp://live.hkstv.hk.lxdns.com/live/hks’ }); 在uni-app 里面是没有dom 所以没有办法有第一个参数 ‘video’。 uni-app 里面需要做什么变化吗?

不用占位div。js传位置、大小,但是需要获取当前显示的webview(http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getTopWebview)并把直播控件append到这个webview上。 注意调用getTopWebview的时机,如果获取到的webview不对,需要延迟一下再获取

我测试了一下 rtmp 前缀是可以的 但是 rtsp 前缀就不可以 请问是为什么呢

不过videoplayer没必要使用plus的api,直接用video标签就可以。livepusher才用plus的api

但是为什么我用 rtsp 是不行 一片黑 用 rtmp 就是可以的

回复 jimmy_zejia: 新建5+app,选Hello H5+,真机运行,里面有视频示例,把你的rtmp地址贴进去,看看能不能跑。再看看其他工具能不能跑你的地址。看看是视频本地的问题还是我们有兼容性问题

回复 DCloud_heavensoft:不能跑 但是用 vlc 是可以跑的

回复 DCloud_heavensoft:rtmp 是可以的

回复 jimmy_zejia: 手机上的vlc能跑?能的话把地址贴出来,我们测试下

回复 DCloud_heavensoft: 不是手机上的 VLC。 我用电脑软件『VLC』 测试地址是否正常。在软件上两个地址都是正常的。但是在 demo 里面就只有一个可以用

回复 jimmy_zejia: 您好 我复制了这行代码之后 报错,Error in onReady hook: “ReferenceError: plus is not defined”,还应该引入啥文件吗?

回复 jimmy_zejia: 这行代码

video = new plus.video.VideoPlayer(‘video’,{

src:‘rtmp://live.hkstv.hk.lxdns.com/live/hks’

请教以下,APP直接用video组件播放mp4格式视频,报错“The element has no supported sources”,怎么解决啊

回复 jimmy_zejia: 请问问题解决了吗?我也遇到相同的问题了?无法播放rtsp,但rtmp可以播放

请问怎么播放rtmp格式的视频呀!(视频地址:rtmp://123.157.66.34:1935/vod/file/cloud://123.157.66.34:6021/tracks/66_f5137e2270576e7cfa9309f7b8e50bcf?range=20190716T202226-20190716T202235&fileformat=1&headlen=40&recordtype=0;auth=admin:Hik12345$)

2022年08月19日
rtsp确实不支持

rtmp也跑不了吧,能把你的代码给我看看吗?

播放不了啊,老哥,你是怎么做的

解决了吗 老哥

在uni-app中直接播放RTSP协议的直播视频是一个挑战,因为RTSP(Real-Time Streaming Protocol)是一种网络控制协议,通常用于流媒体服务器和客户端之间的通信,而HTML5标准的<video>标签并不直接支持RTSP。为了在uni-app中实现RTSP流的播放,通常需要借助第三方库或服务端转码。

以下是一个基本的实现思路,利用FFmpeg将RTSP流转码为HLS(HTTP Live Streaming),然后在uni-app中通过<video>标签播放HLS流。这涉及两部分:服务端转码和客户端播放。

服务端转码(使用FFmpeg)

首先,你需要在服务器上安装FFmpeg,并编写一个脚本来将RTSP流转码为HLS。以下是一个简单的FFmpeg命令示例:

ffmpeg -i rtsp://your_rtsp_stream_url -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls /path/to/hls/playlist.m3u8

这个命令会创建一个HLS播放列表(playlist.m3u8)和对应的TS片段文件。

客户端播放(uni-app)

在uni-app中,你可以直接使用<video>标签来播放HLS流。以下是一个简单的示例:

<template>
  <view>
    <video :src="hlsUrl" controls autoplay></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hlsUrl: 'http://your_server_ip/path/to/hls/playlist.m3u8' // 替换为你的HLS播放列表URL
    };
  }
};
</script>

<style scoped>
video {
  width: 100%;
  height: auto;
}
</style>

在这个例子中,hlsUrl是你的HLS播放列表的URL。确保这个URL在你的uni-app应用中是可以访问的。

注意事项

  1. 服务器配置:确保你的服务器能够处理HLS流的分发,这可能涉及到配置CORS(跨源资源共享)策略。
  2. 延迟:由于HLS的工作原理,播放可能会有一定的延迟(通常是几秒钟)。
  3. 带宽:HLS会生成多个分辨率的TS片段,客户端会根据其带宽选择最合适的片段进行播放。确保你的服务器有足够的带宽来处理这些请求。
  4. FFmpeg安装:根据你的操作系统,FFmpeg的安装方法可能会有所不同。你可以参考FFmpeg的官方文档来获取安装指南。

通过上述方法,你可以在uni-app中播放RTSP协议的直播视频。

回到顶部