赵晨青 / uccc_video_frontend

new Vue({
	el: '#app',
	data(){
		return {
			roomName: '吴波波',
			roomId: 0,
			pin: '',
			bitrate: 256000,
			iconList: [  
			{sign: '#iconicon-microphone-on',name: '麦克风', status: 1},
			{sign: '#iconicon-volume',name: '声音', status: 1},
			{sign: '#iconicon-camera-on',name: '摄像头', status: 1},
			{sign: '#iconicon-sharescreen',name: '屏幕分享', status: 0},
			{sign: '#iconicon-share',name: '邀请加人', status: 0},
			{sign: '#iconicon-stop',name: '结束', status: 0}
			],  //0-未使用  1-使用中
			janus: '',
			handle: '',
			feeds: [],
			description:'',
			microphone: true,
			voice: true,
			camera: true,
			share: false,
			mypvtid: null,
			divSort: ['mainVideo_html5_api', 'sideVideo1_html5_api', 'sideVideo2_html5_api', 'sideVideo3_html5_api', 'sideVideo4_html5_api'],

		}
	},
	created() {
		this.roomId = parseInt(sessionStorage.getItem("room"))
		this.description = sessionStorage.getItem("description")
		this.pin = sessionStorage.getItem("pin")
		var checks = sessionStorage.getItem("checks")
		if(checks != undefined && checks != null) {
			if (checks == "Mute") {
				this.microphone = false;
			} else if(checks == "CloseCamera") {
				this.camera = false;
			}
		}
		if (this.roomId) {
			this.initVideo();
		} else {
			location.href ="./index.html";
		}	
	},
	mounted() {
		//监听关闭事件，然后销毁
		var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
		var eventName = iOS ? 'pagehide' : 'beforeunload';
		window.addEventListener(eventName, e => {
			if (this.feeds.length <= 2) {
				optionDestroy(this.handle, this.roomId, this.pin);				
			}
		})
		for(var s in Janus.sessions) {
			if(Janus.sessions[s] && Janus.sessions[s].destroyOnUnload) {
				Janus.log("Destroying session " + s);
				Janus.sessions[s].destroy({unload: true, notifyDestroyed: false});
			}
		}
	},
	methods: {
		initVideo() {
			let that = this;
			//初始化
			init(that.janus, (j) => {
				that.janus = j;
				creatAttach(j, (h) => {
					that.handle = h;
					that.success(h)
				},
				(error) => {
					bootbox.alert("创建会议失败... " + error);
				},
				(on) => {					
					Janus.log("consentDialog状态是(" + on + ")");
				},
				(medium, on) => {					
					Janus.log("Janus " + (on ? "开始" : "停止") + "接收" + medium);
				},
				(on) => {					
					Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
					if(!on) return;	
					configure(that.handle, that.bitrate)		
				},
				(msg, jsep) => {
					that.message(msg, jsep);
				},
				(stream) => {
					Janus.log(" ::: Got a local stream :::");
					$('#mainVideo_html5_api_span').html(that.description).show();
					Janus.attachMediaStream($('#mainVideo_html5_api').get(0), stream);	
				},
				(stream) => {
				},
				() => {
					Janus.log(" ::: Got a cleanup notification: we are unpublished now :::");
				})
			},
			(error) => {
				bootbox.alert(error, function() {
					window.location.reload();
				});
			},
			() => {
				window.location.reload();
			})		
		},
		//成功join会议
		success(h) {
			Janus.log("插件！(" + h.getPlugin() + ", id=" + h.getId() + ")");
			var register = { "request": "join", "room": this.roomId, "ptype": "publisher", "display": this.description, "pin": this.pin};
			join(h, register);
		},
		//事件处理
		message(msg, jsep) {
			let that = this;	
			var event = msg["videoroom"];
			if(event != undefined && event != null) {
				//join事件
				if(event === "joined") {
					that.mypvtid = msg["private_id"];
					that.roomName = msg["description"];
					Janus.log("Successfully joined room " + msg["room"] + " with ID " + msg["id"]);
					that.publishOwnFeed(that.microphone, that.camera);
					if(msg["publishers"] !== undefined && msg["publishers"] !== null) {
						var list = msg["publishers"];
						that.listData(list)
					}	
				} else if(event === "destroyed") { //销毁
					bootbox.alert("该房间已解散!", function() {
						sessionStorage.clear();
						that.janus.destroy();
					});
				} else if(event === "event") {
					if(msg["publishers"] !== undefined && msg["publishers"] !== null) {
						var list = msg["publishers"];
						that.listData(list)
					} else if(msg["leaving"] !== undefined && msg["leaving"] !== null) {
						var leaving = msg["leaving"];
						Janus.log("Publisher退出: " + leaving);
						that.leav(that.feeds, leaving)
					} else if(msg["unpublished"] !== undefined && msg["unpublished"] !== null) {
						var unpublished = msg["unpublished"];
						Janus.log("Publisher left: " + unpublished);
						if(unpublished === 'ok') {
							that.handle.hangup();
							return;
						}
						that.leav(that.feeds, unpublished)
					} else if(msg["error"] !== undefined && msg["error"] !== null) {
						bootbox.alert("加入房间失败... " + JSON.stringify(msg["error"]), function() {
							sessionStorage.clear();
							that.janus.destroy()
						});
					}
			    }
				if(jsep !== undefined && jsep !== null) {
					that.handle.handleRemoteJsep({jsep: jsep});
				}
			}
		},
		//退出处理feeds
		leav(feeds, value) {
			var remoteFeed = null;
			for(var i = 1; i < 5; i++) {
				if(feeds[i] != null && feeds[i] != undefined && feeds[i].rfid == value) {
					remoteFeed = feeds[i];
					break;
				}
			}
			if(remoteFeed != null) {
				this.feeds = feeds.filter(function(item) {
					return item != remoteFeed.rfindex
				})				
				$('#sideVideo'+remoteFeed.rfindex + '_html5_api_span').html("").show();		
				remoteFeed.detach();
			}			
		},

		//获取当前会议人员列表
		listData(list) {
			for(var f in list) {
				var id = list[f]["id"];
				var display = list[f]["display"];
				var audio = list[f]["audio_codec"];
				var video = list[f]["video_codec"];
				Janus.log("  >> [" + id + "] " + display + " (audio: " + audio + ", video: " + video + ")");
				this.newRemoteFeed(id, audio, video);
			}
		},

	   //初次进入会议媒体信息
	   //useAudio -> false 入会时静音
	   //userVideo -> false 入会时关闭摄像头
	   //两者不能同时关闭
	   publishOwnFeed(useAudio, userVideo) {
		   let that  = this;
			var media = {};
			if (!useAudio) {
				that.iconList[0].status = 0;
				that.iconList[0].sign = '#iconicon-microphone-off'
				media = {audioRecv: false, audioSend: false};
			} else if (!userVideo) {
				that.iconList[2].status = 0;
				that.iconList[2].sign = '#iconicon-camera-off'
				media = {videoRecv: false, videoSend: false};
			} else {
				media = {audioRecv: false, videoRecv: false, audioSend: useAudio, videoSend: userVideo};
			}
			var publish = {"request": "configure", "audio": useAudio, "video": userVideo};
			//初次进入会议处理媒体信息
			optionMedia(that.handle, media, publish, (err) => {
				Janus.error("WebRTC信息获取失败:", err);
				bootbox.alert("WebRTC信息获取失败... ");
				setTimeout(function(){
					sessionStorage.clear();
					that.janus.destroy();
				    location.href ="./index.html";
				},2000)
				
			})
	},

	newRemoteFeed(id, audio, video) {
		var remoteFeed = null;
		let that = this;
		creatAttach(that.janus,
		//成功函数
		(h) => {
			remoteFeed = h;
			that.subscriberJoin(remoteFeed, id, audio, video)
		},
		//失败函数
		(error) => {
			bootbox.alert("插件创建失败... " + error);
		},
		//consentDialog
		(on) => {					
			Janus.log("consentDialog状态是(" + on + ")");
		},
		//媒介状态
		(medium, on) => {					
			Janus.log("Janus " + (on ? "开始" : "停止") + "接收" + medium);
		},
		//webrtcState
		(on) => {					
			Janus.log("Janus says this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") is " + (on ? "up" : "down") + " now");		
		},
		//onmessage
		(msg, jsep) => {
			that.subscriberMessage(remoteFeed, msg, jsep, that.feeds);
		},
		//onlocalstream
		(stream) => {
		},
		//onremotestream
		(stream) => {
			Janus.debug("Remote feed #" + remoteFeed.rfindex);
			if($('#sideVideo'+remoteFeed.rfindex + '_html5_api').length === 0) {
			}
			Janus.attachMediaStream($('#sideVideo'+ remoteFeed.rfindex + '_html5_api').get(0), stream);
		},
		//oncleanup
		() => {
			Janus.log(" ::: Got a cleanup notification (remote feed " + id + ") :::");
			remoteFeed.simulcastStarted = false;
		})
	},
	subscriberJoin(remoteFeed, id, audio, video) {
		let that = this;
		remoteFeed.simulcastStarted = false;
		Janus.log("subscriber插件! (" + remoteFeed.getPlugin() + ", id=" + remoteFeed.getId() + ")");
		var subscribe = { "request": "join", "room": that.roomId, "ptype": "subscriber", "feed": id, "private_id": that.mypvtid , "pin": that.pin};
		if(Janus.webRTCAdapter.browserDetails.browser === "safari" && (video === "vp9" || (video === "vp8" && !Janus.safariVp8))) {
			if(video) video = video.toUpperCase()
			toastr.warning("Publisher is using " + video + ", but Safari doesn't support it: disabling video");
			subscribe["offer_video"] = false;
		}
		remoteFeed.videoCodec = video;
		remoteFeed.audioCodec = audio;
		join(remoteFeed, subscribe)
	},

	subscriberMessage(remoteFeed, msg, jsep, feeds) {
		let that = this;
		var event = msg["videoroom"];
		Janus.log("Event: " + event);
		if(msg["error"] !== undefined && msg["error"] !== null) {
			bootbox.alert(msg["error"]);
		} else if(event != undefined && event != null) {
			if(event === "attached") {
				for(var i=1;i<5;i++) {
					if(feeds[i] === undefined || feeds[i] === null) {
						feeds[i] = remoteFeed;
						remoteFeed.rfindex = i;
						break;
					}
				}
				remoteFeed.rfid = msg["id"];
				remoteFeed.rfdisplay = msg["display"];
				Janus.log("Successfully attached to feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") in room " + msg["room"]);
				$('#sideVideo'+remoteFeed.rfindex + '_html5_api_span').html(remoteFeed.rfdisplay).show();
			} else if(event === "event") {
				var substream = msg["substream"];
				var temporal = msg["temporal"];
				if((substream !== null && substream !== undefined) || (temporal !== null && temporal !== undefined)) {
					if(!remoteFeed.simulcastStarted) {
						remoteFeed.simulcastStarted = true;
					}
				}
			}
		}
		if(jsep !== undefined && jsep !== null) {
			var media = { audioSend: false, videoSend: false };
			opentionAnswer(remoteFeed, jsep, media, (j) => {
				var body = { "request": "start", "room": that.roomId };
				jsepSend(remoteFeed, body, j)
			},
			(error) => {
				bootbox.alert("WebRTC error... " + JSON.stringify(error));
			})
		}
	},
	myOption(index) {
		var status = this.iconList[index].status;
        switch(index) {
			case 0:
				if (status == 1 && this.camera && !this.share) {
					this.iconList[index].sign = '#iconicon-microphone-off' 
					this.microphone = false
					this.optionMethod(0);
					this.iconList[index].status = 0;
				} if (status == 0) {
					this.iconList[index].sign = '#iconicon-microphone-on' 
					this.microphone = true
					this.optionMethod(0);
					this.iconList[index].status = 1;
				}
			break;
			case 1:
				if (status == 1) {
					this.iconList[index].sign = '#iconicon-volume-off' 
				} if (status == 0) {
					this.iconList[index].sign = '#iconicon-volume' 
				}
				this.voice = !this.voice
			    this.iconList[index].status = status == 1? 0: 1;
				this.optionMethod(1);
			break;
			case 2:
				if (status == 1 && this.microphone) {
					this.iconList[index].sign = '#iconicon-camera-off'
					this.camera = false
					this.optionMethod(2);
					this.iconList[index].status = 0;	
				} if (status == 0 && !this.share) {
					this.iconList[index].sign = '#iconicon-camera-on'
					this.camera = true
					this.optionMethod(2);
					this.iconList[index].status = 1;
				}
			break;
			case 3:
				if (status == 1) {
					this.publicNotify('关闭屏幕分享..')
				} if (status == 0) {
					this.publicNotify('开启屏幕分享..')
					this.iconList[0].sign = '#iconicon-microphone-on'
					this.iconList[0].status = 1
					this.microphone = true;
					this.iconList[2].sign = '#iconicon-camera-off'
					this.iconList[2].status = 0
					this.camera = false;
				}
				this.share = !this.share
				this.iconList[index].status = status == 1? 0: 1;
				this.optionShare();
			break;
			case 4:
				this.publicNotify('开启..')
			break;
			case 5:
				this.optionDel()
				break;
		}		
	},
	publicNotify(msg) {
		this.$notify({
	      title: 'Tip',
	      message: msg
	    });
	},

	//屏幕共享
	optionShare() {
		//去除媒体参数
		var media1 = {removeAudio: true, removeVideo: true};
		//确认媒体参数
		var publish = {"request": "configure", "audio": true, "video": true};
		var media2 = {};
		if (this.share) {
			//开启屏幕共享参数
			media2 = {video: "screen", audioSend: this.microphone, videoRecv: this.camera};
		} else {
			media2 = { audioRecv: false, videoRecv: false, audioSend: this.microphone, videoSend: this.camera};
			//关闭屏幕共享，然后打开摄像头和麦克风
			if (!this.microphone) {
				media2 = {audioRecv: false, audioSend: false};
			}else if (!this.camera) {
				media2 = {videoRecv: false, videoSend: false};
			}
			publish = { "request": "configure", "audio": this.microphone, "video": this.camera };
		}
		//失败函数，操作失败后图标状态还原
		var err = () => {
			this.share = !this.share;
			this.iconList[3].status = this.share ? 0 : 1;
		}
		//操作屏幕共享，先去除媒体信息，不然设置不生效
		optionMedia(this.handle, media1, publish, err);
		//在设置video为screen共享
		optionMedia(this.handle, media2, publish, err);
	},

	//操作麦克风->0, 声音->1, 摄像头->2
	//打开->true, 关闭->false
	//err失败函数, 图标还原
	optionMethod(methods) {
		var media = {};
		var err;
		switch(methods){
			case 0:
				media = this.microphone ? {addAudio: true} : {removeAudio: true};
				err = () => {
					this.iconList[0].sign = this.microphone ? '#iconicon-microphone-off' : '#iconicon-microphone-on'
					this.microphone = !this.microphone
					this.iconList[0].status = this.microphone ? 0 : 1;
				}
			    break;
			case 1:
				for (var i = 1; i < 5; i++) {
					document.getElementById('sideVideo' + i + '_html5_api').muted = !this.voice;
				}
			    break;
			case 2:
				media = this.camera ? {addVideo: true} :  {removeVideo: true};
				err = () => {
					this.iconList[2].sign = this.camera ? '#iconicon-camera-off' : '#iconicon-camera-on'
					this.camera = !this.camera
					this.iconList[2].status = this.camera ? 0 : 1;
				}
			    break;
		}
		if (methods != 1) {
			var publish = { "request": "configure", "audio": true, "video": true };
			//操作媒体		
			optionMedia(this.handle, media, publish, err);
		}
	},
	forId:function(index) {
		return "btn_" + index
	},
	videoClick(fromId) {
		// var fromSrc, toSrc;
		// fromSrc = document.getElementById('sideVideo' + index + '_html5_api').srcObject;

		// console.log('**********' + fromSrc); 
		// if (fromSrc) {
		// 	console.log('**********'); 
		// 	toSrc = document.getElementById('mainVideo_html5_api').srcObject;
		// 	document.getElementById('mainVideo_html5_api').srcObject = fromSrc;
		// 	document.getElementById('sideVideo' + index + '_html5_api').srcObject = toSrc;
		// }else {
		// 	console.log('No src...');
		// }
		var toId;
		var fromIndex;
		this.divSort.filter((d,index) => {
          //查询from to的Id
          if (index == 0){ toId = d;}
          if (d == fromId) {fromIndex = index;}
        });

		var insert = function(nodeInsert,nodeTo){
	        if(nodeInsert.insertAdjacentElement) {
	            nodeTo.insertAdjacentElement('beforeBegin',nodeInsert);
	        }
	        else {
	            nodeTo.parentNode.insertBefore(nodeInsert,nodeTo);
	        }
	    }
	    var obj= document.createElement("a");
	    var t1 = document.getElementById(fromId);
	    var t2 = document.getElementById(toId);

		var name1 = document.getElementById(fromId + '_span');
		var name2 = document.getElementById(toId + '_span');
	    
	    insert(obj,t2);
	    insert(t2,t1);
	    insert(t1,obj);

	    insert(obj,name2);
	    insert(name2,name1);
	    insert(name1,obj);

	    //显示名称移动
	//     document.body.removeChild(obj); 
		this.divSort[fromIndex] = this.divSort[0]
		this.divSort[0] = fromId       

	},
	//判断人数后销毁会议
	//2为在线人数是多少需要销毁
	//函数是在线人数小于2，执行销毁, 在线人数大于3. 不执行销毁，直接清除seesion，然后退出
	optionDel() {
		let that = this;
		listparticipants(that.handle, this.roomId, (event) => {
			if (event.length <= 2) {
				optionDestroy(that.handle, this.roomId, this.pin)
			} else {
				sessionStorage.clear();
				that.janus.destroy()
			}			
		})
	}
  }
})