Ionic-capacitor initial black video component

OpenVidu v2 Issues developing apps
1

I have some issues with openvidu browser 2.19.0. Everything works fine on the desktop (chrome), but when I connect with an IOS device the received video stream is added properly (you can see a black section), also the events are called correctly. The only problem is that you will never see the actual video (from the other party), sometimes is works, most of the time it doesn’t work.

I have downloaded and used the tutorial ionic-capacitor project to make sure its not a bug in my code, it happens there also.

The video starts displaying when I toggle between WIFI and 4G on the actual device or when I switch the front/ back camera on the remote device. The local stream is working fine, it is the remote stream that is not displaying correctly.

1 Like
2

Some more information:

I started the openvidu-capacitor tutorial on an iPhone, later I connected with an iPad. The iPhone shows the local and the remote stream while the iPad only shows the local stream, the remote streams pops up later when I toggle the wifi again, but at initial connection no stream is shown.

Logs from the iPad:

**[info] - OpenVidu initialized**

**⚡️ [info] - Platform detected: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko)**

**⚡️ [info] - openvidu-browser version: 2.19.0**

**⚡️ [log] - {"id":"con_TCfKlsMOXz","object":"connection","status":"pending","connectionId":"con_TCfKlsMOXz","sessionId":"SessionAdustin1884","createdAt":1629922157827,"type":"WEBRTC","record":true,"role":"PUBLISHER","kurentoOptions":null,"rtspUri":null,"adaptativeBitrate":null,"onlyPlayWithSubscribers":null,"networkCache":null,"serverData":"","token":"wss://demos.openvidu.io?sessionId=SessionAdustin1884&token=tok_Uf5LwTJlOe4&webrtcStatsInterval=30&sendBrowserLogs=debug_app","activeAt":null,"location":null,"platform":null,"clientData":null,"publishers":null,"subscribers":null}**

**⚡️ [debug] - Connecting websocket to URI: wss://demos.openvidu.io/openvidu?sessionId=**

**⚡️ [debug] - WebSocket connected to wss://demos.openvidu.io/openvidu?sessionId=**

**⚡️ [debug] - --------- ONCONNECTED -----------**

**⚡️ [debug] - Starting ping (if configured)**

**⚡️ [debug] - Sending request: {method:"joinRoom", params: {"token":"wss://demos.openvidu.io?sessionId=SessionAdustin1884&token=tok_Uf5N3Hy7LwTJlOe4&webrtcStatsInterval=30&sendBrowserLogs=debug_app","session":"SessionAdustin1884","platform":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko)","metadata":"{\"clientData\":\"Participant98\"}","secret":"","recorder":false}}**

**⚡️ [debug] - Response: {"id":"con_TCfKlsMOXz","finalUserId":"DF6B78014B361DA6","createdAt":1629922158288,"metadata":"{\"clientData\":\"Participant98\"}","value":[{"id":"con_Sak2Rht5R8","createdAt":1629922146908,"metadata":"{\"clientData\":\"Participant75\"}","streams":[{"id":"str_CAM_V7up_con_Sak2Rht5R8","createdAt":1629922147591,"hasAudio":true,"hasVideo":true,"videoActive":true,"audioActive":true,"typeOfVideo":"CAMERA","frameRate":30,"videoDimensions":"{\"width\":480,\"height\":640}","filter":{}}]}],"session":"SessionAdustin1884","version":"2.19.0","mediaServer":"kurento","record":true,"role":"PUBLISHER","coturnIp":"193.147.51.93","turnUsername":"Y3WNNT","turnCredential":"uczfx5","sessionId":"duvllf6oajvtk0pfkq857rtf74"}**

**⚡️ [log] - STUN/TURN server IP: 193.147.51.93**
**⚡️ [log] - TURN temp credentials [Y3WNNT:uczfx5]**
**⚡️ [info] - openvidu-server version: 2.19.0**
**⚡️ [info] - Configuring JSNLogs.**
**⚡️ [info] - JSNLog configured.**
**⚡️ [info] - 'Connection' created (local)**
**⚡️ [info] - Remote 'Connection' with 'connectionId' [con_Sak2Rht5R8] is now configured for receiving Streams with options: [object Object]**
**⚡️ [info] - 'Connection' created (remote) with 'connectionId' [con_Sak2Rht5R8]**
**⚡️ [info] - Event 'streamCreated' triggered by 'Session' [object Object]**
**⚡️ [info] - Subscribing to con_Sak2Rht5R8**
**⚡️ [debug] - 'Session.subscribe(Stream)' called**

