Top

Video didn't show on #minivideo or #largevideo

Follow
Jesús Giménez

Hello,

I'm triying to handle webRTC calls with and without video, but in video part I'm following guides and can't make video show in some 'container'.

I didn't understand the following methods:

WebRTC.answerInVideo(call)

WebRTC.showLocalVideo()

WebRTC.showRemoteVideo(call)

What we have to do after do the call to this methods?

How can I place input and output video in target tags?

I'm using HTML tags as says here: https://hub.openrainbow.com/#/documentation/doc/sdk/web/guides/Initiating_audio_and_video_calls, but anything happen when connection is established.

<video id="minivideo" autoplay muted></video>
<video id="largevideo" autoplay></video>
<video id="globalVideoTag" autoplay style="display:none;"></video>
<audio id="globalAudioTag" autoplay style="display:none;"></audio>

In testing client I can see video from my camera, but not in my app. Could anyone explain the mechanics of this methods, or if I missed something?

Thanks.

1

Comments

10 comments

Date Votes
  • Jesús Giménez
    • Edited

    Thanks for your answer, the problem still here and I'm following mentioned steps.

    I'm using Firefox and have this in HTML code:

    <videoid="minivideo"autoplaymuted></video>
    <videoid="largevideo"autoplay></video>
    <videoid="globalVideoTag"autoplaystyle="display:none;"></video>
    <audioid="globalAudioTag"autoplaystyle="display:none;"></audio>

    It shows only #largevideo, the app record webcam and send video correctly, but I can't see my own videocamera.

    When I receive the call event i do what you explain:

    rainbowSDK.webRTC.answerInVideo(this.call);

    and then

    rainbowSDK.webRTC.showLocalVideo(); (wich works)

    but this didn't:

    rainbowSDK.webRTC.showRemoteVideo(this.call);

    After this call console throws the following error:

    ERROR TypeError: "a is undefined"

      • attachDistantMediaStream rainbow-sdk.min.js:1
      • showRemoteVideo rainbow-sdk.min.js:1
      • responderLlamada llamadas.component.ts:107
      • View_LlamadasComponent_8 LlamadasComponent.html:74
    • handleEvent13Angular
    • handleEvent
    • callWithDebugContext
    • debugHandleEvent
    • dispatchEvent
    • renderEventHandlerClosure
    • decoratePreventDefault
    • invokeTask
    • onInvokeTask
    • invokeTask
    • runTask
    • invokeTask
    • invokeTask
    • globalZoneAwareCallback

    LlamadasComponent.html:74:20

      • View_LlamadasComponent_8 LlamadasComponent.html:74
    • logError12Angular

    ERROR CONTEXT

     
    Object { view: {…}, nodeIndex: 5, nodeDef: {…}, elDef: {…}, elView: {…} }

    LlamadasComponent.html:74:20

      • View_LlamadasComponent_8 LlamadasComponent.html:74
    • logError12Angular

    But connection is established, I can speak and watch the other side camera (other side can watch both)

    Can you tell me what may happen? I missed something?

    Thanks!!

     

    1
    Comment actions Permalink
  • Konrad Hyzy

    Hi again,

     

    did you try using different cameras? Firefox seems to have some issues with handling two streams from the same camera.

    Try to test your app on Chrome as well.

     

    Regards,

    Konrad Hyzy

    1
    Comment actions Permalink
  • Jesús Giménez
    • Edited

    Thanks for answer Konrad, before this message i was testing with same camera in both sides, but now I'm testing with two laptops and two cameras. I implemented control for media devices to test also in Google Chrome and problem still there.

    I can send video from my app and other side can watch my camera but I can't see my own camera in the app.

    The thing is I'm testing another app in AngularJS based in starter kits and it shows correctly video on both sides, I want now to upgrade this to Angular 7 and this is the last point to achieve.

    Logs before this:
    rainbowSDK.webRTC.showRemoteVideo(this.llamada);

    shows correct but when this line is executed it throw this error:

    LlamadasComponent.html:69 ERROR TypeError: Cannot read property 'remoteStreams' of undefined

    at Object.attachDistantMediaStream (rainbow-sdk.min.js:1)

    at Object.showRemoteVideo (rainbow-sdk.min.js:1)

    at LlamadasComponent.push../src/app/llamadas/llamadas.component.ts.LlamadasComponent.responderLlamada (llamadas.component.ts:107)

    at Object.eval [as handleEvent] (LlamadasComponent.html:69)

    at handleEvent (core.js:21673)

    at callWithDebugContext (core.js:22767)

    at Object.debugHandleEvent [as handleEvent] (core.js:22470)

    at dispatchEvent (core.js:19122)

    at core.js:19569

    at HTMLButtonElement.<anonymous> (platform-browser.js:993)


    Any idea what could happen? It has to be some error in code or incompatibility with angular 7 because I can see my own camera on another rainbow based apps (wich run in AngularJS), but I have aparently all correct, call object retrieved, HTML code and methods proposed in documentation.

     

    Thanks in advance.

    UPDATED:
    I make a minimal version of this scenario in Angular 7, only login and button to call, with same result, my own video didn't show on the minivideo tag.
    Also I get this logs:
    Using more than two STUN/TURN servers slows down discovery
    9ea1a742-a2c4-49b8-b184-03f119aa0ea9:208
    Using five or more STUN/TURN servers causes problems
    9ea1a742-a2c4-49b8-b184-03f119aa0ea9:208
    onaddstream is deprecated! Use peerConnection.ontrack instead.


    Any idea?
    Thanks!

    1
    Comment actions Permalink
  • Konrad Hyzy

    Hi Jesus,

     

    You can use answerInVideo() function only when the call has been initiated with rainbowSDK.webRTC.callInVideo(contact) method. 

     

    The basic use case would be: 

    1. UserA calls UserB with rainbowSDK.webRTC.callInVideo() method

    2. UserB receives an information about the incoming call

    3. UserB uses rainbowSDK.webRTC.answerInVideo() method

    4. Once the call connection is established, UserB uses showLocalVideo() and showRemoteVideo() functions

     

    Best Regards,

     

    Konrad Hyzy

    0
    Comment actions Permalink
  • Konrad Hyzy

    Hi,

    can you check in your debugger what is 'this.llamada' in the context of rainbowSDK.webRTC.showRemoteVideo(this.llamada) ?

     

    Thanks a lot,

    Konrad Hyzy

    0
    Comment actions Permalink
  • Jesús Giménez
    • Edited

    Hi,

     

    This is this.llamada object printed before the call rainbowSDK.webRTC.showRemoteVideo(this.llamada):

    avatars: Array []
     
    connectionId: null
     
    currentCalled: Object { contactPhoneNumber: "", contact: null, participantsPhoneNumbers: [], … }
    ​
    id: "web_7b8d9b50-74f7-4440-aa72-6355d7fdd98f"
    ​
    isConference: false
    ​
    isEscalated: false
    ​
    isInitiator: false
    ​
    isRemoteVideoMuted: false
    ​
    isSecondary: false
    ​
    isVm: false
    ​
    localMedia: 3
    ​
    mediaPillarCall: null
    ​
    participants: null
    ​
    relevant: true
    ​
    relevantEquipmentId: "unknown"
    ​
    remoteMedia: 3
     
    startDate: Date 2019-03-28T07:39:10.204Z
     
    status: Object { key: 5, value: "active" }
    ​
    subject: undefined
    ​
    type: Object { key: 1, value: "Video" }

    <prototype>:

     

    After it throws me the following error:

    ERROR TypeError: "a is undefined"

        attachDistantMediaStream rainbow-sdk.min.js:1
        showRemoteVideo rainbow-sdk.min.js:1
     
    When I make the videocall with
    rainbowSDK.webRTC.callInVideo(contacto);
    the typeerror didn't appear but my own camera still not showing. Also when I answer the call I can't see any image (caller can).
     
    Full console logs:
    Thu Mar 28 2019 08:46:39 | RBW-SDK | PresenceSvr| [onChange ] :: Presence changed for contact (3253852f537a4bb786c94ab5bc1bb18f@sandbox-all-in-one-rbx-prod-1.rainbow.sbg/web_win_1.53.6_rWwOziac) to dnd | video angular.js:13708:17
    Thu Mar 28 2019 08:46:41 | RBW-SDK | PresenceSvr| [onChange ] :: Rich Presence changed for contact (3253852f537a4bb786c94ab5bc1bb18f@sandbox-all-in-one-rbx-prod-1.rainbow.sbg) to status busy, message video and telStatus '' angular.js:13708:17
    Thu Mar 28 2019 08:46:41 | RBW-SDK | ContactsSrv| [onChange ] :: Information changed for contact ff05f5d4fdae11081c27f1417c0d9c4f angular.js:13708:17
    llamadas.component.ts:126:6
    Thu Mar 28 2019 08:46:42 | RBW-SDK | webRTCSrv | [onRTCChange] :: WebRTC state changed to (type:Video, id:web_f6803e8d-b795-4092-8f5d-bc2c6a507008, status:answering) angular.js:13708:17
    llamadas.component.ts:61:4
    llamadas.component.ts:130:6
    llamadas.component.ts:133:6
    llamadas.component.ts:134:6
     
    ERROR TypeError: "a is undefined"
        attachDistantMediaStream rainbow-sdk.min.js:1
        showRemoteVideo rainbow-sdk.min.js:1
        responderLlamada llamadas.component.ts:135
        View_LlamadasComponent_9 LlamadasComponent.html:70
        Angular 13
    LlamadasComponent.html:70:20
     
    ERROR CONTEXT
    LlamadasComponent.html:70:20
    Error de lectura XML: mal formado Ubicación: Número de línea 1, columna 79:
     
    Thu Mar 28 2019 08:46:42 | RBW-SDK | PresenceSvr| [onChange ] :: Presence changed for me (21a9f1677b804bd8924200bb06928223@sandbox-all-in-one-rbx-prod-1.rainbow.sbg/web_sdk_1.52.8_Gbl33SBx) to dnd | video angular.js:13708:17
    Thu Mar 28 2019 08:46:42 | RBW-SDK | PresenceSvr| [onChange ] :: Rich Presence changed for myself to status busy, message video and telStatus '' angular.js:13708:17
    Thu Mar 28 2019 08:46:42 | RBW-SDK | ContactsSrv| [onChange ] :: Information changed for me (2c41d4dba2e8958fa2b13805ef4de87f)
     
    Thanks in advance,
    Regards.

     

    0
    Comment actions Permalink
  • Jesús Giménez

    Hi, my problem was solved partially calling method's after the call is in 'active' state. But now, I have compatibility problem with webRTC between Chrome and Firefox. When call firefox to firefox or chrome to chrome there aren't any problem, but when the scenario is Chrome - Firefox i can't show my own camera from Chrome, sandbox rainbow web environment throw this error:

    'No media is available. Please check your camera / microphone availability'.

    And this console logs:

    Thu Apr 04 2019 13:53:02 | RTCWEB | MEDIA | getUserMedia failure: NotReadableError: Failed to allocate videosource rainbow.min.js:1250:78461
    Thu Apr 04 2019 13:53:02 | RTCWEB | MEDIA | answerJingleCall failure for : (type:Video, id:web_40a8a9ff-0f23-4b66-927b-e8ed8ff6be06, status:answering) failure : getUserMedia failure NotReadableError: Failed to allocate videosource rainbow.min.js:1250:78461
    Thu Apr 04 2019 13:53:02 | RTCWEB | MEDIA | releaseCall : (type:Video, id:web_40a8a9ff-0f23-4b66-927b-e8ed8ff6be06, status:answering) rainbow.min.js:1250:78461
    Thu Apr 04 2019 13:53:02 | RTCWEB | MEDIA | disableAudioVideoMedia for session {"sid":"web_40a8a9ff-0f23-4b66-927b-e8ed8ff6be06"}

    I thought could be only Angular +2 problem but testing starter kit with angular JS happen the same.

    Any idea why Chrome block camera when connectign to firefox? I tested it with more than 1 laptop and still the same.

     

    Thanks in advance,

    Regards.

    0
    Comment actions Permalink
  • Konrad Hyzy

    Hi,

    did you manage to solve this problem with the newest version of our SDK for Web? 

    Otherwise, try to use two different cameras when testing on one PC, sometimes the issue comes from the hardware drivers.

     

    Best Regards,

    Konrad Hyzy

    0
    Comment actions Permalink
  • Jesús Giménez

    This scenario still launching same error, but in final product we don't need to use Rainbow web client so I just skipped this step.I tried to upgrade SDK but throw me lot of errors when replace JS SDK files, i don't know if was make by the proper way or I missed something.

    Anyway, all others escenarios going good.


    Thanks for your answers.

    0
    Comment actions Permalink
  • Konrad Hyzy

    Hi Jesus,

     

    to make the newest version of Rainbow Web SDK work properly, you need to use AngularJS version 1.7.5:

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

    Best Regards,

    Konrad Hyzy

    0
    Comment actions Permalink

Please sign in to leave a comment.

Didn't find what you were looking for?

New post

Still can't find what you need?

  • Contact Us

    Do you have any question about Rainbow? Leave us a message to get more information.

    Contact

  • Ask the Community

    Do you need help? Ask your questions to the Community and get answers from other Rainbow users.

    Post message