2分鐘實現(xiàn)一個Vue實時直播系統(tǒng)的示例代碼
前言
我們在不敲代碼的時候可能會去看游戲直播,那么是前臺怎么實現(xiàn)的呢?下面我們來講一下。
第一步,購買云直播服務(wù)
首先,你必須去阿里云或者騰訊云注冊一個直播服務(wù)。也花不了幾個錢,練手的話,幾十塊錢就夠了。
這里我拿阿里云舉例,購買完了,配置好推流域名跟播流域名,下面我們將進行地址生成。記住下面生成的地址,下面會用到。
第二步,下載本地推流工具
第三步,設(shè)置OBS
在第一步中圖片底部有推流地址,需要注意,分為兩部分填入下方圖所示。
在AppName字段 為分界線分為兩部分。輸入完畢,點擊確定,就好了。
第四步,開啟推流
在OBS右方有個開啟推流工具,第一次點開你會覺得黑屏,那是你沒有
選擇直播畫面,在來源選項中,點擊加號,選擇對應(yīng)來源,我這里選擇的是顯示器捕獲。
第五步,寫代碼
安裝hls.js
npm i hls.js -S
安裝dplayer,你可以進入官網(wǎng),配置更加豐富的api。
npm i dplayer -S
<!-- 現(xiàn)場課堂 --> <template> <div class="center"> <div class="live"> <div id="dplayer"></div> </div> </div> </template> <script> /* 我這里使用的是m3u8流,你們也可以選擇其他方式,dplayer官網(wǎng)都有詳細介紹。 */ 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>
結(jié)語
以下為效果圖:
到此這篇關(guān)于2分鐘實現(xiàn)一個Vue實時直播系統(tǒng)的示例代碼的文章就介紹到這了,更多相關(guān)Vue實時直播系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于vue+openlayer實現(xiàn)地圖聚合和撒點效果
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包,用于顯示地圖及空間數(shù)據(jù),并與之進行交互,具有靈活的擴展機制,本文給大家介紹vue+openlayer實現(xiàn)地圖聚合效果和撒點效果,感興趣的朋友一起看看吧2021-09-09Ant Design moment對象和字符串之間的相互轉(zhuǎn)化教程
這篇文章主要介紹了Ant Design moment對象和字符串之間的相互轉(zhuǎn)化教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10在 Typescript 中使用可被復(fù)用的 Vue Mixin功能
這篇文章主要介紹了在 Typescript 中使用可被復(fù)用的 Vue Mixin功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例
今天小編就為大家分享一篇vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11