Web网页音视频通话之基于sipjs功能扩展
2022/7/30 6:23:52
本文主要是介绍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) }); }
功能截图稍后补充
这篇关于Web网页音视频通话之基于sipjs功能扩展的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南