stephenlb / webrtc-sdk

WebRTC Simple Calling API + Mobile SDK - A simplified approach to RTCPeerConnection for mobile and web video calling apps.

Home Page:https://stephenlb.github.io/webrtc-sdk/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Double Friends Stream

pdxbenjamin opened this issue · comments

With no changes or fancy business. A Downloaded copy of the repo .zip displays two 'friend' video views?
I tried a Multicall.html and dial.html in the tutorials folder and they both have double / multiple friend video views when connected?
I'm not saying, it is not working, it's double working?! Is that how it is suppose to be? @stephenlb

I've tested with two browsers on my one pc, pc to mobile, pc to pc. All Google Chrome.

Hi! Yes this is working. These HTML files are tests for a self-to-self call. This shows the SDK is working successfully.

If you want to test two devices, use this URL: https://stephenlb.github.io/webrtc-sdk/

@stephenlb I've successfully tested two computers, many browsers and even mobile. Thank you for the link. I don't understand how to cancel the double video feed. Where in webrtc-v2.js can I look for better understand the v2.js inner workings.

This is a fresh download of the repo. Using the multicall.html as a starting point, I changed the pubnub keys to my own. I have not made any other changes to webrtc-v2.js or the .html file. I've shown in my screen shot in chrome dev tools the 'friends' stream shows twice.
This is locally of course on my pc, I use firebase if that matters but when it's live testing with another computer, or mobile or tablets every instance is doubled like this.
If that is how it is suppose to be for demonstration purpose, cool, but what could I do to not double the friends stream?

@stephenlb

Thank you.

https://imgur.com/a/D0CPDzu

I'm not sure why, again i'm not 100% on the inner workings of the webrtc-v2.js.

This simple change of adding more than the default, audio:true and video:true to the mediaconf has removed the double video.

v2.js

    const PHONE = window.PHONE = config => {
    const PHONE         = () => {};
    const pubnub        = socket(config);
    const pubkey        = config.publish_key;
    const subkey        = config.subscribe_key;
    const autocam       = config.autocam !== false;
    const sessionid     = uuid();
    const mediaconf     = config.media;
    // const mediaconf     = config.media || { audio : true, video : true };
    const conversations = {};
    let   myvideo       = document.createElement('video');
    let   snapper       = () => ' ';
    let   mystream      = null;
    let   myconnection  = false;

...

multicall.js

    let   session = null;
    const number  = Math.ceil(Math.random()*10);
    const phone   = PHONE({
      number        : number,
      media         : { video: { width:1280, height:720 } },
      autocam       : false,   
      publish_key   : 'pub-c-ed7ff8bb-737d-4732-8310-cc69dcd59',   
      subscribe_key : 'sub-c-c43d65b2-9f4d-11e8-84a1-bd3b0340'
    });

I was adding in Xirsys and doing a little bit of styling with css to make the mobile look a bit better. I wanted to add a bit of default sizing to the video feeds and added some constraints to the multicall.html media config and bamo, no more double friends feed. Weird eh. @stephenlb

https://imgur.com/a/cDrsLR4