Vue中Jessibuca播放器的使用

1. Jessibuca是什么

   Jessibuca是一款开源的纯H5直播流播放器，利用Emscripten技术将音视频解码库编译成JavaScript (ams.js/wasm)，使其能够在浏览器中运行。这个先进的技术实现了Jessibuca在几乎所有现代浏览器上的兼容性，包括PC、手机和微信等平台。用户可以无需安装额外插件，直接在浏览器中使用。Jessibuca进行直播流播放，为用户带来便捷、高效的视频观看体验。

2. 如何在vue中使用Jessibuca

   2.1 引入文件
   在官网的demo中找到你需要的demo，这里我用的是vue的demo 【Jessibuca官网demo】然后把jessibuca.js、 decoder.js、decoder.wasm 这三个文件放到public中，同时在入口文件index.html中引入jessibuca.js
   
   index.html中

   <script src="./jessibuca.js"></script>
   

   2.2 创建DOM结构

<template>
	<div class="root">
		<div class="container-shell">
			<div :id="id" ref="container" style="width: 100%; height: 100%"></div>
		</div>
	</div>
</template>

2.3创建播放器

		create(options) {
			options = options || {};
			this.jessibuca = new window.Jessibuca(
				Object.assign(
					{
						container: document.getElementById(this.id),
						decoder: "/decoder.js",
						isResize: false,
						text: "",
						loadingText: "疯狂加载中...",
						debug: false,
						operateBtns: {
							fullscreen: this.showOperateBtns,
							screenshot: this.showOperateBtns,
							play: this.showOperateBtns,
							audio: this.showOperateBtns
						},
						isNotMute: true,
						timeout: 10
					},
					options
				)
			);
			var _this = this;
			this.jessibuca.on("pause", function () {
				console.log("on pause");
				_this.playing = false;
			});
			this.jessibuca.on("play", () => {
				_this.playing = true;
				_this.loaded = true;
			});
		},

完整代码如下
子组件：

<template>
	<div class="root">
		<div class="container-shell">
			<div :id="id" ref="container" style="width: 100%; height: 100%"></div>
		</div>
	</div>
</template>
<script>
export default {
	name: "CameraIframe",
	props: {
		id: {
			type: String,
			default: ""
		},
		videoUrl: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			jessibuca: null,
			version: "",
			playing: false,
			loaded: false, // mute
			showOperateBtns: false,
			err: "",
			performance: "",
			volume: 1
		};
	},
	watch: {
		videoUrl: {
			handler(n) {
				this.play();
			}
		}
	},
	mounted() {
		this.create();
		if (this.videoUrl != 0) {
			this.play();
		}
		window.onerror = (msg) => (this.err = msg);
	},
	destroyed() {
		this.jessibuca.destroy();
	},
	methods: {
		create(options) {
			options = options || {};
			this.jessibuca = new window.Jessibuca(
				Object.assign(
					{
						container: document.getElementById(this.id),
						decoder: "/decoder.js",
						isResize: false,
						text: "",
						loadingText: "疯狂加载中...",
						debug: false,
						operateBtns: {
							fullscreen: this.showOperateBtns,
							screenshot: this.showOperateBtns,
							play: this.showOperateBtns,
							audio: this.showOperateBtns
						},
						isNotMute: true,
						timeout: 10
					},
					options
				)
			);
			var _this = this;
			this.jessibuca.on("pause", function () {
				console.log("on pause");
				_this.playing = false;
			});
			this.jessibuca.on("play", () => {
				_this.playing = true;
				_this.loaded = true;
			});
		},
		play() {
			if (this.videoUrl) {
				let url = "ws://" + this.getQueryVariable("host") + "/jessica/" + this.getQueryVariable("stream") + ".flv";
				console.log(url);
				this.jessibuca.play(url).catch((err) => {
					console.log(err);
				});
			}
		},
		getQueryVariable(variable) {
			var query = this.videoUrl.split("?")[1];
			if (query) {
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
			}
			return false;
		},
		pause() {
			this.jessibuca.pause();
			this.playing = false;
			this.err = "";
			this.performance = "";
		},
		volumeChange() {
			this.jessibuca.setVolume(this.volume);
		},
		destroy() {
			if (this.jessibuca) {
				this.jessibuca.destroy();
			}
			this.create();
			this.playing = false;
			this.loaded = false;
			this.performance = "";
		},

		restartPlay(type) {
			this.destroy();
			setTimeout(() => {
				this.play();
			}, 100);
		}
	}
};
</script>
<style>
.root {
	display: flex;
	place-content: center;
}

.container-shell {
	width: 100%;
	height: 100%;
}

#container {
	background: rgba(13, 14, 27, 0.7);
}

.input {
	display: flex;
	align-items: center;
	margin-top: 10px;
	color: white;
	place-content: stretch;
}

.input2 {
	bottom: 0px;
}

.input input[type="input"] {
	flex: auto;
}

.err {
	position: absolute;
	top: 40px;
	left: 10px;
	color: red;
}

.page {
	background: url(/bg.jpg);
	background-repeat: no-repeat;
	background-position: top;
}

@media (max-width: 720px) {
	#container {
		width: 90vw;
		height: 52.7vw;
	}
}
</style>

直接在.vue文件中使用即可
父组件：

<CameraIframe :ref="item.id" class="camera" v-if="item.parentId" :id="item.id" :videoUrl="item.parentId"></CameraIframe>