muaz-khan / WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
https://www.webrtc-experiment.com/
MIT License
11.74k stars 3.95k forks source link

2 Connections #230

Open ghost opened 10 years ago

ghost commented 10 years ago

Hi!!! I'm using 2 connections in same page, its possible ? 1 connection is oneway another is many-to-many!

I'm using this code:

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://www.rtcmulticonnection.org/latest.js"></script>

<div id="tela"></div>
<div id="addparticipantes">
SEE PEOPLE
</div>

<div id="participantes1">
</div>

<script>
    var connection2 = new RTCMultiConnection().connect('radi');

connection2.session = {
    audio: true,
    video: true
};

    connection2.onstream = function(event) {
        $("#participantes1").append(event.mediaElement);
        $("#participantes1").append("<BR><BR>");
        event.mediaElement.removeAttribute("controls");
    };

    $("#addparticipantes").click(function() {
        connection2.open('radio-bariloche2');
        $("#participantes1").show();
    });
</script>

<script>
var connection = new RTCMultiConnection('radi2');
connection.session = {
    audio: true,
    video: true,
    oneway: true
};

connection.media.max(250,250);

connection.open();

connection.onstream = function(e) {
    $("#tela").append(e.mediaElement);
    e.mediaElement.removeAttribute("controls");
    e.mediaElement.className = "video";
};

</script>

where this error ?

muaz-khan commented 10 years ago

There are two similar demos:

  1. https://www.webrtc-experiment.com/RTCMultiConnection/multi-session-establishment.html
  2. https://www.webrtc-experiment.com/RTCMultiConnection/remote-stream-forwarding.html

In simple words, each RTCMultiConnection object MUST have unique channel-id:

<script src="//www.rtcmulticonnection.org/latest.js"></script>
<button id="openNewSessionButton">Open New Room</button>
<script>
var firstConnection = new RTCMultiConnection('first-channel');

// easiest way to customize what you need!
firstConnection.session = {
    audio: true,
    video: true
};

// on getting local or remote media stream
firstConnection.onstream = function (e) {
    document.body.appendChild(e.mediaElement);
};

// setup signaling channel
firstConnection.connect();

// open new session
document.querySelector('#openNewSessionButton').onclick = function () {
    firstConnection.open();
    secondConnection.open();
};

// ----------------------------------------------

var secondConnection = new RTCMultiConnection('second-channel');

// easiest way to customize what you need!
secondConnection.session = {
    screen: true,
    oneway: true
};

// on getting local or remote media stream
secondConnection.onstream = function (e) {
    document.body.appendChild(e.mediaElement);
};

// setup signaling channel
secondConnection.connect();
</script>

Instead of passing over constructor, channel-id can be set like this:

firstConnection.channel = 'first-channel';
secondConnection.channel = 'second-channel';