**To Native Cordova -> iosrtcPlugin new_RTCPeerConnection iosrtcPlugin906166450 ["options": [95622, {**

**iceServers = (**

**{**

**credential = uc5;**

**url = "turn:193.147.51.93:3478";**

**urls = (**

**"turn:193.147.51.93:3478"**

**);**

**username = YNT;**

**}**

**);**

**}, <null>]]**

**2021-08-25 22:09:18.318589+0200 App[445:60579] iosrtcPlugin#new_RTCPeerConnection()**

**2021-08-25 22:09:18.318968+0200 App[445:60579] PluginRTCPeerConnection#init()**

**2021-08-25 22:09:18.319191+0200 App[445:60579] PluginRTCPeerConnectionConfig#init()**

**2021-08-25 22:09:18.319460+0200 App[445:60579] PluginRTCPeerConnectionConfig#init() | adding ICE server [url:'turn:193.147.51.93:3478', username:'Y3WNNT', password:'******']**

**2021-08-25 22:09:18.319697+0200 App[445:60579] PluginRTCPeerConnectionConstraints#init()**

**2021-08-25 22:09:18.319900+0200 App[445:60579] PluginRTCPeerConnectionConstraints#init() | [mandatoryConstraints:{**

**}, optionalConstraints:{**

**}]**

**2021-08-25 22:09:18.320071+0200 App[445:60579] PluginRTCPeerConnection#run()**

**2021-08-25 22:09:18.320205+0200 App[445:60579] PluginRTCPeerConnectionConfig#getConfiguration()**

**2021-08-25 22:09:18.320341+0200 App[445:60579] PluginRTCPeerConnectionConstraints#getConstraints()**

**⚡️ [error] - [createOffer] Method RTCPeerConnection.addTransceiver() is NOT available; using LEGACY offerToReceive{Audio,Video}**

**To Native Cordova -> iosrtcPlugin RTCPeerConnection_createOffer iosrtcPlugin906166451 ["options": [95622, {**

**offerToReceiveAudio = 1;**

**offerToReceiveVideo = 1;**

**}]]**

**⚡️ [debug] - RTCPeerConnection.createOffer() options: {"offerToReceiveAudio":true,"offerToReceiveVideo":true}**

**2021-08-25 22:09:18.324947+0200 App[445:60579] iosrtcPlugin#RTCPeerConnection_createOffer()**

**2021-08-25 22:09:18.325208+0200 App[445:61207] PluginRTCPeerConnection#createOffer()**

**⚡️ [log] - iOS platform**

**To Native Cordova -> iosrtcPlugin getUserMedia iosrtcPlugin906166452 ["options": [{**

**audio = {**

**};**

**video = {**

**frameRate = {**

**ideal = 30;**

**};**

**height = {**

**ideal = 480;**

**};**

**width = {**

**ideal = 640;**

**};**

**};**

**}]]**

**2021-08-25 22:09:18.325864+0200 App[445:60579] iosrtcPlugin#getUserMedia()**

**2021-08-25 22:09:18.325997+0200 App[445:60579] PluginGetUserMedia#call()**

**2021-08-25 22:09:18.326190+0200 App[445:60579] PluginGetUserMedia#call() | video authorization: authorized**

**2021-08-25 22:09:18.326333+0200 App[445:60579] PluginGetUserMedia#call() | audio authorization: authorized**

**2021-08-25 22:09:18.328035+0200 App[445:61207] PluginRTCPeerConnectionConstraints#init()**

**2021-08-25 22:09:18.328360+0200 App[445:61207] PluginRTCPeerConnectionConstraints#init() | [mandatoryConstraints:{**

**OfferToReceiveAudio = true;**

**OfferToReceiveVideo = true;**

**}, optionalConstraints:{**

**}]**

**2021-08-25 22:09:18.328507+0200 App[445:61207] PluginRTCPeerConnectionConstraints#getConstraints()**

**2021-08-25 22:09:18.329772+0200 App[445:61207] PluginRTCPeerConnectionConstraints#deinit()**

**2021-08-25 22:09:18.330347+0200 App[445:60902] PluginRTCPeerConnection#createOffer() | success callback**

**2021-08-25 22:09:18.330673+0200 App[445:60579] PluginGetUserMedia#call() | video requested**

**2021-08-25 22:09:18.331204+0200 App[445:60579] PluginGetUserMedia#call() | chosen video constraints: {**

