jssip开启多人视频会议怎么获取视频流并显示在页面的video上？

Z时代
2024-02-23
分类：IT

使用jssip库搭建音视频对讲时，一对一的音视频通了，但是多人视频会议怎么获取视频流并显示在页面的video上？
我目前写的监听：

userAgent.on("newRTCSession", (e) => {
  let newsession = e.session
  newSession.on("confirmed", (e) => {
    const addTrack = (tracks, stream) => {
          console.log('tracks', tracks)
          console.log('stream', stream)
          for (let i = 0; i < tracks.length; i++) {
            stream.addTrack(tracks[i].track);
          }
        }
    if(newSession.connection.getSenders()){
          console.log('自己的流');
          const localVideoStream = new MediaStream();
          const localVideo = that.$refs.localVideo
          localVideo.srcObject = localVideoStream;
          addTrack(newSession.connection.getSenders(), localVideoStream);
          localVideo.play();
        }
        const remoteVideoStream = new MediaStream()
        const remoteVideo = that.$refs.remoteVideo
        remoteVideo.srcObject = remoteVideoStream
        addTrack(newSession.connection.getReceivers(), remoteVideoStream)
        remoteVideo.play()
  })});

我现在这样写，当多人进入的时候，别人的视频就都放在一个video标签里了，而且只显示一个，不会把多个人的视频显示出来，需要怎么写呢？有没有大佬知道的赐教赐教
所有代码都写在这了

回答：

解决了，直接上面的写法不变，修改一下freeswitch的配置：
1、在default.xml添加：

//123456是会议的房间号，目前是写死，后期需要配置为动态
<extension name="123456">
      <condition field="destination_number" expression="^(123456)$">
        <action application="sleep" data="500"/>
        <action application="conference" data="123456@video-mcu-stereo"/>
      </condition>    </extension>

jssip开启多人视频会议怎么获取视频流并显示在页面的video上？
2、在conference.conf.xml添加
<param name="video-mode" value="mux"/>

参考文档：https://blog.csdn.net/jia198810/article/details/118070169?ops...

回答：

参考一下这个：

<template>
  <div id="app">
    <div>注：需要freeswitch服务，拨打3000以上的号码就是会议号，多人的时候只显示对方的一个摄像头，不知道怎么让页面显示多个摄像头出来</div>
    <div class='indexPage'>
      <div v-if="!connected">
        <input v-model="inform.userName" placeholder="账号"></input>
        <button @click="register">连接</button>
      </div>
      <div v-else>
        <p>{{ inform.userName }} 在线，服务器已连接</p>
        <input v-model="inform.destName" placeholder="对方账号"></input>
        <button @click="startCall(1)">语音呼叫</button>
        <button @click="startCall(2)">视频呼叫</button>
        <button @click="answerCall">接听</button>
        <button @click="hangUp">挂断</button>
        <button @click="rejectCall">拒绝</button>
        <button @click="unregister">注销</button>
      </div>
      <video ref="localVideo" id="localVideo" autoplay playsinline muted></video>
      <div id="remoteVideos"></div>
    </div>
  </div>
</template>
<script>
import JsSIP from 'https://esm.sh/jssip';
export default {
  data() {
    return {
      inform: {
        userName: '1001',
        passWord: '1234',
        destName: ''
      },
      connected: false,
      incomingCall: null,
      userAgent: null,
      serverUrl: '192.168.18.113:5060',
      wsUrl: 'wss://192.168.18.113:7443',
      remoteStreams: [],
    };
  },
  methods: {
    register() {
      // ... 
    },
    handleNewRTCSession(newSession) {
      // ... 
      newSession.on("confirmed", (e) => {
        // ... 
        const remoteStream = new MediaStream();
        this.addTrack(newSession.connection.getReceivers(), remoteStream);
        const remoteVideoElement = document.createElement('video');
        remoteVideoElement.srcObject = remoteStream;
        remoteVideoElement.autoplay = true;
        remoteVideoElement.playsinline = true;
        this.remoteStreams.push(remoteVideoElement);
        document.getElementById('remoteVideos').appendChild(remoteVideoElement);
        remoteVideoElement.play();
      });
    },
    addTrack(receivers, stream) {
      receivers.forEach((receiver) => {
        stream.addTrack(receiver.track);
      });
    },
    startCall(type) {
      // ... 
    },
    hangUp() {
      // ... 
    },
    answerCall() {
      // ...
    },
    rejectCall() {
      // ... 
    },
    unregister() {
      // ... 
    },
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 60px;
}
#remoteVideos video {
  width: 30%; /* 可以根据需要调整视频大小 */
  margin: 5px;
}
</style>