vue实现视频直播
Vue实现视频直播的方法
使用video.js和videojs-contrib-hls插件
安装依赖包：
npm install video.js videojs-contrib-hls在Vue组件中引入：
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'模板部分：
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
<source src="your-stream-url.m3u8" type="application/x-mpegURL">
</video>初始化播放器：
mounted() {
this.player = videojs('my-video')
}使用flv.js实现FLV直播流
安装flv.js：
npm install flv.js组件实现：
<template>
<video ref="videoElement" controls autoplay muted></video>
</template>
<script>
import flvjs from 'flv.js'
export default {
data() {
return {
player: null
}
},
mounted() {
if (flvjs.isSupported()) {
this.player = flvjs.createPlayer({
type: 'flv',
url: 'your-stream-url.flv'
})
this.player.attachMediaElement(this.$refs.videoElement)
this.player.load()
this.player.play()
}
},
beforeDestroy() {
if (this.player) {
this.player.destroy()
}
}
}
</script>使用hls.js实现HLS直播
安装hls.js：
npm install hls.js组件实现：
<template>
<video ref="videoElement" controls></video>
</template>
<script>
import Hls from 'hls.js'
export default {
mounted() {
const videoSrc = 'your-stream-url.m3u8'
const video = this.$refs.videoElement
if (Hls.isSupported()) {
const hls = new Hls()
hls.loadSource(videoSrc)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc
video.addEventListener('loadedmetadata', () => {
video.play()
})
}
}
}
</script>使用WebRTC实现实时直播
安装peerjs：
npm install peerjs简单实现示例：
// 接收端代码
const peer = new Peer()
const conn = peer.connect('broadcaster-id')
const video = document.getElementById('video')
conn.on('stream', (stream) => {
video.srcObject = stream
})注意事项
直播流地址需要支持跨域访问 HLS协议需要服务端支持m3u8格式 FLV格式需要服务端支持flv流 WebRTC需要STUN/TURN服务器支持 移动端需要考虑浏览器兼容性问题
以上方法可根据实际项目需求选择适合的技术方案，HLS和FLV是当前比较常用的直播协议，WebRTC适合需要低延迟的场景。
