Web網頁音視頻通話之基於sipjs功能擴展

在上一篇開發基礎上，已經實現了音視頻通話。本文是在此基礎上繼續完成以下內容

• 關閉/開啓音頻
• 開啓/關閉視頻
• 屏幕共享

開啓/關閉音頻

javaScript

/**
     * 靜音
     */
    mute() {
        if (!currentSession) {
            layer.msg("請先建立視頻通話");
            return false;
        }
        var pc = currentSession.sessionDescriptionHandler.peerConnection;
        if (pc.getSenders) {
            pc.getSenders().forEach(function (sender) {
                if (sender.track.kind === 'audio') {
                    sender.track.enabled = false
                    layer.msg('您已開啓靜音');
                }
            });
        } else {
            pc.getLocalStreams().forEach(function (stream) {
                stream.getAudioTracks().forEach(function (track) {
                    if (track.kind === 'audio') {
                        track.enabled = false;
                        layer.msg('您已開啓靜音');
                    }
                });
            });
        }
    }
/**
     * 解除靜音
     */
    unmute() {
        if (!currentSession) {
            layer.msg("請先建立視頻通話");
            return false;
        }
        var pc = currentSession.sessionDescriptionHandler.peerConnection;
        if (pc.getSenders) {
            pc.getSenders().forEach(function (sender) {
                if (sender.track.kind === 'audio') {
                    sender.track.enabled = true
                    layer.msg('您已解除靜音');
                }
            });
        } else {
            pc.getLocalStreams().forEach(function (stream) {
                stream.getAudioTracks().forEach(function (track) {
                    if (track.kind === 'audio') {
                        track.enabled = true
                        layer.msg('您已解除靜音');
                    }
                });
            });
        }
    }

功能截圖稍後補充

開啓/關閉視頻

javaScript

 /**
     * 打開視頻
     */
    openVideo() {
        if (!currentSession) {
            layer.msg("請先建立視頻通話");
            return false;
        }
        var pc = currentSession.sessionDescriptionHandler.peerConnection;
        if (pc.getSenders) {
            pc.getSenders().forEach(function (sender) {
                if (sender.track.kind === 'video') {
                    sender.track.enabled = true
                    layer.msg('您已打開視頻');
                }
            });
        } else {
            pc.getLocalStreams().forEach(function (stream) {
                stream.getAudioTracks().forEach(function (track) {
                    if (track.kind === 'video') {
                        track.enabled = true
                        layer.msg('您已打開視頻');
                    }
                });
            });
        }
    }
/**
     * 關閉視頻
     */
    closeVideo() {
        if (!currentSession) {
            layer.msg("請先建立視頻通話");
            return false;
        }
        var pc = currentSession.sessionDescriptionHandler.peerConnection;
        if (pc.getSenders) {
            pc.getSenders().forEach(function (sender) {
                if (sender.track.kind === 'video') {
                    sender.track.enabled = false
                    layer.msg('您已關閉視頻');
                }
            });
        } else {
            pc.getLocalStreams().forEach(function (stream) {
                stream.getAudioTracks().forEach(function (track) {
                    if (track.kind === 'video') {
                        track.enabled = false
                        layer.msg('您已關閉視頻');
                    }
                });
            });
        }
    }

功能截圖稍後補充

屏幕共享

javaScript

  /**
     * 屏幕流
     */
    shareScreenStream() {
        if (currentSession == null) {
            layer.msg("請先建立視頻通話");
            return false;
        }
        var pc = currentSession.sessionDescriptionHandler.peerConnection;
        const displayMediaStreamConstraints = {
            video: {
                cursor: "always"
            },
            audio: true
        };
        //獲取分享窗口流
        if (navigator.mediaDevices.getDisplayMedia) {
            navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints).then(mediaStream => {
                localVideo.srcObject = mediaStream
                pc.getSenders().forEach(sender => {
                    if (sender.track.kind == 'video') {
                        var res = sender.replaceTrack(mediaStream.getVideoTracks()[0])
                        console.log(res)
                    }
                });
                //監聽手動點擊“停止分享”
                mediaStream.getVideoTracks()[0].onended = () => {
                    layer.msg("桌面共享已關閉,正在切換爲攝像頭數據,請稍後...")
                    SCREENSHARDING.switchCamera(pc)
                }
            }).catch(error => {
                console.log("error", error)
                layer.msg("媒體設備獲取異常")
            });
        } else {
            console.log("navigator.mediaDevices.getDisplayMedia  false");
            layer.msg("瀏覽器不不支持")
        }
    },
    /**
     * 切換爲攝像頭數據
     */
    switchCamera(pc) {
        var constraints = {
            audio: {
                autoGainControl: true,
                // 噪音消除
                noiseSuppression: true,
                // 設置降噪
                echoCancellation: true
            },
            video: true
        }
        navigator.mediaDevices.getUserMedia(constraints).then(stream => {
            localVideo.srcObject = stream
            pc.getSenders().forEach(sender => {
                if (sender.track.kind == 'video') {
                    sender.replaceTrack(stream.getVideoTracks()[0])

                }
            });
        }).catch(error => {
            layer.msg('切換攝像頭失敗');
            console.error('切換攝像頭失敗，失敗原因：', error)
        });
    }

功能截圖稍後補充