ganzf
/
uniIM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<!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" id="vd_user" autoplay class="main-video"></video>
    <div v-if="!friendData.video" class="friend-info">
        <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" alt=""/>
        </div>
        <div v-if="showAccept && !isConnect">
            <img @click="accept" src="./images/mt/icon_on.png" class="menu-close" alt=""/>
        </div>
    </div>
</div>
<audio id="bgSound" src="./images/calling.mp3" autoplay loop style='display: none'></audio>
<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 (res) {
            createApp({
                setup() {
                    const id = ref('')
                    const name = ref('')
                    const peerId = ref('')
                    const localPeerId = ref(undefined)
                    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 showAccept = ref(false)
                    const mainVideo = ref()
                    const localVideo = ref()
                    const localMedia = ref()
                    const dataConnection = ref()

                    onMounted(() => {
                        id.value = getQueryVariable("id")
                        name.value = decodeURI(getQueryVariable("name"))
                        peerId.value = getQueryVariable("peerId")
                        friendId.value = getQueryVariable("friendId")
                        friendName.value = decodeURI(getQueryVariable("friendName"))
                        friendAvatar.value = getQueryVariable("friendAvatar")
                        showVideo.value = getQueryVariable("showVideo") === 'true'
                        const localPeer = initPeer()
                        localPeer.on('open', (pid) => {
                            localPeerId.value = pid
                            dataConnection.value = localPeer.connect(peerId.value)

                            dataConnection.value.on('open', () => {
                                showAccept.value = true
                            })
                            dataConnection.value.on('data', (data) => {
                                if (data.cmd === PeerCmd.ringOff) {
                                    closeCalling()
                                } else if (data.cmd === PeerCmd.busy) {
                                    closeCalling()
                                } else if (data.cmd === PeerCmd.accept) {
                                    getLocalUserMedia({ audio: true, video: showVideo.value })
                                        .then((userMedia) => {
                                            localMedia.value = userMedia
                                            friendData.value.video = showVideo.value
                                            isConnect.value = true
                                            const mediaConnection = localPeer.call(peerId.value, userMedia)
                                            mediaConnection.on('stream', (otherUserMedia) => {
                                                localData.value.video = showVideo.value
                                                mainVideo.value.srcObject = otherUserMedia
                                                mainVideo.value.muted = false
                                                if (showVideo.value) {
                                                    localVideo.value.srcObject = userMedia
                                                    localVideo.value.muted = true
                                                }
                                            })
                                        })
                                        .catch(() => {
                                            isConnect.value = false
                                            closeCalling()
                                        })
                                }
                            })
                        })
                    })

                    const muteAudio = (boo) => {
                        console.log('123',boo)
                    }
                    const changeSpeaker = () => {

                    }
                    const changeCamera = () => {
                        console.log('changeCamera')
                    }
                    const closeCalling = () => {
                        //关闭视频流
                        localMedia.value?.getTracks().forEach((track) => {
                            track.stop()
                        })
                        uni.postMessage({
                            data: {
                                type: 'close',
                                data:{calling:false}
                            }
                        })
                    }
                    /**
                     * 接受视频
                     */
                    const accept = () => {
                        uni.postMessage({
                            data: {
                                type: 'accept',
                                data:{
                                    peerId: localPeerId.value
                                }
                            }
                        })
                        document.getElementById('bgSound').pause()
                        //发送请求,告诉对方我要视频
                        dataConnection.value?.send({
                            cmd: PeerCmd.request
                        })
                    }
                    return {
                        id,
                        name,
                        friendId,
                        friendAvatar,
                        friendName,
                        localData,
                        showVideo,
                        friendData,
                        isConnect,
                        showAccept,
                        changeCamera,
                        changeSpeaker,
                        muteAudio,
                        mainVideo,
                        localVideo,
                        closeCalling,
                        accept,
                        speaker
                    }
                }
            }).mount('#app')
        });
    });
</script>
</body>
</html>