首页 > 其他分享 >VUE - 视频流直播

VUE - 视频流直播

时间:2022-10-23 19:57:13浏览次数:95  
标签:flash VUE 视频流 hls nginx 直播 video hlsjs rtmp

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

相关文章

  • vdoing主题vuepress的v1版本集成Artalk
    后端部署https://artalk.js.org/guide/backend/install.html#%E4%BD%BF%E7%94%A8-docker使用docker-compose部署即可,很简单。这里需要注意的是配置https。我的部署结......
  • 【Vue】fullcalendar - next ,prev切换回调处理
    如(4条消息)fullcalendar-next,prev等切换月份回调处理_Q.E.D.的博客-CSDN博客_fullcalendarprev这篇博客所说,fullcalendarnext,prev等切换月份的按钮是没有回调函......
  • 1.Vue系列——Vuex
    Note1-Vuex目录Note1-Vuex1.vuex2.关于状态管理3.安装Vuex4.vuex中的一些核心概念4.1vuex中的状态state4.2vuex中的Getter方法4.3vuex中的Mutation4.4vuex中的Actio......
  • 安装 vue devtools 时,npm i 和 npm run build 报错问题
    1、如果npmi报错,运行如下命令:npmi--legacy-peer-deps 2、如果npmrunbuild报错,运行如下命令:npminstall-gyarnyarninstall 3、在vscode中编辑ma......
  • Vue组件template中html代码自动补齐设置
    1、vscode设置==>扩展==>JSON==>在settings.json中编辑2、在最后}前添加如下代码保存文件即可//自动补全模板字符串"emmet.triggerExpansionOnTab":true,......
  • vue中工作总结
    1.vue中数据向下传递时,无法使用@close方法清除原因:传递的时候需要进行一波深拷贝方法:JSON.parse(JSON.stringify(obj))2.表格选择的时候无法再次点击取消使用elementui......
  • vue中如何使用Avue(详细过程加实际案例)
    在新项目中用到一个新的小玩意、还挺不错的、立马安装使用到自己的项目中。哈哈哈1、使用Avue的原因在项目中遇到通过点击加号实现输入框的增加、以及对该输入框的输入......
  • 前端Vue2-Day57
    处理跨域:①cors ②JSONP③配置代理服务器配置代理:均需要在vue.config.js中进行配置方法一:直接定义代理服务器转发地址proxy,客户端请求url为代理服务器地址 de......
  • 【转】VUE2 表格绑定
    资料及内容来自黑马程序员点击下载代码片断:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 基于VUE + Echarts 实现可视化数据大屏案件数据大屏
    前言......