2分钟做一个Vue实时直播系统

Jacquelyn38
• 阅读 1738

前言

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

第一步,购买云直播服务

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

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

2分钟做一个Vue实时直播系统

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

2分钟做一个Vue实时直播系统

https://obsproject.com/

第三步,设置OBS

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

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

2分钟做一个Vue实时直播系统

第四步,开启推流

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

2分钟做一个Vue实时直播系统

第五步,写代码

安装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实时直播系统


作者:「Vam的金豆之路」

主要领域:「前端开发」

我的微信:「maomin9761」

微信公众号:「前端历劫之路」

2分钟做一个Vue实时直播系统


本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/vNwKjchLFi-j7lgRc7txHw,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
2年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Peter20 Peter20
2年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
4月9日JindoFS系列直播【存储计算分离场景的计算适应优化】
主题:存储计算分离场景的计算适应优化时间:2020.4.9(周四)19:00参与方式:扫描下方二维码加入钉钉群,群内直接观看或点击直播间链接:https://developer.aliyun.com/live/2592讲师:王道远花名健身,阿里云EMR技术专家,ApacheSpa
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
一朵云 一朵云
6个月前