**frameRate = {**

**ideal = 30;**

**};**

**height = {**

**ideal = 480;**

**};**

**width = {**

**ideal = 640;**

**};**

**}**

**2021-08-25 22:09:18.333407+0200 App[445:60579] PluginRTCVideoCaptureController#findDevice device:<AVCaptureFigVideoDevice: 0x106b42aa0 [Front Camera][com.apple.avfoundation.avcapturedevice.built-in_video:1]>**

**2021-08-25 22:09:18.333707+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:192, height:144, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334039+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:192, height:144, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334214+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:352, height:288, aspectRatio: 1.222222, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334335+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:352, height:288, aspectRatio: 1.222222, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334447+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:480, height:360, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334549+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:480, height:360, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334648+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334757+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334854+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.334951+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.335116+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:960, height:540, aspectRatio: 1.777778, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.335302+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:960, height:540, aspectRatio: 1.777778, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.335480+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1024, height:768, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.335745+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1024, height:768, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.335915+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.336038+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.336303+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.336425+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.336787+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.336971+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.337114+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1440, height:1080, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.337362+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1440, height:1080, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.337673+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1080, aspectRatio: 1.777778, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.338022+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1080, aspectRatio: 1.777778, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.338282+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1080, aspectRatio: 1.777778, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.338581+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1080, aspectRatio: 1.777778, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.338850+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1440, aspectRatio: 1.333333, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.338982+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1440, aspectRatio: 1.333333, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.339163+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1440, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.339400+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1440, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.339624+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:3088, height:2316, aspectRatio: 1.333333, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.340003+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice device format - width:3088, height:2316, aspectRatio: 1.333333, frameRateRanges:1.000000/30.000000**

**2021-08-25 22:09:18.340147+0200 App[445:60579] PluginRTCVideoCaptureController#findFormatForDevice selected format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:1.000000/60.000000**

**2021-08-25 22:09:18.340470+0200 App[445:60579] PluginRTCVideoCaptureController#findDevice deviceFrameRate:30**

**2021-08-25 22:09:18.341017+0200 App[445:60579] PluginRTCVideoCaptureController#startCapture Capture started, device:<AVCaptureFigVideoDevice: 0x106b42aa0 [Front Camera][com.apple.avfoundation.avcapturedevice.built-in_video:1]>, format:<AVCaptureDeviceFormat: 0x280c71460 'vide'/'420v' 640x 480, { 1- 60 fps}, HRSI:1624x1218, fov:53.957, binned, max zoom:76.12 (upscales @2.54), ISO:18.0-1728.0, SS:0.000020-1.000000, supports multicam>**

**2021-08-25 22:09:18.341260+0200 App[445:60579] PluginGetUserMedia#call() | audio requested**

**2021-08-25 22:09:18.341389+0200 App[445:60579] PluginGetUserMedia#call() | chosen audio constraints: {**

**}**

**2021-08-25 22:09:18.341654+0200 App[445:60579] PluginMediaStream#init()**

**2021-08-25 22:09:18.341890+0200 App[445:60579] PluginMediaStreamTrack#init()**

**2021-08-25 22:09:18.342180+0200 App[445:60579] PluginMediaStreamTrack#run() [kind:audio, id:D6C6BFEF-60C8-4FF2-A809-F7E67A730281]**

**2021-08-25 22:09:18.342310+0200 App[445:60579] PluginMediaStreamTrack#init()**

**2021-08-25 22:09:18.342559+0200 App[445:60579] PluginMediaStreamTrack#run() [kind:video, id:6FB06C08-77B1-4AA7-8E5D-9A6D94887874]**

**2021-08-25 22:09:18.342680+0200 App[445:60579] PluginMediaStream#run()**

**⚡️ [info] - New video element associated to [object Object]**

