ganzf
/
uniIM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!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 ref="mainVideo" poster="./images/mt/pt.png"  autoplay class="main-video"></video>
    <div class="friend-info" v-if="!(showVideo && isConnect)">
        <img :src="friendAvatar" style="width: 60px;height:60px;border-radius: 5px;margin-top: 100px;" alt=""/>
        <div class="friend-name">{{ friendName }}</div>
        <div class="friend-tips">{{isConnect?'正在通话中...':'正在等待对方接听'}}</div>
    </div>
    <video ref="localVideo" :muted="true" poster="./images/mt/pt.png" autoplay class="local-video"></video>
    <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 src="./js/peerjs.min.js"></script>
<script src="./js/video-call.js"></script>
<script>
    const {createApp, ref, onMounted} = Vue

    document.addEventListener('UniAppJSBridgeReady', function () {
        uni.getEnv(function () {
            createApp({
                setup() {
                    const id = 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 isConnect = ref(false)
                    const mainVideo = ref()
                    const localVideo = 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'
                        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
                                        //告诉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 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}
                            }
                        })
                    }
                    return {
                        id,
                        name,
                        friendId,
                        friendAvatar,
                        friendName,
                        localData,
                        showVideo,
                        friendData,
                        isConnect,
                        changeCamera,
                        changeSpeaker,
                        muteAudio,
                        mainVideo,
                        localVideo,
                        closeCalling,
                        speaker
                    }
                }
            }).mount('#app')
        });
    });
</script>
</body>
</html>