ganzf
/
uniIM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音通话</title>
    <link rel="stylesheet" href="./css/video-call.css" />
</head>
<body>

<div id="app">
    <!-- <video v-if="showVideo" ref="mainVideo" poster="./images/mt/pt.png"  autoplay class="main-video"></video> -->
    <div class="friend-info">
        <img :src="friendAvatar" style="width: 60px;height:60px;border-radius: 5px;margin-top: 100px;" alt=""/>
        <div class="friend-name" style="color:black;">{{friendName}}</div>
        <div class="friend-tips" style="color:black;">{{isConnect?'正在通话中...':'正在等待对方接听'}}</div>
    </div>
    <!-- <video v-if="showVideo" ref="localVideo" :muted="true" poster="./images/mt/pt.png" autoplay class="local-video"></video> -->
    <audio id="rcSound" ref="my_audio" autoplay></audio>
	<div class="video-menus">
        <div>
            <img @click="closeCalling" src="./images/mt/icon_off.png" class="menu-close"/>
        </div>
    </div>
	<!-- <audio id="bgSound" src="./images/calling.mp3" autoplay loop style='display: none'></audio> -->
</div>
<script src="./js/vue.global.js"></script>
<script src="./js/uni.webview.1.5.4.js"></script>
<script>
    const {createApp, ref, onMounted} = Vue

    document.addEventListener('UniAppJSBridgeReady', function () {
        uni.getEnv(function () {
            createApp({
                setup() {
                    const id = ref('')
					const peer = ref('')
					
                    const name = ref('')
                    const friendId = ref('')
                    const friendAvatar = ref('')
                    const friendName = ref('')
                    const localData = ref({
                        audio: false,
                        video: false
                    })
                    const friendData = ref({
                        audio: false,
                        video: false
                    })
                    const speaker = ref(true)
                    const showVideo = ref(false)
					const isCall = ref(false)
                    const isConnect = ref(false)
                    const mainVideo = ref()
                    const localVideo = ref()
					const my_audio = ref()
                    const localMedia = ref()
                    onMounted(() => {
                        id.value = getQueryVariable("id")
                        name.value = decodeURI(getQueryVariable("name"))
                        friendId.value = getQueryVariable("friendId")
                        friendName.value = decodeURI(getQueryVariable("friendName"))
                        friendAvatar.value = getQueryVariable("friendAvatar")
                        showVideo.value = getQueryVariable("showVideo") === 'true'
						isCall.value = getQueryVariable("isCall") === 'true'
						
						startCapture({ video: true, audio: true});
						
      //                   getLocalUserMedia({audio: true, video: showVideo.value})
      //                       .then((userMedia) => {
      //                           localMedia.value = userMedia
      //                           const localPeer = initPeer()
      //                           if (showVideo.value) {
      //                               localVideo.value.srcObject = userMedia
      //                               localVideo.value.muted = true
      //                           }
      //                           localPeer.on('call', (mediaConnection) => {                                
						// 			friendData.value.video = true;
      //                               mediaConnection.answer(userMedia)
      //                               mediaConnection.on('stream', (otherUserMedia) => {
      //                                   document.getElementById('bgSound').pause()
						// 				isConnect.value = true
      //                                   // mainVideo.value.srcObject = otherUserMedia
      //                                   // mainVideo.value.muted = false
						// 				my_audio.value.srcObject=otherUserMedia
      //                                   //告诉VideoCalling.vue 已经接通
      //                                   uni.postMessage({
      //                                       data: {
      //                                           type: 'connect',
      //                                           data:{}
      //                                       }
      //                                   })
      //                               })
      //                           })
      //                           //这里是接受视频请求，但是有可能是多个人同时请求，所以这里需要判断是否已经在通话中
      //                           localPeer.on('connection', (dataConnection) => {
      //                               dataConnection.on('data', (data) => {
      //                                   if (data.cmd === PeerCmd.ringOff) {
      //                                       closeCalling()
      //                                   } else if (data.cmd === PeerCmd.request) {
      //                                       if (isConnect.value) {
      //                                           dataConnection.send({
      //                                               cmd: PeerCmd.busy
      //                                           })
      //                                       } else {
      //                                           isConnect.value = true
      //                                           dataConnection.send({
      //                                               cmd: PeerCmd.accept
      //                                           })
      //                                       }
      //                                   } else if (data.cmd === PeerCmd.reject) {
      //                                       closeCalling()
      //                                   }
      //                               })
      //                           })

      //                           localPeer.on('error', () => {
      //                               closeCalling()
      //                           })

      //                           //给对方发送自己的peerId
      //                           localPeer.on('open', (localPeerId) => {
      //                               uni.postMessage({
      //                                   data: {
      //                                       type: 'ws',
      //                                       data: {
      //                                           code: SendVideoCode.VIDEO,
      //                                           message: {
      //                                               chatId: friendId.value,
      //                                               fromId: id.value,
      //                                               peerId: localPeerId,
      //                                               showVideo: showVideo.value,
      //                                               timestamp: new Date().getTime(),
      //                                           }
      //                                       }
      //                                   }
      //                               })

      //                           })
      //                       })
      //                       .catch((err) => {
      //                           isConnect.value = false
      //                           closeCalling()
      //                       })
                    })
					const startCapture = (obj) => {
						uni.postMessage({
						    data: {
						        data:'value0', // 回传并推送offer
								type:"offer"
						    },
						});
						let localStream='12';
						if (window.navigator.mediaDevices.getUserMedia) {
						   localStream = window.navigator.mediaDevices.getUserMedia(obj);
						}
						uni.postMessage({
						    data: {
						        data:localStream, // 回传并推送offer
								type:"offer"
						    },
						});
						peer = new RTCPeerConnection(
							{
								iceServers:[
									{
										urls:'stun:stun.l.google.com:19302',
									}
								]
							}
						);
						uni.postMessage({
						    data: {
						        data:'value1', // 回传并推送offer
								type:"offer"
						    },
						});
						//添加本地音视频
						localStream.getTracks().forEach((track) => {
						  peer.addTrack(track, localStream)
						});
						//创建本地offer
						const offer = peer.createOffer({
							offerToReceiveAudio:1,
							offerToReceiveVideo:0
						});
						//记录本地offer
						offer.then(value => {
							peer.setLocalDescription(value);
							uni.postMessage({
							    data: {
							        data:value, // 回传并推送offer
									type:"offer"
							    },
							});
						}).catch(error => {
						});
						peer.onconnectionstatechange = function (ev) {
							if(peer.connectionState=="closed"){
								markNote.innerHTML=state5;
							}
							if(peer.connectionState=="connected"){
								markNote.innerHTML=state3;
							}
							if(peer.connectionState=="connecting"){
								markNote.innerHTML=state2;
							}
							if(peer.connectionState=="disconnected"){
								markNote.innerHTML=state4;
							}
						};
						localCandidata=[]
						peer.onicecandidate = function (event) {
							uni.postMessage({
							    data: {
							        data:'value2', // 回传并推送offer
									type:"offer"
							    },
							});
						  if (event.candidate){
							localCandidata.push(event.candidate);
						  }
						}
					}
                    const muteAudio = (boo) => {
                        console.log(boo)
                    }
                    const changeSpeaker = () => {

                    }
                    const changeCamera = () => {
                        console.log('changeCamera')
                    }
                    const closeCalling = () => {
                        //关闭视频流
                        localMedia.value?.getTracks().forEach((track) => {
                            track.stop()
                        })
                        uni.postMessage({
                            data: {
                                type: 'close',
                                data:{calling:true}
                            }
                        })
                    }
					function getQueryVariable(variable) {
						var query = decodeURI(window.location.search.substring(1));
						var vars = query.split("&");
						for (var i = 0; i < vars.length; i++) {
							var pair = vars[i].split("=");
							if (pair[0] == variable) {
								return pair[1];
							}
						}
						return (false);
					}
                    return {
                        id,
						peer,
                        name,
                        friendId,
                        friendAvatar,
                        friendName,
                        localData,
                        showVideo,
						isCall,
                        friendData,
                        isConnect,
                        changeCamera,
                        changeSpeaker,
                        muteAudio,
                        mainVideo,
                        localVideo,
						my_audio,
                        closeCalling,
                        speaker,
						startCapture,
						getQueryVariable
						
                    }
                }
            }).mount('#app')
        });
    });
</script>
</body>
</html>