VUE - 视频流直播

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