使用webRTC开发一对多的音视频通信

最新推荐文章于 2024-03-30 14:09:01 发布

木木林_

最新推荐文章于 2024-03-30 14:09:01 发布

阅读量1.9k

点赞数 1

分类专栏：笔记文章标签： js webrtc

本文链接：https://blog.csdn.net/qq_44812835/article/details/108925814

版权

1、首先在使用webRTC是需要https的，但在开发时可以通过设置Chrome来进行开发

1)点桌面上的Chrome图票，右键->属性，把目票输入框中的内容换成以下内容

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir=本地目录

把字符串中的ip:port换成你自己的服务器的ip加端口，本地目录就是你自己本地一个文件夹

2)再重启chrome就可以了

在进行一对多通信时，首先了解一些一对一的音视频是如何通信的
要进行通信主要的就是媒体协商这个过程

媒体协商相关的方法：
createOffer、createAnswer、setLocalDescription、setRemoteDescription、
还有addTrack(track,stream);
还有一些事件：
onicecandidate、ontrack

这里offer、answer都是交换的sdp（一个信息格式的标准）、这里交换的sdp就是一些比如会话元、
网络描述、流描述、安全描述、服务质量等信息；信息的交换是通过信令服务器进行中转

2、如果只是实现一个端对端通信了解以下的过程就最够开发使用了、接下来看看整个端到端的流程

3、一对多的通信、我这里就选择比较简单的方式，就是使用多个一对一来实现

这里信令服务器使用node开发、使用socket.io （由于我项目是集成在了vue中使用的下面就先分享一下，原生的demo，demo中可能很多逻辑没有实现，因为主要是了解整个协商和通信的过程）

主要的思路：
以直播会议的场景举例，两个角色，一个是boss，一个是client，boss发起会议，然后监听otherjoined，每次有client加入就重新创建一个连接实例与之建立一对一的通信，当然每个boss和client都是一一对应的，这里用一个唯一client的socketId来进行标识

1、boss方代码如下：这里的“123” 就是代表的房间id 只是写死了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>boos</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>

<body>
    <video id="localvideo" autoplay playsinline></video>
    <div>
        <button id="connect">connect</button>
        <button id="leave">leave</button>
    </div>
</body>
<script>
    let localStream = null;
    let socket = null;
    let pBoos = null;
    let peerList = {
   };
    connect.onclick = function () {
   
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
   
            console.log("不支持navigator.mediaDevices")
            return;
        } else {
   
            let constraints = {
   
                video: true,
                audio: true
            }
            navigator.mediaDevices.getUserMedia(constraints)
                .then(getMediaStream)
                .catch(handlError);
        }
    };
    leave.onclick = function(){
   
        if (socket) {
   
            socket.emit('leave', {
    code: '123', name: "boss" });
        }
        closePreeConnection();
        closeLocalMedia();
        connect.disabled = false;
        leave.disabled = true;
    }
    function sendMessage(code, data,socketId) {
   
        if (socket) {
   
            socket.emit('message', data, code, "boss",socketId);
        }
    }
    function closePreeConnection() {
    //销毁连接
        console.log("closePreeConnection")
        if (peerList) {
    //全部清理掉
            for(id in peerList){
   
                peerList[id].close();
                peerList[id] = null;
            }
        }
    }
    function closeLocalMedia() {

最低0.47元/天解锁文章

木木林_

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用webRTC开发一对多的音视频通信

1、首先在使用webRTC是需要https的，但在开发时可以通过设置Chrome来进行开发1)点桌面上的Chrome图票，右键->属性，把目票输入框中的内容换成以下内容"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir=本地目录把字符串中的ip:port换成你自己的服务.
复制链接

扫一扫