**To Native Cordova -> iosrtcPlugin RTCPeerConnection_setLocalDescription iosrtcPlugin906166453 ["options": [95622, {**

**sdp = "v=0**

**\no=- 6482939524763365501 2 IN IP4 127.0.0.1**

**\ns=-**

**\nt=0 0**

**\na=group:BUNDLE 0 1**

**\na=msid-semantic: WMS**

**\nm=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 102 0 8 106 105 13 110 112 113 126**

**\nc=IN IP4 0.0.0.0**

**\na=rtcp:9 IN IP4 0.0.0.0**

**\na=ice-ufrag:cg+A**

**\na=ice-pwd:yHKKPc0iEdmJlKLRPiy8Rp9s**

**\na=ice-options:trickle renomination**

**\na=fingerprint:sha-256 C5:AC:9C:31:56:78:EB:EF:7F:C7:98:7C:45:7D:BD:4A:9F:4B:54:9F:64:9C:FC:61:BF:73:72:45:6D:D6:BF:F2**

**\na=setup:actpass**

**\na=mid:0**

**\na=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level**

**\na=extmap:9 urn:ietf:params:rtp-hdrext:sdes:mid**

**\na=recvonly**

**\na=rtcp-mux**

**\na=rtpmap:111 opus/48000/2**

**\na=rtcp-fb:111 transport-cc**

**\na=fmtp:111 minptime=10;useinbandfec=1**

**\na=rtpmap:103 ISAC/16000**

**\na=rtpmap:104 ISAC/32000**

**\na=rtpmap:9 G722/8000**

**\na=rtpmap:102 ILBC/8000**

**\na=rtpmap:0 PCMU/8000**

**\na=rtpmap:8 PCMA/8000**

**\na=rtpmap:106 CN/32000**

**\na=rtpmap:105 CN/16000**

**\na=rtpmap:13 CN/8000**

**\na=rtpmap:110 telephone-event/48000**

**\na=rtpmap:112 telephone-event/32000**

**\na=rtpmap:113 telephone-event/16000**

**\na=rtpmap:126 telephone-event/8000**

**\nm=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 127 123 125 122 124**

**\nc=IN IP4 0.0.0.0**

**\na=rtcp:9 IN IP4 0.0.0.0**

**\na=ice-ufrag:cg+A**

**\na=ice-pwd:yHKKPc0iEdmJlKLRPiy8Rp9s**

**\na=ice-options:trickle renomination**

**\na=fingerprint:sha-256 C5:AC:9C:31:56:78:EB:EF:7F:C7:98:7C:45:7D:BD:4A:9F:4B:54:9F:64:9C:FC:61:BF:73:72:45:6D:D6:BF:F2**

**\na=setup:actpass**

**\na=mid:1**

**\na=extmap:2 urn:ietf:params:rtp-hdrext:toffset**

**\na=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time**

**\na=extmap:4 urn:3gpp:video-orientation**

**\na=extmap:5 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01**

**\na=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay**

**\na=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type**

**\na=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/video-timing**

**\na=extmap:9 urn:ietf:params:rtp-hdrext:sdes:mid**

**\na=recvonly**

**\na=rtcp-mux**

**\na=rtcp-rsize**

**\na=rtpmap:96 VP9/90000**

**\na=rtcp-fb:96 goog-remb**

**\na=rtcp-fb:96 transport-cc**

**\na=rtcp-fb:96 ccm fir**

**\na=rtcp-fb:96 nack**

**\na=rtcp-fb:96 nack pli**

**\na=rtpmap:97 rtx/90000**

**\na=fmtp:97 apt=96**

**\na=rtpmap:98 H264/90000**

**\na=rtcp-fb:98 goog-remb**

**\na=rtcp-fb:98 transport-cc**

**\na=rtcp-fb:98 ccm fir**

**\na=rtcp-fb:98 nack**

**\na=rtcp-fb:98 nack pli**

**\na=fmtp:98 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=640c1f**

**\na=rtpmap:99 rtx/90000**

**\na=fmtp:99 apt=98**

**\na=rtpmap:100 H264/90000**

**\na=rtcp-fb:100 goog-remb**

**\na=rtcp-fb:100 transport-cc**

**\na=rtcp-fb:100 ccm fir**

**\na=rtcp-fb:100 nack**

**\na=rtcp-fb:100 nack pli**

**\na=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f**

**\na=rtpmap:101 rtx/90000**

**\na=fmtp:101 apt=100**

**\na=rtpmap:127 VP8/90000**

**\na=rtcp-fb:127 goog-remb**

**\na=rtcp-fb:127 transport-cc**

**\na=rtcp-fb:127 ccm fir**

**\na=rtcp-fb:127 nack**

**\na=rtcp-fb:127 nack pli**

**\na=rtpmap:123 rtx/90000**

**\na=fmtp:123 apt=127**

**\na=rtpmap:125 red/90000**

**\na=rtpmap:122 rtx/90000**

**\na=fmtp:122 apt=125**

**\na=rtpmap:124 ulpfec/90000**

**\n";**

**type = offer;**

**}]]**
3

I would bet it is because of the user gestures. Try to publish the remote streams without audio to check if you have the same behavior.

The user gesture policies mention that a video with can’t be played without a user gesture

