vue3+Java直播推流拉流

前言

    希望这篇文章也给大家分享出来希望大家指出不足,当然市面上也有比较成熟的直播平台大家可以先去参考第三方直播平台如:"阿里云","获得直播","腾讯直播平台",我觉得还是自己搭建一个话有利于学习也比较能定制化

理论知识

    我们首先要知道我们做的东西步骤:

            1.他们这种视频以及摄像头又或是连麦是如何传输数据的?

                    流媒体协议介绍（rtp/rtcp/rtsp/rtmp/mms/hls）_流媒体协议有哪些-CSDN博客

            2.如何做到可以一个摄像头直播多平台去开,C端能看到?

                    **我们首先将本地直播也就是本机直播搭建起来,我们直接使用WebRtc来实现直播功能,他是点对点的不经过服务端**

                    我们可以用到obs推流工具将我们摄像头或是屏幕的内容推到其他平台也就是其他地方(模拟一个摄像头简单来说),下面两句话是阿里云官方解释的推流和拉流

                    **推流是把采集阶段封装好的音视频直播流推送到阿里云直播服务中心的过程。**

** 拉流是将第三方直播流地址拉取到阿里直播中心进行加速分发的过程。**

** ** 3.实时弹幕如何去实现?

** 1.这里就讲到一个技术栈了客户端和服务端实时通信:websocket协议**,websocket是基于http之上的传输协议，客户端向服务端发送http请求,也就是客户端(用户)发送弹幕直接可以实时去到服务端流程:客户端发送弹幕信息-->通过长连接通知服务端-->服务端检查弹幕是否合法-->通知所有客户端-->前端显示

                    2.MQ或者Redis缓存实现:

                            使用MQ实现的话,流程是:**发送弹幕请求服务端-->服务端将消息放入队列中-->批量获取消息队列消息的-->返回客户端**

** 咱们使用Redis缓存来实现,而且后续的在线人数,排行榜等信息都可以用Redis实现,流程图**

** **

快速实现

因为有点事情加上工作有点忙我就直接找了别人写好的现成前后端的处理方式 技术栈：Red5+hls协议+vue3+OBS工具推流

这里还是大概讲一下直播播放的一个流程:使用Java去生成推流rtmp推流地址===>放入OBS工具===>前端使用hls.js像服务端发送请求==>接受到请求之后会返回一个ts片段回来===>前端接收到了直接使用这个片段可以进行播放

注意点:

1.任何协议都会有延迟只不过是延迟高低而已使用hls的话延迟大概在10-15秒,当然你可以直接在OBS更改配置让请求发送更快速,那样的话你的前端处理的也就更快,不过最好根据你服务器和计算机的配置来发送请求别太快了

后端

我这里直接贴上作者的gitee地址,我是快速直接找了一个项目:

git地址:red5_hls: 本项目是由springboot构建的red5流媒体服务器。服务添加了hls支持http请求支持

下载jdk1.8可以安装依赖可以直接跑起来,使用里面的一个推流地址(可以进行更改),这里面有的很老的依赖不用管了,先跑起来吧,后续想自己搭建一个的话也可以去百度流程(建议第三方)

如果你是微服务的话,把这个项目变成一个推流服务就好了,专门做直播推流的

就可以开始直播了,目前只是进行推流

如果遇到点击开始直播OBS卡死退出的问题就是推流地址错了

前端

1.自定义组件接收一个字符串拉流地址

<template>
  <div class="playVideo-layout">
    <!-- 播放器 -->
    <div id="app-container" class="video-box">
      <video
        crossOrigin="anonymous"
        ref="videoElement"
        id="videoElement"
        controls
        muted
        style="width: 100%; height: 100%; object-fit: cover"
      ></video>
    </div>
  </div>
</template>

<script>
import Hls from 'hls.js';
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';

export default {
  props: {
    hlsUrl: String,
  },

  setup(props) {
    const videoElement = ref(null);
    let hlsInstance = null;

    const initializeHls = () => {
      if (Hls.isSupported()) {
        hlsInstance = new Hls();
        hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
          setTimeout(() => {
            if (videoElement.value) videoElement.value.play();
          }, 1000);
          console.log('加载成功');
        });
        hlsInstance.on(Hls.Events.ERROR, (event, data) => {
          console.error('HLS 错误:', data.fatal, data);
        });
      } else {
        console.error('HLS 不支持');
      }
    };

    const loadVideo = (url) => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
      if (Hls.isSupported() && videoElement.value) {
        hlsInstance = new Hls();
        hlsInstance.loadSource(url);
        hlsInstance.attachMedia(videoElement.value);
      }
    };

    watch(() => props.hlsUrl, (newUrl) => {
      loadVideo(newUrl);
    });

    onMounted(() => {
      initializeHls();
      if (props.hlsUrl) {
        loadVideo(props.hlsUrl);
      }
    });

    onBeforeUnmount(() => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
    });

    return {
      videoElement,
    };
  },
};
</script>

我这个组件因为我是用的nuxt框架,所以我的结构就是,components下面的playVideo.vue项目

2.使用

这里的拉流地址:hls发送的是一个http请求,所以拉流也是http请求发送的,可以去看看gitee仓库那里写的拉流地址,最后能播放就算本地完成了,部署到线上的话会有一个问题就是可能拉流的地址和域名不一样,会发生跨域,可以直接使用nginx代理一下就行

这样就算成功了