如何为屏幕共享添加音频？
我正在使用RTCMultiConnection v3.0，我需要单向屏幕共享和双向音频。
我尝试使用khan/RTCMultiConnection：
获取屏幕共享的双向音频HTML
<div class="mt-4 mb-4" id="videos-container"></div>
JS
import { Component, OnInit, SimpleChanges, AfterViewInit, ElementRef, ViewChild, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import {
UtilService,
} from '../../services';
interface WebcastType {
share: boolean;
join: boolean;
}
declare let window: any;
declare let getScreenConstraints: any;
declare let getMediaElement: any;
declare let RTCMultiConnection: any;
declare let navigator: any;
@Component({
selector: 'webrtc',
templateUrl: './webrtc.component.html',
styleUrls: ['./webrtc.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class WebrtcComponent implements OnInit, AfterViewInit {
@ViewChild('roomidEle') public roomidEle: ElementRef;
@ViewChild('refreshId') public refreshId: ElementRef;
@ViewChild('videoscontainer') public videoscontainer: ElementRef;
@ViewChild('shareStreamEle') public shareStreamEle: ElementRef;
@ViewChild('roomurls') public roomurls: ElementRef;
@ViewChild('webrtcmaindiv') public webrtcmaindiv: ElementRef;
@ViewChild('shareScreenEle') public shareScreenEle: ElementRef;
@Input() webcastType: WebcastType;
@Input() webCastId: any;
@Input() isVideo: boolean = false;
@Input() isAudio: boolean = false;
@Input() isAudioType: string = '';
public connection: any;
public isExtensionInstalled: boolean = true;
public endScreeMsg: string;
public userStreamId: any;
public isRoomExists: boolean = false;
public isLoading: boolean = false;
constructor(
public utilService: UtilService,
private cdr: ChangeDetectorRef
) { }
ngOnInit() { }
shareStream() {
this.endScreeMsg = '';
let me = this;
this.disableInputButtons();
this.disableShareButtons(true);
this.isLoading = true;
this.connection.openOrJoin(this.webCastId, (isRoomExists, roomid) => {
this.isRoomExists = isRoomExists;
this.disableInputButtons(true);
this.isLoading = false;
this.cdr.markForCheck();
this.disableShareButtons(false);
});
console.log('this.connection=====', this.connection);
this.checkExtensionInstall();
}
checkExtensionInstall() {
if (this.connection.DetectRTC.browser.isChrome) {
this.connection.getChromeExtensionStatus((status) => {
if (status == 'installed-enabled') {
this.isExtensionInstalled = true;
}
if (status == 'not-installed') {
this.isExtensionInstalled = false;
this.utilService.showErrorToast('Please install chrome extension. It seems that chrome extension is not installed.');
this.disableInputButtons(false);
this.isLoading = false;
}
if (status == 'not-chrome') {
this.utilService.showErrorToast('Please either use Chrome or Firefox to share screen.');
this.disableInputButtons(false);
this.isLoading = false;
}
this.cdr.markForCheck();
});
}
if (this.connection.DetectRTC.browser.isFirefox) {
console.log('it is in firefox=====');
}
}
ngAfterViewInit() {
this.disableInputButtons(false);
this.loadWebRtc();
}
public refreshScreen() {
console.log('this.userStreamId====', this.isRoomExists);
if (this.isRoomExists) {
this.loadWebRtc();
} else {
if (!this.userStreamId) {
this.disableInputButtons(false);
}
this.connection.removeStream(this.userStreamId);
}
this.connection.attachStreams.forEach((stream) => {
stream.stop();
this.disableShareButtons(true);
});
}
exitStream() {
this.disableShareButtons(true);
this.connection.attachStreams.forEach((stream) => {
stream.stop();
});
if (this.isRoomExists) {
this.utilService.goBack();
this.connection.close();
}
}
loadWebRtc() {
this.connection = new RTCMultiConnection();
let connection = this.connection;
this.isExtensionInstalled = true;
this.isLoading = false;
this.disableShareButtons(true);
// Using getScreenId.js to capture screen from any domain
// You do NOT need to deploy Chrome Extension YOUR-Self!!
connection.getScreenConstraints = (callback) => {
getScreenConstraints((error, screen_constraints) => {
console.log('getScreenConstraints==', error);
if (!error) {
screen_constraints = connection.modifyScreenConstraints(screen_constraints);
callback(error, screen_constraints);
this.cdr.markForCheck();
return;
}
this.isLoading = false;
this.disableInputButtons(false);
this.utilService.showErrorToast(error);
throw error;
});
};
// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.socketMessageEvent = 'nse-webrtc';
connection.session = {
audio: 'two-way',
video: false,
screen: true,
oneway: true,
};
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: false
};
connection.videosContainer = this.videoscontainer.nativeElement;
connection.onstream = (event) => {
if (document.getElementById(event.streamid)) {
var existing = document.getElementById(event.streamid);
existing.parentNode.removeChild(existing);
}
let isFullScreen = '';
if (this.isRoomExists) {
isFullScreen = 'full-screen';
}
let webrtcEle = this.webrtcmaindiv.nativeElement;
let screenWidth = (webrtcEle.clientWidth - 7);
if (this.isVideo) {
screenWidth = 230;
}
var mediaElement = window['getMediaElement'](event.mediaElement, {
title: event.userid,
buttons: [isFullScreen],
width: screenWidth,
showOnMouseEnter: true
});
connection.videosContainer.appendChild(mediaElement);
setTimeout(function () {
mediaElement.media.play();
}, 5000);
mediaElement.id = event.streamid;
this.userStreamId = event.streamid;
};
this.streamended();
// ......................................................
// ......................Handling Room-ID................
// ......................................................
let roomid: any = '';
localStorage.setItem(connection.socketMessageEvent, this.webCastId);
if (localStorage.getItem(connection.socketMessageEvent)) {
roomid = localStorage.getItem(connection.socketMessageEvent);
} else {
roomid = this.webCastId;
}
// this.joinScreen(roomid)
// this.cdr.markForCheck();
}
public streamended() {
this.connection.onstreamended = (event) => {
// console.log('event=====', event);
this.disableInputButtons(false);
let type = this.isRoomExists ? 'join' : 'share';
this.endScreeMsg = 'Thank you for using screen ' + type;
var mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
this.isRoomExists = false;
}
this.cdr.markForCheck();
};
}
public joinScreen(id: any = this.webCastId) {
if (this.webcastType.join) {
this.isExtensionInstalled = true;
this.connection.join(id);
}
}
public disableInputButtons(isTrue: boolean = true) {
if (this.shareStreamEle) {
this.shareStreamEle.nativeElement['disabled'] = isTrue;
}
}
public disableShareButtons(isTrue: boolean = true) {
if (this.shareScreenEle && this.isVideo) {
this.shareScreenEle.nativeElement['disabled'] = isTrue;
}
}
}
我可以共享屏幕，但没有音频。怎么了？
最好的问候！