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


Posted in Javascript onJune 05, 2020

前言

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

第一步,购买云直播服务

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

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

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实时直播系统的示例代码

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

Javascript 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
js中switch case循环实例代码
Dec 30 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
JS删除数组指定值常用方法详解
Jun 04 #Javascript
Vue项目接入Paypal实现示例详解
Jun 04 #Javascript
Paypal支付不完全指北
Jun 04 #Javascript
You might like
php中stream(流)的用法
2014/03/25 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
jquery $.ajax入门应用二
2008/11/19 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
NumPy排序的实现
2020/01/21 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
旅行社各个岗位职责
2014/03/15 职场文书
小学教师寄语大全
2014/04/03 职场文书
给学校建议书范文
2014/05/13 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
经典祝酒词大全
2015/08/12 职场文书
七年级作文之冬景
2019/11/07 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript