当前位置:首页 » 《关于电脑》 » 正文

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

21 人参与  2024年10月31日 12:07  分类 : 《关于电脑》  评论

点击全文阅读


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地址:点击获取

三、录制直播

开启录制即可

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/180408.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1