VUE - 视频流直播
推流：将直播的内容推送至服务器的过程。
拉流：指服务器已有直播内容，用指定地址进行拉取的过程。
本文主要说的是拉流。也就是客户端播放视频流。 视频流测试软件：VLC 播放器，可自行百度下载安装网络直播中常见的三种协议：RMTP 、HTTP-FLV 、HLS
RTMP 协议
推流一般使用RTMP协议。
但在客户端就不适用了。因为 RTMP 必须需要 flash 插件 ,主流浏览器默认不支持flash，需单独安装。
经测试：
需单独下载 安装flash，(adobe flash player ppapi)
flash 下载地址：https://www.flash.cn/download-wins
chrome 不可用
360浏览器 可用（有提示）
qq浏览器 可用
VUE 使用方法 ：
cnpm install video-js -S cnpm install videojs-flash -S
<template>
<div>
<div id="video-container">
<!-- https://blog.csdn.net/qq_45062261/article/details/113887381 -->
<video id="myvideo" width="800" height="600" class="video-js vjs-default-skin" controls>
<!-- RTMP直播源地址-->
<!-- <source :src="`rtmp://58.200.131.2:1935/livetv/cctv2`" /> -->
<source :src="`rtmp://ns8.indexforce.com/home/mystream`" />
</video>
<button @click="handlePlay">点击播放</button>
<button @click="handleClear">关闭销毁</button>
<button @click="again">再次初始化</button>
</div>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash";
export default {
data() {
return {
videoPlayer: null,
};
},
methods: {
//播放
handlePlay() {
this.videoPlayer = videojs("myvideo", {}, function () {
console.log("videojs播放器初始化成功");
});
this.videoPlayer.play();
},
//销毁
handleClear() {
this.videoPlayer.dispose(); //销毁
this.videoPlayer = null; //置空
},
//重新初始化
again() {
var myVideoDiv = document.getElementById("video-container");
myVideoDiv.innerHTML = `
<video id='myvideo' width="800" height="600" class="video-js vjs-default-skin" controls>
<!-- RTMP直播源地址-->
<source src="rtmp://xxxxxx.cn:1111/oopl/${this.xxxx}">
</video>
`;
},
},
};
</script>
<style lang="scss" scoped>
</style>
HLS 协议
使用H5播放
基于nginx的rtmp直播服务器 （参考：https://blog.csdn.net/qq1311256696/article/details/107233126）
安装加载nginx-rtmp-module模块的nginx
首先下载nginx
到 https://github.com/arut/nginx-rtmp-module 下载rtmp模块(git clone https://github.com/arut/nginx-rtmp-module.git)
分别解压nginx和rtmp模块，使他们在同一目录下。
编译nginx
./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module.1.1.4 --with-http_ssl_module
make && make install 安装
配置rtmp模块
rtmp {
server {
listen 9999;
application myapp {
live on;
}
application live {
live on; #开启实时
hls on; #开启hls
hls_path /usr/local/etc/nginx/html/multimedia/hls; #hls的ts切片存放路径
hls_fragment 2s; ＃本地切片长度
hls_playlist_length 6s; ＃HLS播放列表长度
}
}
}
使用rtmp协议并且监听了9999端口，如果我们的推流地址填写的是rtmp://ip:9999/myapp，那么就是纯粹的rmtp协议的流，如果推流地址填写的是rmtp://ip:9999/live，那么推流之后会在/usr/local/etc/nginx/html/multimedia/hls目录下生成很多ts格式的视频切片和一个m3u8格式的文件，我们想要用http协议访问这个m3u8文件就需要再配置http模块。
配置http模块
location /live {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /usr/local/etc/nginx/html/multimedia/hls/;
add_header Cache-Control no-cache;
}
当我们的推流地址填写的是rtmp://ip:9999/live/room1时，使用http://ip:80/live/room1.m3u8就能把rtmp转成hls访问这个直播流了。
- 新建文件夹
mkdir -p /usr/local/etc/nginx/html/multimedia/hls/ - 重启nginx
nginx -s reload
以上就完成了直播服务器的搭建。
VUE 使用方法：
npm install hls.js
<!-- https://blog.csdn.net/a15297701931/article/details/115478652 -->
<template>
<div class="playVideo-layout">
<!-- 播放器 -->
<div id="app-container" class="video-box">
<video
ref="videoElement"
:src="videoUrl"
id="videoElement"
controls
muted
style="width: 100%; height: 100%; object-fit: fill"
></video>
</div>
</div>
</template>
<script>
import hlsjs from "hls.js";
export default {
components: {},
data() {
return {
videoUrl: "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",//这里书写路径，例
};
},
mounted() {
this.show();
},
methods: {
//播放
show() {
this.video = this.$refs.videoElement; //定义挂载点
console.log(this.video);
if (hlsjs.isSupported()) {
this.hlsjs = new hlsjs();
this.hlsjs.loadSource(this.videoUrl);//设置播放路径
this.hlsjs.attachMedia(this.video);//解析到video标签上
console.log(this.hlsjs);
this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
this.video.play();
console.log("加载成功");
});
this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
console.log(event, data);
// 监听出错事件
console.log("加载失败");
});
} else {
this.$message.error("不支持的格式");
return;
}
},
//停止播放
closeVideo() {
if (this.hlsjs) {
this.$refs.videoElement.pause();
this.video.pause();
this.hlsjs.destroy();
this.hlsjs = null;
this.$emit("closeVideo");
}
},
},
computed: {},
watch: {},
filters: {},
};
</script>
参考文档：https://blog.csdn.net/qq_45062261/article/details/113887381
参考文档：https://blog.csdn.net/qq1311256696/article/details/107233126
标签：flash,VUE,视频流,hls,nginx,直播,video,hlsjs,rtmp From： https://www.cnblogs.com/1285026182YUAN/p/16819234.html