RTCMulticonnection совместное использование экрана с аудио не работает - PullRequest
0 голосов
/ 29 мая 2018

Как добавить аудио для совместного использования экрана?

Я использую 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;
        }
    }
} 

Я могу поделиться экраном, но без звука.Что не так?

С наилучшими пожеланиями!

...