Detailed explanation of Vue's live broadcast function
|
Recently, the company happened to be doing live broadcasting, so today I will record the pitfalls I encountered. The company's server uses Amazon AWS, so you can just look at the official API. The official address of AWS is AWS live broadcast API.
According to the mature method on the Internet, video.js is used, and then AWS makes a layer of encapsulation, so we use it directly. Here we use the vue version of vue-video-player Install the relevant packages first npm install vue-video-player --save Import vue-video-player into main.js
// The first one is the style of videoJs, and the second one is the style of vue-video-player. Considering that other business components may also use video playback, they are placed in main.js require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
/*Import video playback component*/
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)
Import components and modify configuration parameters
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@statechanged="playerStateChanged($event)"
></video-player>
Modify parameters and add src
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //Playback speed autoplay: false, //If true, the browser starts playback when it is ready.
controls: true, //Control bar preload: "auto", //Video preloading muted: true, //Any audio will be eliminated by default.
loop: false, // Causes the video to restart as soon as it ends.
language: "zh-CN",
aspectRatio: "16:9", // Put the player into fluid mode and use this value when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3").
fluid: true, // When true, Video.js player will have fluid size. In other words, it will scale proportionally to fit its container.
sources:
{
withCredentials: false,
type: "application/x-mpegURL",
//src: this.liveSrc
src:
"https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8"
}
],
poster: this.image, //Your cover address//width: 200 || document.documentElement.clientWidth,
notSupportedMessage: "This video cannot be played at this time, please try again later", //Allows you to override the default message displayed when Video.js cannot play the media source.
controlBar: {
timeDivider: true, // separator between current time and duration durationDisplay: true, // display duration remainingTimeDisplay: false, // whether to display the remaining time function fullscreenToggle: true // whether to display the full screen button }
},
Note that you must first test whether the live broadcast source can be successfully played, otherwise these errors will be reported
Then let's build a local live source test according to the official First build the HTML interface. Pay attention to introducing related JS libraries and files. I use hbuilder here because it is more convenient to use, and the preview mode is similar to opening a port. Through the get method, a local service is returned instead of directly double-clicking to open the HTML file locally to access the static file~~~~
<!doctype html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script>
<script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script>
</head>
<body>
<div class="video-container">
<video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
</div>
<style>
body {
margin: 0;
}
.video-container {
width: 640px;
height: 480px;
margin: 15px;
}
</style>
<script>
(function play() {
// Get playback URL from Amazon IVS API
//var PLAYBACK_URL = 'https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8';
var PLAYBACK_URL = 'https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8'
// Register Amazon IVS as playback technology for Video.js
registerIVSTech(videojs);
// Initialize player
var player = videojs('amazon-ivs-videojs', {
techOrder: ["AmazonIVS"]
}, () => {
console.log('Player is ready to use!');
// Play stream
player.src(PLAYBACK_URL);
});
})();
</script>
</body>
</html>
Access through port,
Later, I found that online live source playback can also be achieved through local static files
ps: If you don't want to build your own local service test, you can also use the online test provided by awd directly
You can figure it out by yourself. Change input.value to the live source address, and then start it in the shell console on the right. npm install && npm run start The effect is as follows, which is exactly the same
Just change the address of load to your own live source m3u8 format. Here is the online live source that I have already set up.
After the live source is OK, continue writing the project code
<template>
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"
>
</video-player>
</div>
</template>
<script>
export default {
methods: {
// Play callback onPlayerPlay(player) {
console.log('player play!', player)
},
// Pause callback onPlayerPause(player) {
console.log('player pause!', player)
},
// callback when the video is finished playing onPlayerEnded($event) {
console.log(player)
},
// readyState changes on DOM element cause playback to stop onPlayerWaiting($event) {
console.log(player)
},
// Playback has started callback onPlayerPlaying($event) {
console.log(player)
},
// When the player downloads data at the current playback position, onPlayerLoadeddata($event) is triggered {
console.log(player)
},
// Triggered when the current playback position changes.
onPlayerTimeupdate($event) {
console.log(player)
},
//The media's readyState is HAVE_FUTURE_DATA or higher onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
// The media's readyState is HAVE_ENOUGH_DATA or higher. This means that the entire media file can be played without buffering.
onPlayerCanplaythrough(player) {
// console.log('player Can playthrough!', player)
},
//Playback state change callback playerStateChanged(playerCurrentState) {
console.log('player current update state', playerCurrentState)
},
//Bind a listener to the component's ready state. The difference with event listeners is that if the ready event has already occurred, it will trigger the function immediately. .
playerReadied(player) {
console.log('example player 1 readied', player);
}
},
}
</script>
Define related monitoring functions, which can be added according to your needs. The following are commonly used
onPlayerPlay(player) {
console.log("onPlayerPlay", player);
},
onPlayerPause(player) {
console.log("onPlayerPause", player);
},
playerStateChanged(player) {
console.log("playerStateChanged", player);
},
Then start the service npm run start I found an error and couldn't find the relevant video. So I found that the relevant library was missing. I had to add the AWS library before I could add the following library support file to the index.html of the entire project. <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script> <script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script>
Finally the complete effect is out
Note: Add hls.js support, so you need to install dependencies as follows: npm install --save videojs-contrib-hls Here is the official warehouse of AWS, you need to pick it up yourself Add: If it is implemented directly on the page, it may not be played directly, and an error will be reported that the video cannot be played. I guess there may be two reasons, see the screenshot
1: It takes a certain amount of time to asynchronously obtain the streaming address returned by the background. During this time, the live component has been initialized, but the live source address has not been obtained, so an error will be reported that the live address cannot be found.
The effect is the same, and it can also be convenient for other components to call
Finally, for the convenience of management, I offer all the final codes with both hands.
// The first one is the style of videoJs, and the second one is the style of vue-video-player. Considering that other business components may also use video playback, they are placed in main.js require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
/*Import video playback component*/
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)
2: videoPlayer.vue
<template>
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@statechanged="playerStateChanged($event)"
></video-player>
</template>
<script>
//import { registerIVSTech } from "amazon-ivs-player";
export default {
name: "",
props: ["src", "image"],
data() {
return {
// liveSrc:
// "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8",
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //Playback speed autoplay: false, //If true, the browser starts playback when it is ready.
controls: true, //Control bar preload: "auto", //Video preloading muted: false, //Any audio will be eliminated by default.
loop: false, // Causes the video to restart as soon as it ends.
language: "zh-CN",
aspectRatio: "16:9", // Put the player into fluid mode and use this value when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3").
fluid: true, // When true, Video.js player will have fluid size. In other words, it will scale proportionally to fit its container.
sources:
{
withCredentials: false,
type: "application/x-mpegURL",
src: this.src
// "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8"
}
],
poster: this.image, //Your cover address//width: 200 || document.documentElement.clientWidth,
notSupportedMessage: "This video cannot be played at this time, please try again later", //Allows you to override the default message displayed when Video.js cannot play the media source.
controlBar: {
timeDivider: true, // separator between current time and duration durationDisplay: true, // display duration remainingTimeDisplay: false, // whether to display the remaining time function fullscreenToggle: true // whether to display the full screen button }
}
};
},
// livePlays() {
// this.playerOptions.sources[0].src = this.liveSrc;
// var obj = {};
// obj.withCredentials = false;
// obj.type = "application/x-mpegURL";
// obj.src = this.pullUrl;
// this.playerOptions.sources.append(obj);
// },
computed: {
player() {
return this.$refs.videoPlayer.player;
}
},
computed: {
player() {
return this.$refs.videoPlayer.player;
}
},
methods: {
onPlayerPlay(player) {
console.log("onPlayerPlay", player);
},
onPlayerPause(player) {
console.log("onPlayerPause", player);
},
playerStateChanged(player) {
console.log("playerStateChanged", player);
}
}
};
</script>
3:detail.vue parent component
<template>
<d2-container>
<div>
<div class="webTitle">Live Broadcast Management> Large Live Broadcast> Details</div>
<el-table :data="list" border stripe>
<el-table-column align="center" label="Live ID">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Live Title">
<template slot-scope="scope">
<span>{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Account">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Live broadcast start time">
<template slot-scope="scope">
<span>{{ scope.row.liveStart | timestampFormat }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Number of viewers">
<template slot-scope="scope">
<span>{{ scope.row.watchNumber }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Number of comments">
<template slot-scope="scope">
<span>{{ scope.row.reserveNumber }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Ticket purchase amount (GP)">
<template slot-scope="scope">
<span>{{scope.row.preSaleType == 1 ? scope.row.preSaleBalance*1 + scope.row.preSaleDeposit *1+ scope.row.fullPayment*1 : scope.row.fullPayment}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Gift amount">
<template slot-scope="scope">
<span>{{ scope.row.reserveNumber }}</span>
</template>
</el-table-column>
</el-table>
<div class="playWrap">
<div class="livePicture">
<vueVideoPlayers :src="src" :image="image" />
</div>
<div class="liveCommet"></div>
</div>
<div class="playWrap">
<div class="playLeft">
<p>Basic Information</p>
<ul class="leftInfo">
<li class="playItem">
<span class="playTitle">Category</span>
<span class="playContent">{{typeName}}</span>
</li>
<li class="playItem">
<span class="playTitle">Pre-sale type</span>
<span class="playContent">{{formData.preSaleType == 1 ? "Presale" : "Non-presale"}}</span>
</li>
<li class="playItem">
<span class="playTitle">Whether to record or not</span>
<span class="playContent">{{formData.isRecordedBroadcast ==1 ? "Recorded broadcast" : "Not recorded broadcast"}}</span>
</li>
<li class="playItem">
<span class="playTitle">List of actors</span>
<span class="playContent">{{formData.actor}}</span>
</li>
<li class="playItem">
<span class="playTitle">Live Broadcast Introduction</span>
<span class="playContent">{{formData.liveIntroduce}}</span>
</li>
</ul>
<p>Pre-sale information</p>
<ul class="leftInfo">
<li class="playItem">
<span class="playTitle">Pre-sale period</span>
<span class="playContent">
{{formData.preSaleStart}}
<span style="color:#333;margin:0 5px">-</span>
{{formData.preSaleEnd}}
</span>
</li>
<li class="playItem">
<span class="playTitle">Number of people formed</span>
<span class="playContent">{{formData.formingNum ? formData.formingNum : 0}}</span>
</li>
<li class="playItem">
<span class="playTitle">Molding state</span>
<span
class="playContent"
>{{formData.reserveNumber > formData.reserveNumber ? "formed":"unformed" }}</span>
</li>
</ul>
<p>Non-presale information</p>
<ul class="leftInfo">
<li class="playItem">
<span class="playTitle">Ticket sales start time</span>
<span class="playContent">{{formData.ticketingStart}}</span>
</li>
</ul>
Ticket prices
<ul class="leftInfo">
<li class="playItem">
<span class="playTitle">Pre-sale deposit</span>
<span class="playContent">{{formData.preSaleDeposit ? formData.preSaleDeposit : 0}}</span>
</li>
<li class="playItem">
<span class="playTitle">Pre-sale balance</span>
<span class="playContent">{{formData.preSaleBalance ? formData.preSaleBalance : 0}}</span>
</li>
<li class="playItem">
<span class="playTitle">Full price</span>
<span class="playContent">{{formData.fullPayment ? formData.fullPayment : 0}}</span>
</li>
<li class="playItem">
<span class="playTitle">Replay Price</span>
<span class="playContent">{{formData.playbackPrice ? formData.playbackPrice : 0}}</span>
</li>
</ul>
</div>
<div class="playRight">
<p>Image data</p>
<ul class="leftInfo">
<li class="playItem">
<span class="playTitle">Promotional Video</span>
<span class="playContent">
<img
v-if="formData.propagandaVideoUrl"
:src="videoPng"
class="playImage"
@click="showVideo(formData.propagandaVideoUrl,true)"
/>
<span v-else style="color:#cfcfcf">No video</span>
</span>
</li>
<li class="playItem">
<span class="playTitle">Revisit video</span>
<span class="playContent">
<img
v-if="formData.recordedBroadcastUrl"
:src="videoPng"
class="playImage"
@click="showVideo(formData.recordedBroadcastUrl,false)"
/>
<span v-else style="color:#cfcfcf">No video</span>
</span>
</li>
<li class="playItem">
<span class="playTitle">Share Poster</span>
<span class="playContent">
<el-image
class="matchImg"
:src="formData.shareImage"
:preview-src-list="[formData.shareImage]"
/>
</span>
</li>
<li class="playItem">
<span class="playTitle">Cover Image</span>
<span class="playContent">
<el-image
class="matchImg"
v-for="(item,index) in JSON.parse(formData.coverImage)"
:src="item"
:key="index"
:preview-src-list="[item]"
/>
</span>
</li>
</ul>
<!-- <p>Image data</p>
<ul class="leftInfo"></ul>-->
</div>
</div>
</div>
<el-button @click="backPage">Back</el-button>
<el-dialog title="View" :visible.sync="videoVisible" width="850px">
<div v-if="video">
<video :src="tempSrc" controls="controls" width="800" height="600">Your browser does not support the video tag. </video>
</div>
<div v-else>
<vueVideoPlayers :src="tempSrc" :image="image" />
</div>
</el-dialog>
</d2-container>
</template>
<script>
import { getLiveDetail, getLiveSellDetail } from "@/api/3d/liveApi";
import videoPng from "@/assets/img/video.jpg";
import { timestampFormat } from "@/common/filters";
//import { registerIVSTech } from "amazon-ivs-player";
import vueVideoPlayers from "./videoPlayer";
export default {
name: "",
data() {
return {
src: "", //Live source video image: "",
videoPng: videoPng,
video: true,
videoVisible: false,
// videoSrc: "", //Promotional video// recordedBroadcastUrl:'', //Playback video tempSrc: "",
list: [],
id: "",
typeName: "",
pullUrl: "",
formData: {
id: "",
pullUrl: "",
pushUrl: "",
title: "",
liveIntroduce: "",
actor: "",
typeId: "",
isRecordedBroadcast: 2,
coverImage: "",
propagandaVideoUrl: "",
formingNum: "",
preSaleDeposit: "", //Pre-sale deposit price preSaleBalance: "", //Pre-sale balance price fullPayment: "", //Full payment price playbackPrice: "", //Playback price preSale: [], //Pre-sale time preSaleStart: "",
preSaleEnd: "",
liveStart: "", //Live broadcast start time isSpeak: 1,
priority: "",
shareImage: ""
}
};
},
created() {
this.getLiveSell();
this.getData();
},
mounted() {},
components:
vueVideoPlayers
},
methods: {
backPage() {
this.$router.push("/liveMange/largeBrand");
},
//Ticket sales status getLiveSell() {
var id = this.$route.params.id;
getLiveSellDetail(id).then(res => {
const result = res.data;
});
},
//Open the pop-up window to watch the video showVideo(playSrc, mark) {
this.videoVisible = true;
this.video = mark;
this.tempSrc = playSrc;
},
getData() {
var id = this.$route.params.id;
this.id = id;
//var localMatchTypeId=localStorage.getItem('matchTypeId')
//var localPriority = localStorage.getItem('priority')
// var data = { id, page: 1, limit: 10 };
getLiveDetail(id).then(res => {
const result = res.data;
//No category ID, take local // if (!result.matchTypeId) {
// result.matchTypeId = localMatchTypeId
// }
// if(!result.priority){
// result.priority = localPriority
// }
this.formData = result;
let { pullUrl, pushUrl, coverImage } = result;
this.src = pullUrl;
this.image = JSON.parse(coverImage)[0];
const {
id,
title,
liveStart,
ticketingStart,
playbackPrice,
preSaleDeposit,
preSaleBalance,
fullPayment
} = result;
const objData = {
id,
title,
name: "admin",
liveStart,
watchNumber: localStorage.getItem("watchNumber") | 0,
reserveNumber: localStorage.getItem("reserveNumber") | 0,
preSaleDeposit,
preSaleBalance,
fullPayment,
ticketingStart,
playbackPrice
};
this.list.push(objData);
// this.formData.registrationStart=result.registrationStart + ''
// this.formData.registrationEnd = result.registrationEnd + ''
// this.formData.voteStart = result.voteStart + ''
// this.formData.voteEnd = result.voteEnd + ''
//Voting period// var preSaleStart = moment(parseInt(result.preSaleStart)).format(
// "YYYY-MM-DD hh:mm:ss:SSS"
// );
// var preSaleEnd = moment(parseInt(result.preSaleEnd)).format(
// "YYYY-MM-DD hh:mm:ss:SSS"
// );
//The end of the event // this.formData.liveStart = new Date(result.liveStart);
//this.formData.registration.push(start)
//this.formData.registration.push(end)
//Manual assignment// this.$set(this.formData, "preSale", [preSaleStart, preSaleEnd]);
//this.$set(this.formData, "vote", [voteStart, voteEnd]);
//Date formatting //Pre-sale time period this.formData.preSaleStart = result.preSaleStart
? timestampFormat(result.preSaleStart)
: "";
this.formData.preSaleEnd = result.preSaleEnd
? timestampFormat(result.preSaleEnd)
: "";
//Non-presale ticket sales start time this.formData.ticketingStart = result.ticketingStart
? timestampFormat(result.ticketingStart)
: "";
this.typeName = localStorage.getItem("typeName") || "";
});
}
}
};
</script>
<style scoped>
.playWrap {
display: flex;
background: #fff;
margin-top: 20px;
}
.leftInfo {
list-style: none;
border: 1px solid #cfcfcf;
}
.playLeft {
width: 48%;
/* border: 1px solid #f5f5f5; */
}
.playRight {
width: 48%;
margin-left: 2%;
}
.playItem {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #cfcfcf;
}
.playItem:last-child {
border-bottom: none;
}
.playContent {
margin-left: 20px;
color: #999;
}
.matchImg {
width: 80px;
height: 80px;
margin-right: 10px;
}
.playImage {
width: 80px;
height: 80px;
}
.playWrap {
display: flex;
}
.livePicture {
width: 40%;
height: 400px;
}
</style>
3: Remember to add the following code to index.html <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script> <script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script> end This is the end of this article about Vue’s live broadcast function. For more relevant Vue live broadcast content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: The problem of being unable to enter the management page when installing rabbitmq in docker
>>: HTML tutorial, understanding the optgroup element
Recommend
Getting Started with Front-End Vue Unit Testing
Table of contents 1. Why do we need unit testing?...
Detailed explanation of asynchronous generators and asynchronous iterations in Node.js
Preface Generator functions have been in JavaScri...
52 SQL statements to teach you performance optimization
1. To optimize the query, try to avoid full table...
Markup language - for
Click here to return to the 123WORDPRESS.COM HTML ...
Detailed tutorial on installing mysql-8.0.13 (zip installation) on windows 10 system
Installation Environment Description •System vers...
Implementation of Vue 3.x project based on Vite2.x
Creating a Vue 3.x Project npm init @vitejs/app m...
Implementation of HTML command line interface
HTML Part Copy code The code is as follows: <!D...
Detailed explanation of the top ten commonly used string functions in MySQL
Hello everyone! I am Mr. Tony who only talks abou...
How to solve the timeout during pip operation in Linux
How to solve the timeout problem when pip is used...
Why TypeScript's Enum is problematic
Table of contents What happened? When to use Cont...
Some data processing methods that may be commonly used in JS
Table of contents DOM processing Arrays method Su...
Solution to the problem of child element margin-top causing parent element to move
Problem Description Today, when I was modifying t...
MySQL essential basics: grouping function, aggregate function, grouping query detailed explanation
Table of contents 1. Simple to use 2. Use DISTINC...
The corresponding attributes and usage of XHTML tags in CSS
When I first started designing web pages using XH...
Several ways to use require/import keywords to import local images in v-for loop
Table of contents Problem Description Method 1 (b...