WEBRTC+SRS 边录边传 网页直播推流

vue项目实现网页在线直播，并实现录制直播，也可以理解为边录边传
以下为效果，左侧自己写的推流端，右侧为拉流端

资源准备

序号	资源名称
1	云服务器
2	域名一个

一、安装srs流媒体服务器

宝塔网站管理这里点击设置添加上域名并设置SSL开启https

完成后进入管理面板获取推流地址

二、代码联调

<template>
  <div>
    <input
      type="text"
      v-model="webrtcUrl"
      placeholder="输入WebRTC URL"
      style="width: 100%"
    />
    <button @click="startPublisherBtn">开始推流</button>
    <button @click="stopPublisherBtn">关闭推流</button>
    <video
      ref="pusher"
      autoplay
      :srcObject="stream"
      style="width: 100%; height: auto"
    />
  </div>
</template>

<script>
import Srs from "@/assets/js/srs.sdk";
import { onMounted, ref, onUnmounted, nextTick } from "vue";

export default {
  name: "webrtcPusher",
  setup() {
    const pusher = ref(null); // 使用 null 而不是 undefined
    const webrtcUrl = ref(
      "webrtc://live.abc.com/live/bkdbjf?secret=c447ab4e83884139907d7cbdaeaf9a6e"
    );

    let rtcPublisher = null; // 用于存储RtcPublisher实例
    let rtcPlayer = null; // 用于存储RtcPlayer实例

    const startPublisher = async () => {
      try {
        rtcPublisher = new Srs.SrsRtcPublisherAsync(); // 创建RtcPublisher实例
        const session = await rtcPublisher.publish(webrtcUrl.value); // 开始推流
        console.log("推流成功", session);
        await nextTick(); // 等待DOM更新，确保pusher是可用的
        // 如果需要，这里可以添加播放器的初始化代码（如果RtcPublisher也提供了流）
      } catch (error) {
        console.error("推流失败", error);
        // 如果RtcPublisher有close方法，调用它以关闭推流
        if (rtcPublisher && rtcPublisher.close) {
          rtcPublisher.close();
        }
      }
    };

    const startPlayer = async () => {
      try {
        rtcPlayer = new Srs.SrsRtcPlayerAsync(); // 创建RtcPlayer实例
        await rtcPlayer.play(webrtcUrl.value); // 开始播放
        await nextTick(); // 等待DOM更新，确保pusher是可用的
        // 设置视频源的srcObject
        if (rtcPlayer.stream && pusher.value) {
          pusher.value.srcObject = rtcPlayer.stream;
        }
      } catch (error) {
        console.error("播放失败", error);
        // 如果RtcPlayer有close或stop方法，调用它以停止播放
        if (rtcPlayer && (rtcPlayer.close || rtcPlayer.stop)) {
          // 假设有一个close或stop方法可用
          rtcPlayer.close?.() || rtcPlayer.stop?.();
        }
      }
    };
    const startPublisherBtn = async () => {
      await startPublisher();
      await startPlayer();
    };
    const stopPublisherBtn = async () => {
      if (rtcPublisher && rtcPublisher.close) {
        rtcPublisher.close();
      }
      if (rtcPlayer && (rtcPlayer.close || rtcPlayer.stop)) {
        rtcPlayer.close?.() || rtcPlayer.stop?.();
      }
    };
    
    onUnmounted(() => {
      // 组件卸载时关闭推流和播放
      if (rtcPublisher && rtcPublisher.close) {
        rtcPublisher.close();
      }
      if (rtcPlayer && (rtcPlayer.close || rtcPlayer.stop)) {
        rtcPlayer.close?.() || rtcPlayer.stop?.();
      }
    });
    return { pusher, webrtcUrl, startPublisherBtn, stopPublisherBtn };
  },
};
</script>
<style scoped>
.mirrored-video {
  transform: scaleX(-1);
  width: 100%;
  height: auto;
}
</style>

srs.sdk.js地址：点击获取

三、录制直播

开启录制即可