JT-CIM-SDK/packages/Widgets/PopupWindow/VideoWindow3.js

/* 引入Cesium */
// import * as Cesium from 'Cesium';

import Videojs from 'video.js'; //video.js7.0以后版本默认支持hls（m3u8）格式
import "video.js/dist/video-js.css"; // 引入video.js的css
// video 6.0及以上版本，需要引入videojs-flash库（5.0及以下版本，flash在其核心库中，高版本分离了flash）
// rtmp流的视频格式为flv，只有flash能播放
import "videojs-flash"; // 播放rtmp流需要的插件,flash插件。
import "videojs-flvjs-es6"; //flv格式

import {
	getGuid,
} from "../common/common.js";

import '../../Assets/styles/PopupWindow/VideoWindow3.css';

/**
 * 弹框内容，可放任何html
 */
class VideoWindow3 {

	/**
	 * 初始化
	 * @author joy/创睿
	 * @param {Object} viewer 三维场景viewer对象
	 * @param {Cesium.Cartesian3} position 坐标位置
	 * @param {Object} videoInfo 属性
	 * @param {String} videoInfo.type 监控类型 hls 、 rtmp 、flv、mp4
	 * @param {String} videoInfo.name 监控名称
	 * @param {String} videoInfo.url 监控路径
	 */
	constructor(viewer, position, videoInfo) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		if (!position) throw new Cesium.DeveloperError('no position object!');	
		
		this.viewer = viewer; //弹窗创建的viewer
		this.position = position; //弹窗挂载的位置
		//弹窗挂载的位置
		if (position instanceof Cesium.Cartesian3) {
			this.position = position;
		} else {
			this.position = Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2] || 0);
		}
		
		//如果有div就移除
		if (document.getElementsByClassName("popup-video3").length > 0) {
			document.getElementsByClassName("popup-video3")[0].remove();
		}
		
		this.id = "popup_video_" + getGuid();
		this.popupDiv = document.createElement("div");
		this.popupDiv.classList.add("popup-video3");
		this.popupDiv.id = this.id;
		
		// 将字符串模板生成的内容添加到DOM上
		this.viewer.container.append(this.popupDiv);
		// this.viewer.cesiumWidget.container.appendChild(this.popupDiv);
		
		//创建Html
		this.popupDiv.innerHTML = this._createHtml(videoInfo);
		
		switch (videoInfo.type) {
			case "hls":
				this.videotype = "application/x-mpegURL"; // 告诉videojs,这是一个hls流
				break;
			case "rtmp":
				this.videotype = "rtmp/flv"; // 告诉videojs这是一个rtmp流视频
				// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
				// Videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
				break;
			case "flv":
				this.videotype = "video/x-flv"; // 告诉videojs这是一个flv
				break;
			case "mp4":
				this.videotype = "video/mp4"; // 告诉videojs这是一个mp4,普通视频
				break;
		}
		
		this.videoPlayer = Videojs(document.querySelector('#myvideo'), {
			controls: true, //开启交互，即是用户可控。用户可以与之交互的控件
			autoplay: 'muted', //自动播放
			loop: true, //视频一结束就重新开始
			muted: false, //开启视频时是否静音,默认情况下将使所有音频静音
			fluid: true, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
			aspectRatio: "16:9", //显示比率
			reload: "auto", //重载
			fullscreen: {
				options: {
					navigationUI: 'hide'
				}
			},
			sources: [{ //注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
				src: videoInfo.url,
				type: this.videotype,
			}],
		}, function onPlayerReady() {
			console.log('onPlayerReady', this);
		})
		
		//添加场景事件,实时更新窗口的位置
		this.viewer.scene.postRender.addEventListener(this.postRender, this);
		
		//绑定关闭事件
		document.getElementsByClassName("popup-video3-close-button")[0].onclick = () => {
			this.close();
		};
	}


	/**
	 * 场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
	 * @ignore
	 */
	postRender() {
		const canvasHeight = this.viewer.scene.canvas.height;
		const windowPosition = new Cesium.Cartesian2();
		Cesium.SceneTransforms.wgs84ToWindowCoordinates(
			this.viewer.scene,
			this.position,
			windowPosition
		);

		this.popupDiv.style.left = windowPosition.x + 70 + "px";
		this.popupDiv.style.top = windowPosition.y - this.popupDiv.offsetHeight - 20 + "px";

		const camerPosition = this.viewer.camera.position;
		let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
		height += this.viewer.scene.globe.ellipsoid.maximumRadius;
		if ((!(Cesium.Cartesian3.distance(camerPosition, this.position) > height)) && this.viewer.camera.positionCartographic.height < 50000000) {
			this.popupDiv.style.display = "block";
		} else {
			this.popupDiv.style.display = "none";
		}
	}

	/**
	 * 创建Html
	 * @ignore 
	 * @param {Object} videoInfo
	 */
	_createHtml(videoInfo) {
		let html = `
		<div class="leftLine-1"></div>
		<div class="leftLine-2"></div>
		<div class="popup-header">
			<span class="popup-title" >${videoInfo.name}</span>
			<span class="popup-video3-close-button" title="关闭" >×</span>
		</div>
		<div class="popup-content">
				<video id="myvideo" class="video-js vjs-big-play-centered vjs-fluid" controls preload="auto" width="100%" height="100%"></video>
		</div>
		`
		return html;
	}
}

/**
 * 通用对外公开函数 
 */
Object.assign(VideoWindow3.prototype, /** @lends VideoWindow3.prototype */ {
	/**
	 * 关闭按钮
	 */
	close() {
		this.popupDiv.remove();
		this.viewer.scene.postRender.removeEventListener(this.postRender, this);
	}
});

export default VideoWindow3;