4

Thanks for your reaction @CSantosM. I can confirm that the remote stream is displaying correctly after I publish without audio. See my code below:

const publisher: Publisher = this.OV.initPublisher(undefined, {
            audioSource: false, // The source of audio. If undefined default microphone
            videoSource: undefined, // The source of video. If undefined default webcam
            publishAudio: false, // Whether you want to start publishing with your audio unmuted or not
            publishVideo: true, // Whether you want to start publishing with your video enabled or not
            resolution: '640x480', // The resolution of your video
            frameRate: 30, // The frame rate of your video
            insertMode: 'APPEND', // How the video is inserted in the target element 'video-container'
            mirror: true // Whether to mirror your local video or not
        });

What is a solution for this problem, because I want to stream of course with audio. The strange part is that the device that starts the sessions always receives the remote (and newly added) video stream correctly. The devices that joins later receives the stream as a black box. But that has something to do with the user gesture policies? So long story short, do you have a solution for this or a direction where I should be looking for?

5

Check it out our FAQs

https://docs.openvidu.io/en/2.19.0/troubleshooting/#11-my-safari-users-with-role-subscriber-are-not-able-to-receive-any-remote-video

https://docs.openvidu.io/en/2.19.0/troubleshooting/#12-videos-are-freezing-on-safari-for-ios

6

I did investigated a bit further, the troubles do not seem to disappear regarding to the autoplay functionalities. Both devices having camera/ microphone permissions and 1 device is streaming audio only (the subscriber) while the publisher is streaming audio and video. According to the docs “If a user access its camera or microphone, then there’s no need of user gestures at all (as soon as they accept camera permissions, remote videos will automatically start playing).”, so that is the case.

Also, when the subscriber changes his wifi to 4g or back the remote stream starts playing. The same happens when the publisher changes his front cam to the back or the other way around, with a result that the subscriber sees the video.

A side note is that it is not happening always, just sometimes. So it seems like a timing issue. I have also added all the autoplay/ muted capabilities and touch actions to play the video, but that is as described earlier not the problem.

— UPDATE —

It is also not working reliability in the OpenVidu-ionic-capacitor project. In this case I publish with audio and video:

 const publisher: Publisher = this.OV.initPublisher(undefined, {
            audioSource: undefined, // The source of audio. If undefined default microphone
            videoSource: undefined, // The source of video. If undefined default webcam
            publishAudio: true, // Whether you want to start publishing with your audio unmuted or not
            publishVideo: true, // Whether you want to start publishing with your video enabled or not
            resolution: '640x480', // The resolution of your video
            frameRate: 30, // The frame rate of your video
            insertMode: 'APPEND', // How the video is inserted in the target element 'video-container'
            mirror: true // Whether to mirror your local video or not
        });

Where I subscribe without audio:

this.session.on('streamCreated', (event: StreamEvent) => {
            // Subscribe to the Stream to receive it. Second parameter is undefined
            // so OpenVidu doesn't create an HTML video on its own
            const properties = {
                subscribeToAudio: false
            };

            const subscriber: Subscriber = this.session.subscribe(event.stream, undefined, properties);
            this.subscribers.push(subscriber);
        });

With above code the incoming video stream at the subscriber is black (most of the times). I have also added a button to the view and a video html element as described in the docs:

    <ion-fab vertical="bottom" horizontal="center" slot="fixed">
      <ion-fab-button size="small" color="danger" (click)="leaveSession()">
        <ion-icon name="power"></ion-icon>
      </ion-fab-button>

      <ion-fab-button size="small" color="danger" (click)="toggle()">
        <ion-icon name="camera"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </ion-content>

  <video id="hidden-video"></video>

</ion-app>

Where this is the toggle implementation:

toggle() {
        let audioPlayer = <HTMLVideoElement> document.getElementById("hidden-video");
        audioPlayer.play();
        this.refreshVideos();
    }

Even with the above code the stream is not appearing (just black), and also here, the stream appears when I toggle the wifi/ 4g. So can it be another issue?

7

@CSantosM Can you reproduce this to or am I doing something wrong? To be clear, it is working on the browser (chrome and safari on the mac), but not on the iOS app as described above. Also, can I force a reconnection right now from the code? Because switching from wifi to 4g or back seems to solve the issue, so I want to replicate that right now as a temporary fix.

8

You can force a reconnection using method Stream.reconnect().

9

@Dustin did you end up using the Stream.reconnect() ?
I am facing the same issues as you are.

