ably webrt c групповой вызов Не работает в Javascript и простой узел

Question

мы работаем над созданием простого веб-приложения группового вызова с использованием Ably и простого партнера. Следуя пошаговому руководству, вызов 1-к-1 работает (что также имеет проблемы при использовании на publi c ip, но это топи другого дня c)

Однако, когда тот же код имеет был изменен, чтобы работать для групповых вызовов, кажется, не работает. Члены перечислены, пользователь может присоединиться к группе (каналу), а консоль даже показывает, что сигнал был отправлен / получен. но аудио-видео поток не работает. ниже приведен фрагмент кода js (модифицированный из умелого примера)

var membersList = []
var connections = {}
var currentCall
var localStream
var CurrentGroup = ""
var constraints = { video: true, audio: true }
var apiKey = 'oZ_NdA.xyzabc' // a new app key for Group Call
    //var clientId = GetUserName() +'_'+ Math.random().toString(36).substr(2, 6) || 'client-' + Math.random().toString(36).substr(2, 16)
var clientId = GetUserName() || 'client-' + Math.random().toString(36).substr(2, 16)
let GroupMembers = null

let RealtimeApi = new Ably.Realtime({ key: apiKey, clientId: clientId })
var RealtimeChannel;


function JoinGroup(groupName) {

    if (CurrentGroup !== "") {
        LeaveCurrentGroup()
    }
    if (CurrentGroup == groupName) {
        // user is already in this group
        return
    }

    CurrentGroup = groupName

    InitializeRealtimeChannel()
    RealtimeChannel.presence.enter()

    StartLocalCamera()
        //RegisterSignalReceivingEvent()



    RealtimeChannel.presence.subscribe('enter', function(member) {

        RealtimeChannel.presence.get((err, members) => {
            GroupMembers = members

            RenderGroupMemberList(groupName, GroupMembers)
            GenerateGroupMembersVideoTags(GroupMembers)
        })

        if (member.clientId === clientId) {
            document.querySelector("#GroupStatus").innerHTML = "You have Joined the Group"

            InitiateConnectionsWithGroupMembers(groupName)

            RealtimeChannel.subscribe(`rtc-signal/${clientId}`, msg => {
                if (localStream === undefined) {
                    navigator.mediaDevices.getUserMedia(constraints)
                        .then(function(stream) {
                            /* use the stream */
                            localStream = stream
                            var video = document.getElementById('local')
                                //video.src = window.URL.createObjectURL(stream)
                            video.srcObject = stream
                            video.play()
                            connect(msg.data, stream)
                        })
                        .catch(function(err) {
                            alert('error occurred while trying to get stream')
                        })
                } else {
                    connect(msg.data, localStream)
                }
            })

        } else {
            document.querySelector("#GroupStatus").innerHTML = member.clientId + " has Joined"
        }


    })

    RealtimeChannel.presence.subscribe('leave', member => {

        if (member.clientId === clientId) {
            document.querySelector("#GroupStatus").innerHTML = "You have Left the Group"
            document.querySelector("#GroupMemberVideos").innerHTML = ""
            connections = []

        } else {
            document.querySelector("#GroupStatus").innerHTML = member.clientId + " has Left"
            ReleaseLeavingMemberResources(member.clientId)
        }

        RealtimeChannel.presence.get((err, members) => {
            GroupMembers = members
            RenderGroupMemberList(groupName, GroupMembers)
        })

    })
}

function LeaveCurrentGroup() {
    if (CurrentGroup !== "") {
        InitializeRealtimeChannel()

        RealtimeChannel.presence.leave()
        CurrentGroup = ""
    }
}

function GetAvailableMembersInGroup(groupName) {

    let Channel = RealtimeApi.channels.get(groupName)

    let GroupMembers = new Array()


    Channel.presence.get((err, members) => {
        GroupMembers = members

        RenderGroupMemberList(groupName, GroupMembers)

        // if (CurrentGroup == groupName) {
        //     GenerateGroupMembersVideoTags(members)
        // }

    })

}

function RenderGroupMemberList(groupName, memberNames) {

    let Element = document.querySelector("#" + groupName + " .people-list")
    let html = "<ul class='MemberList'>";

    if (!memberNames || memberNames.length < 1) {
        html += "<li style='font-weight: bold;'>No Member Yet..</li>"
    }

    if (memberNames) {


        for (var i = 0; i < memberNames.length; i++) {

            if (memberNames[i].clientId !== clientId) {
                html += "<li>" + memberNames[i].clientId + "</li>"
            } else {
                html += "<li style='font-weight: bold;'>" + memberNames[i].clientId + " (You)</li>"
            }


        }
    }


    html += "</ul>"

    Element.innerHTML = html;
}

