2分钟实现一个Vue实时直播系统的示例代码

2024-11-27 06:47:48

前言

我们在不敲代码的时候可能会去看游戏直播，那么是前台怎么实现的呢？下面我们来讲一下。

第一步，购买云直播服务

首先，你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱，练手的话，几十块钱就够了。

这里我拿阿里云举例，购买完了，配置好推流域名跟播流域名，下面我们将进行地址生成。记住下面生成的地址，下面会用到。

第二步，下载本地推流工具

https://obsproject.com/

第三步，设置OBS

在第一步中图片底部有推流地址，需要注意，分为两部分填入下方图所示。

在AppName字段为分界线分为两部分。输入完毕，点击确定，就好了。

第四步，开启推流

在OBS右方有个开启推流工具，第一次点开你会觉得黑屏，那是你没有
选择直播画面，在来源选项中，点击加号，选择对应来源，我这里选择的是显示器捕获。

第五步，写代码

安装hls.js

npm i hls.js -S

安装dplayer，你可以进入官网，配置更加丰富的api。

npm i dplayer -S

<!-- 现场课堂 -->
<template>
 <div class="center">
  <div class="live">
   <div id="dplayer"></div>
  </div>
 </div>
</template>
<script>
/*
 我这里使用的是m3u8流，你们也可以选择其他方式，dplayer官网都有详细介绍。
*/
let Hls = require('hls.js');
import DPlayer from 'dplayer';
export default {
 name: "Live",
 methods: {
  // 直播
  live(){
     const dp = new DPlayer({
      live:true,
      container: document.getElementById('dplayer'),
      video: {
        url: 'https://live.carvedu.com/a/b.m3u8?auth_key=1589281526-0-0-02d0913b6a725efdb53f0deed823e418', // 示例地址
        type: 'customHls',
        customType: {
          customHls: function (video, player) {
            const hls = new Hls();
            hls.loadSource(video.src);
            hls.attachMedia(video);
          },
        },
      },
     });
  }
 },
 mounted() {
  this.live();
 },
};
</script>
<style scoped>
#dplayer{
 width: 100%;
 height: 500px;
}
</style>

结语

以下为效果图：

到此这篇关于2分钟实现一个Vue实时直播系统的示例代码的文章就介绍到这了,更多相关Vue实时直播系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue实现直播间点赞飘心效果的示例代码

前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @
Vue-cli-webpack搭建斗鱼直播步骤详解

前言想必大家都看过斗鱼直播吧?这次在下使用从github上面摸下来的API,为大家重现一下斗鱼网站的搭建,使用vue-cli-webpack来实现. 声明本文章所用API均从网络获取,本文作者不承担任何法律责任,请阅读本文的小伙伴们用于学习用途,不能用于商业! 如有侵权行为,请与作者联系,作者将于2日内删除. 效果 pc端移动端开始好,扯了这么久的淡,该开始构建项目了项目初始化初始化文件夹打开一个新文件夹,在命令行输入: vue init webpack 如果显示vue not
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un
Vue 莹石摄像头直播视频实例代码

Vue 莹石摄像头直播视频代码. HTML代码: <div class="mainClass" v-show="rtmp_url!=''"> <video id="myPlayer" controls playsinline webkit-playsinline autoplay> <source type="application/x-mpegURL" :src="http_url&q
2分钟实现一个Vue实时直播系统的示例代码

前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下. 第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务.也花不了几个钱,练手的话,几十块钱就够了. 这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成.记住下面生成的地址,下面会用到. 第二步,下载本地推流工具 https://obsproject.com/ 第三步,设置OBS 在第一步中图片底部有推流地址,需要注意,分为两部分填入下方图所示. 在AppName字
基于FLink实现实时安全检测的示例代码

目录研发背景场景描述组件版本日志结构技术方案关键代码主入口类 mapper算子 filter算子 keyBy算子窗口函数(核心代码) 最后一次map算子 ElasticSearch工具类事件实体类消息实体类研发背景公司安全部目前针对内部系统的网络访问日志的安全审计,大部分都是T+1时效,每日当天,启动Python编写的定时任务,完成昨日的日志审计和检测,定时任务运行完成后,统一进行企业微信告警推送.这种方案在目前的网络环境和人员规模下,呈现两个痛点,一是面对日益频繁的网络
3分钟纯 Java 注解搭个管理系统的示例代码

