Question

我正在使用Ionic3来构建一个Android视频聊天应用程序。视频聊天在浏览器的两个标签之间完美运行，但只在我的Android设备上显示本地视频（远程视频为空白）。

我在我的index.html中使用PeerJS进行点对点连接：

我正在使用stunServer {url：“stun：stun.l.google.com：19302”}进行连接。

我正在使用主页上显示的功能：http://peerjs.com/ 我的配置服务：

import {Injectable} from '@angular/core';

@Injectable()
export class WebRTCConfig {

peerServerPort: number = 9000;

key:string = '<my peer id>';

stun: string = 'stun.l.google.com:19302';

stunServer = {
    url: 'stun:' + this.stun
};

getPeerJSOption() {
    return {
        // Set API key for cloud server (you don't need this if you're running your own.
        key: this.key,

        // Set highest debug level (log everything!).
        debug: 3,
        // Set it to false because of:
        // > PeerJS:  ERROR Error: The cloud server currently does not support HTTPS. 
        // > Please run your own PeerServer to use HTTPS.
        secure: false,

        config: {
            iceServers: [
                this.stunServer/*,
                this.turnServer*/
            ]
        }
    };
}

/**********************/



 audio: boolean = true;
    video: boolean = false;

    getMediaStreamConstraints(): MediaStreamConstraints {
        return <MediaStreamConstraints> {
            audio: this.audio,
            video: this.video
        }
    }
}

我的同行WebRTC服务的片段：

createPeer(userId: string = '') {
    // Create the Peer object where we create and receive connections.
    this._peer = new Peer(/*userId,*/ this.config.getPeerJSOption());
    setTimeout(()=> {
        console.log(this._peer.id);
        this.myid = this._peer.id;
    }, 3000)
}

myCallId() {
    return this.myid;
}

answer(call) {
    call.answer(this._localStream);
    this._step2(call);
}

init(myEl: HTMLMediaElement, otherEl: HTMLMediaElement, onCalling: Function) {
    this.myEl = myEl;
    this.otherEl = otherEl;
    this.onCalling = onCalling;

    // Receiving a call
    this._peer.on('call', (call) => {
        // Answer the call automatically (instead of prompting user) for demo purposes
        this.answer(call);

    });
    this._peer.on('error', (err) => {
        console.log(err.message);
        // Return to step 2 if error occurs
        if (this.onCalling) {
            this.onCalling();
        }
        // this._step2();
    });

    this._step1();
}

call(otherUserId: string) {
    // Initiate a call!
    var call = this._peer.call(otherUserId, this._localStream);

    this._step2(call);
}

endCall() {
    this._existingCall.close();
    // this._step2();
    if (this.onCalling) {
        this.onCalling();
    }
}

private _step1() {
    // Get audio/video stream
    navigator.getUserMedia({ audio: true, video: true }, (stream) => {
        // Set your video displays
        this.myEl.src = URL.createObjectURL(stream);

        this._localStream = stream;
        // this._step2();
        if (this.onCalling) {
            this.onCalling();
        }
    }, (error) => { 
        console.log(error);
    });
}

private _step2(call) {
    // Hang up on an existing call if present
    if (this._existingCall) {
        this._existingCall.close();
    }

    // Wait for stream on the call, then set peer video display
    call.on('stream', (stream) => {
        this.otherEl.src = URL.createObjectURL(stream);
    });

    // UI stuff
    this._existingCall = call;
    // $('#their-id').text(call.peer);
    call.on('close', () => {
        // this._step2();
        if (this.onCalling) {
            this.onCalling();
        }
    });
}

在我的chat.ts中，我使用它从对等webrtc服务调用该函数：

call() {
this.webRTCService.call(this.calleeId);
}

Answer 1

这很可能是一个许可问题。您需要授予其使用相机的权限。

相机权限 - 您的应用程序必须请求使用权限设备相机。

<uses-permission android:name="android.permission.CAMERA" />

见

https://developer.android.com/guide/topics/media/camera.html

WebRTC与PeerJS远程视频无法在Android上显示

1 个答案: