Jessibuca 视频插件Vue2使用

官网： http://jessibuca.com/document.html#window-jessibuca-is-not-a-constructor

使用环境  vue2,

第一步、需要如下三个文件，

 

 

第二步、在index.html中引入 jessibuca.js

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

 

第三步，随便建个文件初始化，Icon使用的是iView组件，

<template>
	<div>
		<div class="videoCanvas" ref="bigVideo">
			<div class="playBt">
				<Icon size="28" v-if="hdHandle && hdHandle.isPlaying()" @click="hdHandle.pause()" type="md-pause">
				</Icon>
				<Icon size="28" v-else-if="hdHandle && !hdHandle.isPlaying()" type="md-play" @click="hdHandle.play()">
				</Icon>
			</div>
			<div class="closeBt">
				<Icon size="28" type="md-close" @click="hdShow = false"></Icon>
			</div>
			<div class="screenshotBt">
				<Icon size="28" type="md-camera" @click="screenshot()"></Icon>
			</div>
		</div>


		<div class="screenshot" v-if="shotURL">
			<!-- <Spin v-if="loading" fix></Spin> -->
			<div class="closeBt">
				<Icon size="28" type="md-close" @click="shotURL = null"></Icon>
			</div>
			<div class="playBt">
				<Icon size="28" type="md-cloud-upload" @click="upload"></Icon>
			</div>
			<img style="width:100%;display: block;" :src="shotURL" id="shotId">
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				hdHandle: null,
				videoUrl: "https://XXXXXX.flv",
				shotURL: '',
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			upload() {//截图上传
				let myform = new FormData()
				if (this.shotURL) {
					myform.append('file', this.dataURLToBlob(this.shotURL))
					
					//调用接口上传图片
					// uploadScreenshot(myform).then(res => {
					// 	this.loading = false
					// 	if (res?.result_code === '0') {
					// 		this.shotURL = null
					// 		this.$Message.success({
					// 			content: '上传成功',
					// 			duration: 3
					// 		})
					// 	} else {
					// 		this.$Message.error({
					// 			content: '上传失败',
					// 			duration: 3
					// 		})
					// 	}
					// })
				}
			},
			dataURLToBlob(fileDataURL) {
				let arr = fileDataURL.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new Blob([u8arr], {
					type: mime
				})
			},
			screenshot() { //截图
				if (this.hdHandle) {
					const b64 =
						this.hdHandle.screenshot('test', 'jpeg', 'base64')
					this.shotURL = b64
				}
			},
			init() { //初始化组件
				this.hdHandle = new window.Jessibuca(
					Object.assign({
						container: this.$refs['bigVideo'],
						isResize: true,
						// isFullResize: true,
						controlAutoHide: true,
						videoBuffer: 2,
						text: "",
						// background: "bg.jpg",
						loadingText: "loading...",
						// hasAudio:false,
						// debug: true,
						supportDblclickFullscreen: false,
						// showBandwidth: true, // 显示网速
						operateBtns: {
							// fullscreen: true,
							// screenshot: true,
							// play: true,
							// audio: true,
						},
						forceNoOffscreen: true,
						isNotMute: false,
						timeout: 10,
						useWebFullScreen: true,
						useMSE: true,
						useWCS: true,
						autoWasm: true,
					}, {})
				);
				
				this.hdHandle.play(this.videoUrl)
			},
		}
	}
</script>

<style>
	.screenshot {
		position: absolute;
		border: 5px solid #FFFFFF;
		z-index: 10000;
		width: 80vw;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: scalekey 0.2s ease-in;
		// transition: width 3.8s
	}
</style>

 

最终展示视频如下，图片后面的视频是摄像头视频，不能展示，可以右上角暂停，截图等。