Web网页音视频通话之基于sipjs功能扩展

最新推荐文章于 2024-06-13 09:27:44 发布

程序员小菜鸡QAQ

最新推荐文章于 2024-06-13 09:27:44 发布

阅读量1.1k

点赞数

文章标签：前端音视频 javascript

本文链接：https://blog.csdn.net/Java_Wxlin/article/details/127109669

版权

本文详细介绍了如何使用JavaScript实现音视频通话中的音频开关、视频开关以及屏幕共享功能。通过操作peerConnection和媒体流，实现了静音/取消静音、打开/关闭视频以及获取屏幕流进行共享。代码中还包含了错误处理和状态提示。

摘要由CSDN通过智能技术生成

在上一篇开发基础上，已经实现了音视频通话。本文是在此基础上继续完成以下内容

关闭/开启音频
开启/关闭视频
屏幕共享

开启/关闭音频

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)
        });
    }