海康威视rtsp流转换为rtmp m3u8的流之后
怎么在vue页面上展示呢
或者有什么别的方式推流 可以方便展示的
麻烦尽量给出详细点的代码 并不是前端开发人员 谢谢
在Vue页面上展示海康威视的RTMP或HLS流需要使用HTML5 video标签。你可以在Vue组件中嵌入一个video标签，并将src属性设置为RTMP或HLS流的URL。
以下是一个简单的Vue组件示例，可以用来展示RTMP或HLS流：
<template>
<div>
<video :src="videoSrc" controls autoplay></video>
</div>
</template>
<script>
export default {
name: 'VideoPlayer',
props: {
streamUrl: {
type: String,
required: true
}
},
computed: {
videoSrc() {
// 根据streamUrl生成video标签的src属性值
const protocol = this.streamUrl.startsWith('rtmp') ? 'rtmp://' : 'https://';
const url = this.streamUrl.replace('rtmp://', '').replace('http://', '').replace('https://', '');
const baseUrl = protocol + url.split('/')[0];
const streamName = url.split('/')[1];
if (this.streamUrl.startsWith('rtmp')) {
return `${baseUrl}/live/${streamName}`;
} else {
return `${baseUrl}/hls/${streamName}.m3u8`;
}
}
}
}
</script>
在这个组件中，我们将传递给组件的海康威视RTMP或HLS流URL作为props传递，并使用计算属性将该URL转换为video标签的src属性值。
你可以将此组件插入到您的Vue页面中，如下所示：
<template>
<div>
<VideoPlayer :streamUrl="streamUrl" />
</div>
</template>
<script>
import VideoPlayer from '@/components/VideoPlayer.vue';
export default {
name: 'MyPage',
components: {
VideoPlayer
},
data() {
return {
streamUrl: 'your stream URL'
}
}
}
</script>
在这个示例中，我们使用了一个名为VideoPlayer的组件，并将海康威视的流URL作为props传递给该组件。请确保将"your stream URL"替换为你自己的流URL。
您好，如果您已经成功将海康威视rtsp流转换为rtmp m3u8的视频流了，那您就可以直接在页面上插入视频播放器组件进行播放了啊。
1、可以先下载一个vlc播放器，复制您转码后的rtmp 流地址或者m3u8地址，然后放到vlc播放器中进行播放，测试该视频流是否可播放。
2、测试视频流没有问题后，在vue前端，播放该视频流：
1）安装视频播放器组件：
npm install vue-video-player --save
2）在main.js中引入视频播放器组件：
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
3）在vue页面使用：
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
components: {
videoPlayer
}
}
4）vue页面的html部分：
<template>
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
</template>
5）另外你还需要配置下视频播放器的一些属性，可以刚下载的视频播放器的组件的js文件中进行配置。
详细的可以参考：https://www.jianshu.com/p/42550066fbf5
参考GPT和自己的思路，要在Vue页面上展示海康威视的rtmp流，可以使用video.js这个开源的JavaScript视频播放器。具体步骤如下：
1 在Vue项目中安装video.js和videojs-flash插件：
npm install --save video.js videojs-flash
2 在Vue组件中引入video.js和videojs-flash插件：
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
3 在Vue组件中定义video标签和video.js实例：
<template>
<div>
<video id="player" class="video-js vjs-default-skin"></video>
</div>
</template>
<script>
export default {
name: 'VideoPlayer',
mounted() {
// 初始化video.js实例
this.player = videojs('player', {
autoplay: true,
controls: true,
preload: 'auto',
techOrder: ['flash', 'html5'],
flash: {
swf: '/video-js.swf'
}
}, function () {
// 加载rtmp流
this.src({
src: 'rtmp://xxx.xxx.xxx.xxx:1935/live/stream',
type: 'rtmp/flv'
});
});
},
beforeDestroy() {
// 销毁video.js实例
if (this.player) {
this.player.dispose();
}
}
}
</script>
<style>
/* video.js样式 */
@import '~video.js/dist/video-js.css';
</style>
其中，'rtmp://xxx.xxx.xxx.xxx:1935/live/stream'是海康威视rtmp流的地址。
需要注意的是，video.js的Flash播放器需要一个.swf文件，可以从video.js的GitHub仓库中下载，然后放到public目录下。
另外，如果海康威视rtsp流转换为rtmp m3u8的流之后，可以直接在Vue页面上使用video标签来播放m3u8流，无需使用video.js。代码如下：
<template>
<div>
<video id="player" src="http://xxx.xxx.xxx.xxx:1935/live/stream/playlist.m3u8"></video>
</div>
</template>