Ionic 4 development - Blank screen in place of video

OpenVidu v2 Issues developing apps
1

I tried to mimic the ionic4 sample demo app. I don’t see any issues with the console log. But I am not able to see any video frame on the browser. I can see the video HTML element which has exactly the same property as a demo app.

Console log

'OpenVidu' initialized
OpenVidu.js:69 openvidu-browser version: 2.11.0
setting-up-modal.component.ts:119 initialize publisher
StreamManager.js:218 New video element associated to  Publisher
StreamManager.js:79 Your local 'Stream' with id [undefined] video is now playing
OpenVidu.js:68 'OpenVidu' initialized
OpenVidu.js:69 openvidu-browser version: 2.11.0
stream.component.ts:21 user UserModel {connectionId: "", nickname: "", streamManager: Publisher, type: "local", audioActive: true, …}
StreamManager.js:218 New video element associated to  Publisher {videos: Array(2), lazyLaunchVideoElementCreatedEvent: false, ee: EventEmitter, stream: Stream, remote: false, …}
openvidu.service.ts:47 {id: "onkar", createdAt: 1580492444665}
openvidu.service.ts:71 {id: "wss://demos.openvidu.io:4443?sessionId=onkar&token…=2.11.0&turnUsername=KI23JD&turnCredential=anicau", session: "onkar", role: "PUBLISHER", data: "", token: "wss://demos.openvidu.io:4443?sessionId=onkar&token…=2.11.0&turnUsername=KI23JD&turnCredential=anicau"}
Session.js:1037 TURN temp credentials [KI23JD:anicau]
Session.js:1046 openvidu-server version: 2.11.0
Connection.js:52 'Connection' created (local)
Stream.js:587 'Publisher' successfully published to session
Session.js:656 New signal: {"data":"{\"avatar\":\"https://randomuser.me/api/portraits/thumb/lego/4.jpg\"}","from":"4wc23ofjvc9chso0","type":"signal:userChanged"}
Session.js:471 Event 'signal:userChanged' triggered by 'Session' SignalEvent {hasBeenPrevented: false, cancelable: false, target: Session, type: "signal:userChanged", data: "{"avatar":"https://randomuser.me/api/portraits/thumb/lego/4.jpg"}", …}
2

Hello,

Could you tell us what platform (Android or iOS) are you using?

Have you run openvidu-call-ionic and do you have the same behaviour or everything is working fine?

Have you read and follow the openvidu-ionic tutorial?

Regards

3

Hello,

I am running it on google chrome with ionic serve. Not tested on real devices yet.
Here are my observations

Demo app -

  1. Pointing to https://demos.openvidu.io
    • Running fine with
  2. Pointing to my developement server running docker image
    • Only caller video is visible not able to view receiver video

Sample app that I am building

  1. Pointing to https://demos.openvidu.io
    • Not able to see caller and recevier both videos
    • But console logs looks good show caller and recevier video stream
  2. Pointing to my developement server
    • Not able to see caller and recevier both videos
    • But console logs looks good show caller and recevier video stream

Sample logs -

New signal: {"data":"{}","from":"gys9agz91auq7cbw","type":"signal:userChanged"}
Session.js:471 Event 'signal:userChanged' triggered by 'Session' SignalEvent {hasBeenPrevented: false, cancelable: false, target: Session, type: "signal:userChanged", data: "{}", …}
Session.js:191 Subscribed correctly to gys9agz91auq7cbw
stream.component.ts:21 user UserModel {connectionId: "gys9agz91auq7cbw", nickname: "OpenVidu_User8980", streamManager: Subscriber, type: "remote", audioActive: true, …}
StreamManager.js:218 New video element associated to  Subscriber {videos: Array(1), lazyLaunchVideoElementCreatedEvent: false, ee: EventEmitter, stream: Stream, remote: true, …}
Session.js:656 New signal: {"data":"{\"avatar\":\"https://randomuser.me/api/portraits/thumb/lego/0.jpg\"}","from":"jdt7nyfi6tr9dlzy","type":"signal:userChanged"}
Session.js:471 Event 'signal:userChanged' triggered by 'Session' SignalEvent {hasBeenPrevented: false, cancelable: false, target: Session, type: "signal:userChanged", data: "{"avatar":"https://randomuser.me/api/portraits/thumb/lego/0.jpg"}", …}
Session.js:656 New signal: {"data":"{\"avatar\":\"https://randomuser.me/api/portraits/thumb/lego/4.jpg\"}","from":"gys9agz91auq7cbw","type":"signal:userChanged"}
Session.js:471 Event 'signal:userChanged' triggered by 'Session' SignalEvent {hasBeenPrevented: false, cancelable: false, target: Session, type: "signal:userChanged", data: "{"avatar":"https://randomuser.me/api/portraits/thumb/lego/4.jpg"}", …}
StreamManager.js:88 Remote 'Stream' with id [gys9agz91auq7cbw_CAMERA_VOELO] video is now playing
StreamManager.js:101 Event 'streamPlaying' triggered by 'Subscriber' StreamManagerEvent {hasBeenPrevented: false, cancelable: false, target: Subscriber, type: "streamPlaying", value: undefined}
4

Any update on this issue?

5

Hello,
We’ll check it out launching our demo app inside of a docker container with OpenVidu Server.

Anyway, if openvidu-ionic works at first point and you are not able to connect your app to our server deployed on https://demos.openvidu.io, you should check it out your code.

Have you read and follow the openvidu-ionic tutorial?

Regards