ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-07-29 23:34:14  阅读:195  来源: 互联网

标签:Web layer sender pc sipjs 音视频 track forEach msg


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

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

开启/关闭音频

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

功能截图稍后补充

标签:Web,layer,sender,pc,sipjs,音视频,track,forEach,msg
来源: https://www.cnblogs.com/HelloWxl/p/16534008.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有