最近接触到个新项目,发现它用了一个比较有意思的框架,可以说实现了我刚入行时候的梦想,所以这里马不停蹄的和大家分享下. 在我刚开始工作接触的项目都还没做前后端分离,经常需要后端来维护页面,有时候觉得自己好像天生不适合干前端,你要是让我研究研究后端的技术,看个中间件源码啊,分析分析什么框架底层原理啊,这都问题不大,偶尔搞一下JS也可以.你要是让我写个css样式,那简直要命了,一点也提不起兴趣,不知道有没有跟我一样的. 今天要介绍的框架直接不用写页面了,话不多说,下边咱们直奔主题 Erupt一个通用后
基于Qt实现驾校科目考试系统的示例代码

目录 1.设置登录界面 2.登录功能实现 2.1验证邮箱地址 2.2账号密码登录 2.3密码隐藏 3.考试界面开发 3.1考试用时 3.2题目布局 3.3按钮布局 3.4提交分数 3.5窗口交互 4.发布项目 4.1更改编译路径 4.2设置图标 4.3通过dos进行项目打包 1.设置登录界面 LoginDialog::LoginDialog(QWidget *parent) : QDialog(parent), ui(new Ui::LoginDialog) { ui->setupUi(this
vue 运用mock数据的示例代码

本文介绍了vue 运用mock数据的示例代码,分享给大家,具体如下: 初始化你的项目话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦 vue init webpack 引入mock.js 安装 mockjs npm install --save-dev mockjs 引入到Vue原型上,方便使用 import mockjs from 'mockjs' Vue.prototype.$mock = Vue.$mock = mockjs.mock 以上引入到Vue原型上,可以使用 t
如何在vue中使用ts的示例代码

本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可
vue实现图片滚动的示例代码(类似走马灯效果)

上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde
C/C++实现个人收支系统的示例代码

昨天朋友委托我做一个基于C++的课程小设计,题目如下: 设计一个简单的个人收支管理系统,至少包括如下功能: 1.逐笔输入个人收入或支出的明细,写入到文件保存,可不断进行输入和追加. 输入的明细数据包括:收支明细类别编码.发生日期.金额.备注. 1)为了简化用户的输入,类别编码由字母和数字构成:"a"表示收入."b"表示支出,数字是大类下的编号.类别编码及类别名称的对应由自己定义.组织在程序中并输出展示.比如 a1 表示收入类的生活费,b1 表示支出类的学习,编号
使用OpenCV对车道进行实时检测的实现示例代码

项目介绍下图中的两条线即为车道: 我们的任务就是通过 OpenCV 在一段视频(或摄像头)中实时检测出车道并将其标记出来.其效果如下图所示: 这里使用的代码来源于磐怼怼大神,此文章旨在对其代码进行解释. 实现步骤 1.将视频的所有帧读取为图片: 2.创建掩码并应用到这些图片上: 3.图像阈值化: 4.用霍夫线变换检测车道: 5.将车道画到每张图片上: 6.将所有图片合并为视频. 代码实现 1.导入需要的库 import os import re import cv2 import numpy
C#建立测试用例系统的示例代码

引言很多时候,需要对类中的方法进行一些测试,来判断是否能按要求输出预期的结果. C#提供了快速创建单元测试的方法,但单元测试不仅速度慢不方便,大量的单元测试还会拖慢项目的启动速度. 所以决定自己搞个方便的测试用例. 控制台调用只需要简简单单的一句话测试用例.注册并Print(EnumEx.Name); 结果画面测试用例的实现 /// <summary> /// 提供测试用例的注册和运行功能,用来比对结果和预期值是否相同,向控制台输出结果. /// </summary> pu

2分钟实现一个Vue实时直播系统的示例代码

相关推荐

随机推荐