环信多人视频会议对接踩坑记录（一个窗口显示所有人的视频和多个窗口各显示一个人的视频）

*@TOC

需求

目前系统中已经有了一套基于环信云的视频会议系统，但最近用户提出了一个需求：希望可以选择将每视频都用一个窗口显示，因为这个项目已经开始验收了，现在做这个项目的就我一个人，只能让我一个后端上了

参考文档

基本的操作文档上都写有，就不多赘述了，直接看文档就行
环信视频会议接入文档

解决方案

基本操作

首先创建ConferenceUsers变量，保存所有发布了视频流的用户

    // 加入会议的用户
    var ConferenceUsers = {};

然后在初始化的时候定义emedia.mgr.onStreamAdded 函数， 每有一个用户发布了视频流就将这个用户加入到ConferenceUsers中

//有媒体流添加；比如 自己调用了publish方法（stream.located() === true时），或其他人调用了publish方法。
            emedia.mgr.onStreamAdded = function (member, stream) {
                console.log('用户加入:' + member.name);
                ConferenceUsers[member.name] = {
                    member: member,
                    stream: stream
                };
                mananyPersonMeetings.subVideo(member, stream, document.getElementById('video_' + member.name));
            };

同时定义emedia.mgr.onMemberExited 在有用户退出会议和有媒体流移除时删除用户，同时删除播放视频的节点

            emedia.mgr.onMemberExited = function (member) {
                // tool.alertSuccess("有人退出会议");
                delete ConferenceUsers[member.name];
                $("#" + member.name).remove();
            };

emedia.mgr.onStreamRemoved = function (member, stream) {
                $("#video_" + member.name).parent().remove();
                delete ConferenceUsers[member.name];
                // $("#" + member.name).parent().remove();
                mananyPersonMeetings.updateSize();
            };

此处为播放视频的方法
document.getElementById(“video-1”)为视频播放的节点，到时候根据需要自己定义

play: function (element, memberName) {//选择加入会议的人员，然后播放对应的视频
            var conferenceUser = ConferenceUsers[memberName];
            if (conferenceUser) {
                mananyPersonMeetings.subVideo(conferenceUser.member, conferenceUser.stream, document.getElementById("video-1"));
                
            } else {
                tool.alertWarning('操作失败', '用户已退出');
            }
        }

重点来了

playByName方法需要传入参与会议的某个人的name（memberName），然后在传入的element节点的播放对应的视频（不影响原窗口，原窗口中的视频会继续播放）

        playByName: function (element, memberName) {//选择加入会议的人员，然后播放对应的视频
            var conferenceUser = ConferenceUsers[memberName];
            if (conferenceUser) {
                mananyPersonMeetings.subVideo(conferenceUser.member, conferenceUser.stream, element);
                $('#receiver-nickname').html($(element).data('nickname'));
            } else {
                tool.alertWarning('操作失败', '用户已退出');
            }
        },

openwin方法会打开一个新窗口，并取到新窗口的window对象，然后在新窗口onload完毕后执行playByName，将视频在新窗口打开

  function openwin(confrId, name) {
        var window1 = window.open("${ctx}/s/auth/multi/player/video/play-full-screen?confrId=" + confrId , "_blank", "'width='+w+',height='+h+',top=0,left=0,status=yes'");
        window1.onload = function (ev) {
            mananyPersonMeetings.playByName(window1.document.getElementById('rtcRemoteVideo'), name);
        }
    }

踩过的坑

1. 不能通过打开新连接的方式打开，原因看2
2. 同一台电脑不能同时加入多个会话，如果同时加入会影响其他会话的音/视频流（使用不同的浏览器也不行）似乎在使用joinConference的时候就会抢占音/视频流，而不是在发布的时候（有待商酌，不是很确定）

在这许个愿，希望别再让我继续做前端的东西了