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

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

19 人参与  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://zhangshiyu.com/post/180408.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

最新文章

  • 全书浏览七零囤满物资,下乡养大爷救小姨(伍子寻郝文静张招娣)_七零囤满物资,下乡养大爷救小姨(伍子寻郝文静张招娣)全书结局
  • (头条)姜霁月封临川小说(这一世,我再也不会为任何人委屈求全)整本免费版阅读无广告(姜霁月封临川)
  • 你惹她干嘛?小师妹她修缺德道番外(谢萤姬鹤渊)TXT+后续+结局在线阅读
  • 荒年求生!我农场无限升级,皇帝都跪了:结局+番外免费品鉴+起始篇章(鱼宸汐)阅读
  • 我本忠臣,你们却让我谋反当王?常读_赵羽后续加长_小说后续在线阅读_无删减免费完结_
  • 荒年求生!我农场无限升级,皇帝都跪了小说(鱼宸汐)小说***下载_章节前文+后续(荒年求生!我农场无限升级,皇帝都跪了)
  • 靳砚修沈瓷后续(等不到白发苍苍)(靳砚修沈瓷)整本畅享在线+无广告结局
  • 热更章节_笔趣阁(白月光哪有联姻老婆香)霍彻孟时初白月光哪有联姻老婆香后续全本浏览阅读
  • 老公为哄情人开心,把女儿吊威亚上高温(沈思瑜,都说,许南枝)全书免费_(沈思瑜,都说,许南枝)老公为哄情人开心,把女儿吊威亚上高温后续(沈思瑜,都说,许南枝)
  • 要不见,便不会念凤九歌无和后续(凤九歌无和)全篇在线阅读前传
  • 等不到白发苍苍小说完本章节前文+全篇阅读(靳砚修沈瓷)连载中
  • 顾青柠陆景煜电子书+番外篇章+(宁嫁牌位不当妾,国公府我说了算)免费版在线阅读

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

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