function GenerateGroupMembersVideoTags(memberNames) {

    let VideoHtml = "";

    if (memberNames) {

        for (var i = 0; i < memberNames.length; i++) {

            if (memberNames[i].clientId === clientId || document.querySelector("#VideoContainer_" + memberNames[i].clientId) != null) {
                // do nothing 
            } else {

                let VideoTag = '<div class = "col-lg-3 col-sm-6 col-xs-12" id="VideoContainer_' + memberNames[i].clientId + '" >\n';
                VideoTag += '<video controls style = "width: 100%; height: 100%; min-height: 200px;" id="Video_' + memberNames[i].clientId + '" ></video> \n';
                VideoTag += '</div >';

                VideoHtml += VideoTag;
            }
        }
    }


    // document.querySelector("#GroupMemberVideos").innerHTML += VideoHtml;
    document.querySelector("#GroupMemberVideos").insertAdjacentHTML("beforeend", VideoHtml)

}

function ReleaseLeavingMemberResources(client_Id) {
    if (document.querySelector("#VideoContainer_" + client_Id)) {
        document.querySelector("#VideoContainer_" + client_Id).remove();
    }

    if (connections[client_Id]) {
        connections[client_Id] = null
        delete connections[client_Id]
    }
}


function InitiateConnectionsWithGroupMembers(groupName) {


    if (GroupMembers) {
        for (let index = 0; index < GroupMembers.length; index++) {
            if (GroupMembers[index].clientId != clientId && connections[GroupMembers[index].clientId] == null)
                initiateCall(GroupMembers[index].clientId)
        }
    }


}

function StartLocalCamera() {
    navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream) {
            /* use the stream */
            localStream = stream
            var video = document.getElementById('local')

            if (video.srcObject == null) {
                video.srcObject = stream
                video.play()
            }

            //video.src = window.URL.createObjectURL(stream)
        })
        .catch(function(err) {
            console.error(err)
            alert('Could not get video stream from source')
        })
}

function InitializeRealtimeChannel() {

    if (!RealtimeChannel) {
        RealtimeChannel = RealtimeApi.channels.get(CurrentGroup)
    }

}

function initiateCall(client_id) {

    console.info(`Initialting call with ${client_id}`)

    // Create a new connection
    currentCall = client_id
    if (!connections[client_id]) {
        connections[client_id] = new Connection(client_id, RealtimeChannel, true, localStream)
    }
}


function connect(data, stream) {
    if (!connections[data.user]) {
        connections[data.user] = new Connection(data.user, RealtimeChannel, false, stream)
    }
    if (!connections[data.user].isConnected) {
        connections[data.user].handleSignal(data.signal)
    }


}

function receiveStream(client_id, stream) {
    let video = document.getElementById('Video_' + client_id)
        //video.src = window.URL.createObjectURL(stream)
    video.srcObject = stream
    video.play()
}

и простой помощник для равноправных узлов, как показано ниже:

class Connection {
    constructor(remoteClient, AblyRealtime, initiator, stream) {
        console.log(`Opening connection to ${remoteClient}`)
        this._remoteClient = remoteClient
        this.isConnected = false
        this._p2pConnection = new SimplePeer({
            initiator: initiator,
            stream: stream
        })
        this._p2pConnection.on('signal', this._onSignal.bind(this))
        this._p2pConnection.on('error', this._onError.bind(this))
        this._p2pConnection.on('connect', this._onConnect.bind(this))
        this._p2pConnection.on('close', this._onClose.bind(this))
        this._p2pConnection.on('stream', this._onStream.bind(this))
    }
    handleSignal(signal) {
        this._p2pConnection.signal(signal)
    }
    send(msg) {
        this._p2pConnection.send(msg)
    }
    destroy() {
        this._p2pConnection.destroy()
    }
    _onSignal(signal) {
        InitializeRealtimeChannel()

        try {
            console.info("Sending Signal to :" + `${this._remoteClient}`)

            RealtimeChannel.publish(`rtc-signal/${this._remoteClient}`, {
                user: clientId,
                signal: signal
            })
        } catch (error) {
            console.error("Signal error: " + error)
        }
    }
    _onConnect() {
        this.isConnected = true
        console.log('connected to ' + this._remoteClient)
    }
    _onClose() {
        console.log(`connection to ${this._remoteClient} closed`)

    }
    _onStream(data) {
        console.info("Attempting to receive stream from " + this._remoteClient)
        receiveStream(this._remoteClient, data)
    }
    _onError(error) {
        console.log(`an error occurred ${error.toString()}`)
    }
}

HTML такой же, как под

<!--https://www.ably.io/tutorials/web-rtc-video-calling#testing-our-app-->

<!DOCTYPE html>
<html>

<head>
    <title>Group Calls</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