On top of your issue, when I test between an iPhone and a chrome desktop browser, I am not getting the “streamCreated” event in the chrome browser which I know I was getting before upgrading from 2.15 → 2.19, are you getting this event?

Also, a JS error I see in the Safari Developer Inspector when debugging my iphone, is:

Uncaught (in promise): InvalidStateError: Media stream has no audio tracks createMediaStreamSource
Anything you’ve ran into?

I am experiencing a really unstable environment and it’s difficult to understand where the issues originate from. Openvidu, iosrtc, my own code…

10

Hi @richard_appsari, thanks for your message. Glad that I’m not the only one with those problems. I need to recheck if I get the streamCreated event on the subscriber side, I have tested so much that I don’t know for sure if I did get those (but I think I get these for 99%). And also yes, it happened after a update. The issue is for sure in 2.19, I tested it in 2.18 also and the issue is there too.

2.15 could be a stable working version, because I started experimenting with OpenVidu while that version was the newest, and I can’t remember that I had those strange black screen issues.

I did not get the error you mentioned (see the line below).

Uncaught (in promise): InvalidStateError: Media stream has no audio tracks createMediaStreamSource

I also can’t find where this is coming from, I have tested everything, and it also happens at the OpenVidu demo projects. I have even tested multiple versions of iosrtc with no difference. So I don’t know… :frowning:

This works for me as a really really dirty trick, I force reconnect multiple times (because I don’t know if the screen is black and when the connection is made) then the stream starts playing.

subscriber.on('streamPlaying', (e: StreamManagerEvent) => {
  (<HTMLElement>subscriber.videos[0].video).parentElement.classList.remove('custom-class');
  this.updateLayout();
  this.forceReconnect(event.stream)
});

forceReconnect(type, stream) {
   var _this = this;


        if (!this.didForceReconnect) {
            let count = 0;
            let maxCount = 2;
            this.didForceReconnect = true;
            var intervalId = window.setInterval(function () {
                console.log('reconnect');
                stream.reconnect();
                count++;

                if(count >= maxCount) {
                    clearInterval(intervalId);
                }
            }, 4000);
        }
    }
11

Thanks for the feedback @Dustin

I an going to downgrade to 2.15 today as I need to release asap. I’ll keep you posted on any findings when I make smaller upgrades.

12

@richard_appsari I will do the same, I’m hoping we could detect the issue.

13

Great.
I am now back down on 2.15.1-alpha2 (with a 2.15 server) and all is ok.
cordova-plugin-iosrtc is set to 6.0.20
I will be busy securing this release a couple of days.
After that, I am guessing it would be best if I upgrade to 2.16 and just do one version at a time.

14

Maybe we have a regression somewhere.

If you find in which version the issue appears please share with us so we can take a look.

15

I will try some things tomorrow regarding the versions. What I can mention already is that 2.15 is working as expected.

16

@micael.gallego I did some testing regarding to the versions 2.15 with Cordova-plugin-ios-rtc 6.0.20 and it doesn’t seem to work on an iPad Pro with IOS 15 as a subscriber, sometimes it is displaying the stream but most of the times it isn’t. It is working on my iPhone with IOS 15 and an iPad Air with IOS 12.5. I am using the OpenVidu server version 2.19 with a pro license.

@richard_appsari Do you have the same problems on an iPad Pro? I did not test on that device before so I wasn’t aware of the issue.

Im totally stuck at the moment, downgrading to 2.15 seems to get the iPad Pro subscriber stuck at the black screen (and I can’t force refresh because the function is not there yet). Upgrading to 2.19 with my little force refresh hack works on all devices BUT from version 2.16 or higher some devices don’t publish the stream (with no errors etc) so that is also not a option (Ipad with IOS 12.5.4 not publishing streams). @pabloFuente is there something I can do to solve this or is there a update form your side?

17

I have little time right now so my response is very short. There is a bug with iPad Pro and 2.15
I usually fix it by changing the openvidu.js manually but I think it is properly fixed in 2.16

Please see this thread: Error on media stream videotracks on IOS build still persists · Issue #529 · OpenVidu/openvidu · GitHub

18

@Dustin Hows it going for you? Did you fall back to the previous versions or did you manage to upgrade?

19

Hi, I’ve updated and commited (on master) the openvidu-ionic tutorials (capacitor and cordova). Now both of them is using the native WebRTC supporting in theirs respective webviews so iosrtc is not longer needed.
This will be released on the 2.23.0.

Thank you! :wink:
Regards!!