webrtc 合流
作者：互联网
<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 来源： https://www.cnblogs.com/2587jsq/p/16601142.html