<body class="bodybg">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.2.1/adapter.min.js"></script>
    <script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.1.2/simplepeer.min.js"></script>
    <!-- <script src="js/simple-peer/simplepeer.min.js" type="javascript"></script> -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- <script src="js/simple-peer/index.js"></script> -->
    <script src="js/helper.js"></script>
    <script src="js/group-call.js"></script>
    <script src="js/ably-groupcall.js"></script>
    <!-- <script src="js/connection-helper.js"></script> -->
    <script src="js/group-connectionhelper.js"></script>







    <form action="groups.html" method="GET" id="DisplayNameForm">
        <div class="row" style="background-color:  rgba(136, 26, 32, 0.53);">

            <div class="col-sm-4">
                <div class="form-group">
                    <label style="color: #fff;">Display Name</label>
                    <input type="text" name="Name" class="form-control" />
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>&nbsp;</label>
                    <button type="submit" class="btn btn-primary btn-block">Update</button>
                </div>

            </div>

        </div>
    </form>

    <div class="conatainer-fluid" style="margin-top: 3em;">

        <div class="row">

            <!-- Group-1 -->

            <div class="col-sm-3 col-xs-6">
                <div class="panel panel-primary" id="Group_1">
                    <div class="panel-heading" id="Group_1_Heading">
                        Group-1
                    </div>
                    <div class="panel-body">
                        <h4>Members:</h4>
                        <div class="people-list"></div>
                    </div>
                    <div class="panel-footer">
                        <button onclick="JoinGroup('Group_1')" class="btn btn-info btn-block">Join</button>
                    </div>
                </div>
            </div>

            <!-- Group-2 -->

            <div class="col-sm-3 col-xs-6">
                <div class="panel panel-primary" id="Group_2">
                    <div class="panel-heading" id="Group_2_Heading">
                        Group-2
                    </div>
                    <div class="panel-body">
                        <h4>Members:</h4>
                        <div class="people-list"></div>
                    </div>
                    <div class="panel-footer">
                        <button onclick="JoinGroup('Group_2')" class="btn btn-info btn-block">Join</button>
                    </div>
                </div>
            </div>

            <!-- Group-3 -->

            <div class="col-sm-3 col-xs-6">
                <div class="panel panel-primary" id="Group_3">
                    <div class="panel-heading" id="Group_3_Heading">
                        Group-3
                    </div>
                    <div class="panel-body">
                        <h4>Members:</h4>
                        <div class="people-list"></div>
                    </div>
                    <div class="panel-footer">
                        <button onclick="JoinGroup('Group_3')" class="btn btn-info btn-block">Join</button>
                    </div>
                </div>
            </div>

            <!-- Group-4 -->

            <div class="col-sm-3 col-xs-6">
                <div class="panel panel-primary" id="Group_4">
                    <div class="panel-heading" id="Group_4_Heading">
                        Group-4
                    </div>
                    <div class="panel-body">
                        <h4>Members:</h4>
                        <div class="people-list"></div>
                    </div>
                    <div class="panel-footer">
                        <button onclick="JoinGroup('Group_4')" class="btn btn-info btn-block">Join</button>
                    </div>
                </div>
            </div>


        </div>


        <div class="row">
            <div class="col-sm-3 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <video id="local" muted style="z-index: 2; width: 100%; min-height: 200px;"></video>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-xs-6">
                                    <h3>Duration:</h3>
                                    <label id="minutes"></label> : <label id="seconds"></label>
                                </div>

                                <div class="col-xs-6">
                                    <button class="btn  btn-default" onclick="LeaveCurrentGroup()" title="Leave Group">
                                        <img src="asset/hang-up.svg" style="width: 50px; height: 50px; color: #fff;">
                                    </button>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <h3 id="CallStatus"></h3>
                            </div>

                            <div class="col-sm-12">
                                <h3 id="GroupStatus"></h3>
                            </div>

                        </div>

                    </div>
                </div>
                Icons made by <a href="https://www.flaticon.com/authors/dmitri13" title="dmitri13">dmitri13</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
            </div>


            <div class="col-sm-9 col-xs-12" style="margin-bottom: 50px;">

                <div id="call" style="position: relative;">
                    <div class="row" id="GroupMemberVideos">


                    </div>


                </div>

            </div>

        </div>


    </div>


</body>
<style>
    .MemberList {
        list-style: decimal;
    }
</style>

</html>

<script type="text/javascript">
    window.onload = function() {

        var Name = GetUrlParameter('Name');


        if (Name != null && Name != '') {
            document.getElementById('DisplayNameForm').style.display = 'none'
        }

        setTimeout(() => {
            UpdateGroupMemeberLists()
        }, 5000);

    }

    function UpdateGroupMemeberLists() {

        for (let index = 1; index <= 4; index++) {
            GetAvailableMembersInGroup("Group_" + index)
        }

    }
</script>

выполняя отладку по основам c, он показывает, что соединение установлено, но нет потока

любая помощь приветствуется, поскольку я полностью не зная, как работает webrt c.

Answer 1

Нашел проблему. :)

инициализировал поток локальной камеры внутри функции присоединения к группе. Проблема была решена путем инициализации локального видеопотока при загрузке документа.

надеюсь, это поможет другим.