uni-app 播放 rtsp协议直播视频
uni-app 播放 rtsp协议直播视频
如何在uni-app中支持RTSP协议的直播视频
问题描述
RT 想请问 uni-app 如何支持 rtsp 协议的直播视频
目前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不对,需要延迟一下再获取
不过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应用中是可以访问的。
注意事项
- 服务器配置:确保你的服务器能够处理HLS流的分发,这可能涉及到配置CORS(跨源资源共享)策略。
- 延迟:由于HLS的工作原理,播放可能会有一定的延迟(通常是几秒钟)。
- 带宽:HLS会生成多个分辨率的TS片段,客户端会根据其带宽选择最合适的片段进行播放。确保你的服务器有足够的带宽来处理这些请求。
- FFmpeg安装:根据你的操作系统,FFmpeg的安装方法可能会有所不同。你可以参考FFmpeg的官方文档来获取安装指南。
通过上述方法,你可以在uni-app中播放RTSP协议的直播视频。