<template> <!-- 大窗口 --> <div class="liveVideos"> <video id="camaraVideo" width="100%" height="100%" ref="videoing" class="video" autoplay="autoplay" muted ></video> <div v-if="isShowLoading" style="width: 10px; height: 10px; position: absolute; top: 50%; left: 50%" > <div class="load-container load4"> <div class="loader"></div> </div> </div> </div> </template> <script> const config = { iceServers: [ { urls: "turn:118.186.244.77:3478?transport=udp", credential: "hmcs123456", username: "admin", }, { urls: "stun:global.stun.twilio.com:3478?transport=udp" }, ], }; import Janus from "../../../components/webrtcJS/janus.js"; import { streamSourec } from "../../../components/webrtcJS/ipAnalysis.js"; export default { name: "caramerSourcres", components: {}, watch: { "settings.computer"(val) { // 摄像头画面 console.log("settings.computer", val); this.changeDeskVideoEnable(val); }, "settings.Microphoneing"(val) { // 麦克风 console.log("settings.Microphoneing", val); this.changeAudioMicEnable(val); }, "settings.Micrcomputer"(val) { // 桌面声音 console.log("settings.Micrcomputer", val); this.changeAudioDeskEnable(val); }, "settings.Microphone"(val) { // 改变麦克风 console.log("settings.Microphone", val); this.changeMicroPhoneDevice(val); }, "settings.viderCameraId"(val) { // 改变摄像机设备 console.log("settings.viderCameraId", val); this.changeCamaraDevice(val); }, }, props: { videoSrc: { type: Object, }, audioFlage: { type: Boolean, default: true, }, styeing: { type: Boolean, default: false, }, settings: { type: Object, /** * videoCamera 摄像头 boolean * viderCameraId 摄像机设备 选择的decerid 默认是'' * computer 共享电脑画面 boolean * * Microphoneing 麦克风 true * Microphone 麦克风选择 选择的decerid 默认是'' * MicrophoneValue 麦克风音量 50 number boolean * Micrcomputer 共享电脑声音 boolean * * * speaker 扬声器 电脑声音 选择的decerid 默认是'' * speakerValue 扬声器声音大小 number * * isState 屏幕还是摄像头 默认摄像头 0 1 桌面 * */ } }, data() { return { SSOID: window.localStorage.getItem("SSOID") || "", musicing: require("@/assets/room/music.png"), audiolocalMicStream: null, deskLocalStream: null, videolocalMicStream: null, isAlreadyPushStream: false, userName: window.localStorage.getItem("username") || "", isShowLoading : true, }; }, created() { console.log("deskLocalSource"); }, beforeDestroy() { this.hangupHandle(); }, mounted() { let that = this; this.getLocalStreamBySetting().then((stream) => { var camaraVideo = document.getElementById("camaraVideo"); var tempStream = new MediaStream(); tempStream.addTrack(...stream.getVideoTracks()); Janus.attachMediaStream(camaraVideo, tempStream); if (stream) { streamSourec(stream, (value) => { that.$emit("changeAudioVal", { fromUserName: that.userName, value }); }); } that.$parent.preparedPublishOwnFeed(stream); }); }, methods: { mergeAudioStreams(desktopStream, voiceStream) { const context = new AudioContext(); const destination = context.createMediaStreamDestination(); if (desktopStream && desktopStream.getAudioTracks().length > 0) { const source1 = context.createMediaStreamSource(desktopStream); const desktopGain = context.createGain(); desktopGain.gain.value = 0.7; source1.connect(desktopGain).connect(destination); } if (voiceStream && voiceStream.getAudioTracks().length > 0) { const source2 = context.createMediaStreamSource(voiceStream); const voiceGain = context.createGain(); voiceGain.gain.value = 0.7; source2.connect(voiceGain).connect(destination); } return destination.stream.getAudioTracks(); }, async getLocalStreamBySetting() { let stream_media = new MediaStream(); let that = this; //判定是否静音 //麦克风声音 try { let audioConstraints; if (this.settings.Microphone) { audioConstraints = { video: false, audio: { deviceId: this.settings.Microphone, noiseSuppression: true, echoCancellation: true, }, logicalSurface: false, }; } else { audioConstraints = { video: false, audio: { noiseSuppression: true, echoCancellation: true, }, logicalSurface: false, }; } this.audiolocalMicStream = await navigator.mediaDevices.getUserMedia( audioConstraints ); } catch (err) { that.$message.error("获取麦克风失败"); console.error("获取麦克风失败", err); } //获取桌面流 const deskonstraints = { audio: { mandatory: { chromeMediaSource: "desktop", }, }, video: { mandatory: { chromeMediaSource: "desktop", }, }, }; this.deskLocalStream = await navigator.mediaDevices.getUserMedia( deskonstraints ); let mergeAudioTracks = this.mergeAudioStreams( this.deskLocalStream, this.audiolocalMicStream ); this.changeAudioMicEnable(this.settings.Microphoneing); this.changeAudioDeskEnable(this.settings.Micrcomputer); if (mergeAudioTracks) { stream_media.addTrack(...mergeAudioTracks); } //电脑桌面声音 if (this.deskLocalStream) { stream_media.addTrack(...this.deskLocalStream.getVideoTracks()); } return stream_media; }, // 控制麦克风静音 changeAudioMicEnable(enable) { if (this.audiolocalMicStream) { for ( var i = 0; i < this.audiolocalMicStream.getAudioTracks().length; i++ ) { var track = this.audiolocalMicStream.getAudioTracks()[i]; if (track) track.enabled = enable; } } }, // 控制屏幕 changeDeskVideoEnable(enable) { console.log(enable); if (this.deskLocalStream) { for (var i = 0; i < this.deskLocalStream.getVideoTracks().length; i++) { var track = this.deskLocalStream.getVideoTracks()[0]; if (track) track.enabled = enable; } } }, // 主播听不到自己的电脑声音 changeAudioDeskEnable(enable) { if (this.deskLocalStream) { for (var i = 0; i < this.deskLocalStream.getAudioTracks().length; i++) { var track = this.deskLocalStream.getAudioTracks()[0]; if (track) track.enabled = enable; } } }, changeMicroPhoneDevice(deviceId) { this.hangupHandle(); }, changeCamaraDevice(deviceId) { this.hangupHandle(); }, hangupHandle() { if (this.deskLocalStream) { let tracks = this.deskLocalStream.getTracks(); tracks.forEach(function (track) { track.stop(); }); this.deskLocalStream = null; } if (this.audiolocalMicStream) { let tracks = this.audiolocalMicStream.getTracks(); tracks.forEach(function (track) { track.stop(); }); this.audiolocalMicStream = null; } if (this.videolocalMicStream) { let tracks = this.videolocalMicStream.getTracks(); tracks.forEach(function (track) { track.stop(); }); this.videolocalMicStream = null; } }, userHandle() { // 关闭连接并设置为空 this.hangupHandle(); }, cancelLoading(){ this.isShowLoading=false }, }, }; </script> <style lang="scss" scoped> .liveVideos { // -webkit-app-region: drag; width: 100%; height: auto; position: relative !important; // video { // // object-fit: fill; // } } .box_change { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: #000000; border-radius: 2px 2px 2px 2px; opacity: 0.5; display: flex; justify-content: center; align-items: center; z-index: 11; span { font-size: 12px; font-family: Source Han Sans SC-Regular, Source Han Sans SC; font-weight: 400; color: #e6e6e6; margin-left: 8px; } } </style>
标签:stream,val,settings,track,audiolocalMicStream,deskLocalStream,合流,webrtc From: https://www.cnblogs.com/2587jsq/p/16601142.html