emergencyManagement/components/CameraModal.vue

<template>
	<uni-popup ref="cameraPopup" type="center">
		<view class="video-container">
			<view class="title">
				<uni-section type="line"  :title="title">
					<template v-slot:right>
						<uni-icons type="closeempty" size="24" color="#999" @click="close"></uni-icons>
					</template>		
				</uni-section>
			</view>
			<live-player
			  :src="videoSrc" 
			  class="video"
			  autoplay
			  @statechange="statechange"
			  @error="error"
			  style="width: 100%; height: 225px;"
			/>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"CameraModal",
		data() {
			return {
				title:"",
				videoSrc:""
			};
		},
		methods:{
			show({title,src}){
				this.videoSrc=src
				this.title=title;
				this.$refs.cameraPopup.open('center')
			},
			close(){
				this.videoSrc=""
				this.title="";
				this.$refs.cameraPopup.close()
			},
			statechange(e){
				console.log('live-player code:', e.detail.code)
			},
			error(e){
				console.error('live-player error:', e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-container{
		width: 750rpx;
		height: 100vh;
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		.title{
			width: 100%;
			height: 10vh;
		}
		.video{
			display: block;
			width: 100%;
		}
	}
</style>