pingpu_H5/pages/camera/details.vue

<template>
	<!-- 可视监控详情 -->
	<view class="page-panel">
		<!-- 监控区域 -->
		<view class="monitor-area">
			<view class="video-js" ref="video" style="width: 100%;height:510rpx;"></view>
			<!-- <image src="@/static/demo/demo1.png" mode="widthFix"></image> -->
			<!-- <video id="hlsId" autoplay controls  style="width: 100%;height:800rpx"></video> -->
		</view>
		<!-- 监控工具 -->
		<view class="monitor-tools">
			<view class="row-center tools-btn" @click="controlDirection(8)">
				<text>+</text>
			</view>
			<view class="tools-control">
				<view class="slice up" @click="controlDirection(0)"></view>
				<view class="slice down" @click="controlDirection(1)"></view>
				<view class="slice left" @click="controlDirection(2)"></view>
				<view class="slice right" @click="controlDirection(3)"></view>
				<view class="tools-btn"></view>
			</view>
			<view class="row-center tools-btn" @click="controlDirection(9)">
				<text>━</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Hls from 'hls.js'
	import Dplayer from 'dplayer'
	import {
		getCameraAddress,
		controlCamera
	} from '@/api/camera.js'
	export default {
		data() {
			return {
				deviceId: '', // 设备号
				// 播放地址
				cameraAddress: '',
				// 控制参数
				controlParams: {
					device_id: '', //设备号
					ctrl: 'move', //move 控制球机转动   stop 停止球机转动， 转动后需调用停止接口，不然会造成球机一直转
					movenum: 0, //	0-上,1-下,2-左,3-右,8-放大,9-缩小
				}
			};
		},
		 onLoad(options) {
			this.deviceId = options.id;
			this.controlParams.device_id = options.id;
			
		},
		async onReady() {
			await this.getCameraAddress();
			let video = document.createElement('video');
			video.id = 'video';
			video.style = 'width: 100%; height:510rpx;';
			video.controls = true;
			video.preload = "auto"
			video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
			video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
			video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
			let source = document.createElement('source');
			source.src =this.cameraAddress;
				// 'http://yun-live.oss-cn-shanghai.aliyuncs.com/record/yunlive/record/yunlive/meeting_1070/2020-11-25-09-27-59_2020-11-25-09-35-52.m3u8';
			// source.type = 'application/x-mpegURL';
			video.appendChild(source);
			this.$refs.video.$el.appendChild(video);
			let that = this;
			let player = this.$video('video', {
				poster: '', // 视频封面图地址
				title: '4564564',
				playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoDisable: true,
				preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
				language: 'zh-CN',
				fluid: true, // 自适应宽高
				muted: false, //  是否静音
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
				autoplay: true, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
				loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
				screenshot: true,
				controlBar: {
					volumePanel: { //声音样式
						inline: false // 不使用水平方式
					},
					timeDivider: true, // 时间分割线
					durationDisplay: true, // 总时间
					progressControl: true, // 进度条
					remainingTimeDisplay: true, //当前以播放时间
					fullscreenToggle: true, //全屏按钮
					pictureInPictureToggle: true, //画中画
				}
			}, function() {
				this.on('error', function(err) { //请求数据时遇到错误
					console.log("请求数据时遇到错误", err)
				});
				this.on('stalled', function(stalled) { //网速失速
					console.log("网速失速", stalled)
				});
			});
		},
		methods: {
			// 获取监控播放地址
			async getCameraAddress() {
				let res = await getCameraAddress({
					device_id: this.deviceId
				});
				let address = eval("(" + res + ")")
				console.log(address.hls);
				this.cameraAddress=address.hls;
			},
			// 控制摄像机
			async controlDirection(movenum) {
				this.controlParams.movenum = movenum;
				this.controlParams.ctrl = 'move'
				let res = await controlCamera(this.controlParams);
				if (!res.data) {
					return;
				}
				this.controlParams.ctrl = 'stop'
				await controlCamera(this.controlParams);
			}
		}
	}
</script>

<style lang="scss">
	// 监控区域
	.monitor-area {
		overflow: hidden;
		height: 510rpx;
		border-radius: 5rpx;
		margin-bottom: 24rpx;
	}

	.monitor-tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
	}

	.tools-control {
		position: relative;
		width: 305rpx;
		height: 305rpx;
		margin: 0 60rpx;
		background-image: linear-gradient(to right, #323e4d, #444d5e);
		border-radius: 100%;

		.tools-btn {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		.slice {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 97rpx;
			height: 97rpx;
			margin: auto;

			&:before {
				content: '';
				display: block;
				width: 0;
				margin-right: -24rpx;
				border-color: transparent transparent transparent $color-primary;
				border-width: 24rpx;
				border-style: solid;
				transform: scaleY(0.6);
			}

			&:active {
				opacity: .3;
			}
		}

		.up {
			top: 0;
			left: 0;
			right: 0;
			transform: rotateZ(-90deg);
		}

		.down {
			bottom: 0;
			left: 0;
			right: 0;
			transform: rotateZ(90deg);
		}

		.left {
			top: 0;
			bottom: 0;
			left: 0;
			transform: rotateZ(180deg);
		}

		.right {
			top: 0;
			bottom: 0;
			right: 0;

		}
	}

	.tools-btn {
		width: 110rpx;
		height: 110rpx;

		font-size: 40rpx;
		font-weight: bold;
		color: $color-primary;
		line-height: 1;

		background: #434C5D;
		border-radius: 100%;

		&:active {
			text {
				opacity: .3;
			}

		}
	}
</style>