WebRTC实时视频语音实现

webrtc介绍

WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。

 

实时语音demo

环境搭建

需要信令服务器与中继服务器作为中转

1.express,socket下载，搭node后端（express）（信令服务器）

 npm install express
 npm install socket.io
 npm i加载包
 node index.js启动

2.后端index.js编写

var express = require('express');
var app = express();
var http = require('http').createServer(app);
//var io = require('socket.io')(http);
const fs = require('fs');
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
})

现在能看到基础页面index.html

3.监听端口与websoket连接，见图3

http.listen(443, () => {
  console.log('https listen on');
});

io.on("connection", (socket) => {
  //连接加入子房间
  socket.join( socket.id );
  console.log("a user connected " + socket.id);
  
  socket.on("disconnect", () => {
      console.log("user disconnected: " + socket.id);
      //某个用户断开连接的时候，我们需要告诉所有还在线的用户这个信息
      socket.broadcast.emit('user disconnected', socket.id);
	  //交流，前后端通过emit发送信息
      //除自己外，对其他人广播：socket.broadcast.emit
      //自己和其他人广播：io.emit
  });
  socket.on('new user greet', (data) => {
      console.log(data);
      console.log(socket.id + ' greet ' + data.msg);
      socket.broadcast.emit('need connect', {sender: socket.id, msg : data.msg});
  });
  //在线用户回应新用户消息的转发
  socket.on('ok we connect', (data) => {
      io.to(data.receiver).emit('ok we connect', {sender : data.sender});
  });
  //sdp 消息的转发
  socket.on( 'sdp', ( data ) => {
      console.log('sdp');
      console.log(data.description);
      //console.log('sdp:  ' + data.sender + '   to:' + data.to);
      socket.to( data.to ).emit( 'sdp', {
          description: data.description,
          sender: data.sender
      } );
  } );
  //candidates 消息的转发
  socket.on( 'ice candidates', ( data ) => {
      console.log('ice candidates:  ');
      console.log(data);
      socket.to( data.to ).emit( 'ice candidates', {
          candidate: data.candidate,
          sender: data.sender
      } );
  } );
});

4.index.html代码

<h1 id="user-id">用户名称</h1>
    <ul id="user-list">
      <li>用户列表</li>
    </ul>
    <audio id="video-local" preload="auto" controls>
      <!-- <source src="https://192.168.3.56/a8485020-39a2-4c09-904b-2e2b87d71363" type="audio/mpeg" /> -->
    </audio>
    <audio id="audio">
      <!-- <source src="/public/imgs/wss.wav" type="audio/mpeg" /> -->
    </audio>
	<ul id="videos"></ul>
	 <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js
  "></script>
    <script src="//cdn.bootcdn.net/ajax/libs/socket.io/3.0.4/socket.io.js
  "></script>
    <script>
	 function getUserMedia(constrains, success, error) {
        let promise;
        if (navigator.mediaDevices.getUserMedia) {
          //最新标准API
          promise = navigator.mediaDevices
            .getUserMedia(constrains)
            .then(success)
            .catch(error);
        } else if (navigator.webkitGetUserMedia) {
          //webkit内核浏览器
          promise = navigator
            .webkitGetUserMedia(constrains)
            .then(success)
            .catch(error);
        } else if (navigator.mozGetUserMedia) {
          //Firefox浏览器
          promise = navagator
            .mozGetUserMedia(constrains)
            .then(success)
            .catch(error);
        } else if (navigator.getUserMedia) {
          //旧版API
          promise = navigator
            .getUserMedia(constrains)
            .then(success)
            .catch(error);
        }
        return promise;
      }
	function canGetUserMediaUse() {
        return !!(
          navigator.mediaDevices.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.msGetUserMedia
        );
      }
	  //中继服务器：最好自己搭，TURN中继服务器
	  const iceServer = {
        iceServers: [
          { urls: ["stun:ss-turn1.xirsys.com"] },
          {
            username:
              "CEqIDkX5f51sbm7-pXxJVXePoMk_WB7w2J5eu0Bd00YpiONHlLHrwSb7hRMDDrqGAAAAAF_OT9V0dWR1d2Vi",
            credential: "446118be-38a4-11eb-9ece-0242ac140004",
            urls: [
              "turn:ss-turn1.xirsys.com:80?transport=udp",
              "turn:ss-turn1.xirsys.com:3478?transport=udp",
            ],
          },
        ],
      };
	  let audio = document.getElementById("audio");
      var pc = [];
	  function StartCall(parterName, createOffer) {
        pc[parterName] = new RTCPeerConnection(iceServer);

        //如果已经有本地流，那么直接获取Tracks并调用addTrack添加到RTC对象中。
        if (localStream) {
          localStream.getTracks().forEach((track) => {
            pc[parterName].addTrack(track, localStream); //should trigger negotiationneeded event
          });
        } else {
          //否则需要重新启动摄像头并获取
          if (canGetUserMediaUse()) {
            getUserMedia(
              {
                video: true,
                audio: false,
              },
              function (stream) {
                localStream = stream;
                localVideoElm.srcObject = stream;
                $(localVideoElm).width(800);
              },
              function (error) {
                console.log(
                  "访问用户媒体设备失败：",
                  error.name,
                  error.message
                );
              }
            );
          } else {
            alert("您的浏览器不兼容");
          }
        }

        //如果是呼叫方,那么需要createOffer请求
        if (createOffer) {
          //每当WebRTC基础结构需要你重新启动会话协商过程时，都会调用此函数。它的工作是创建和发送一个请求，给被叫方，要求它与我们联系。
          pc[parterName].onnegotiationneeded = () => {
            //https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection/createOffer

            pc[parterName]
              .createOffer()
              .then((offer) => {
                return pc[parterName].setLocalDescription(offer);
              })
              .then(() => {
                //把发起者的描述信息通过Signal Server发送到接收者
                socket.emit("sdp", {
                  type: "video-offer",
                  description: pc[parterName].localDescription,
                  to: parterName,
                  sender: socket.id,
                });
              });
          };
        }

        //当需要你通过信令服务器将一个ICE候选发送给另一个对等端时，本地ICE层将会调用你的 icecandidate 事件处理程序。有关更多信息，请参阅Sending ICE candidates 以查看此示例的代码。
        pc[parterName].onicecandidate = ({ candidate }) => {
          socket.emit("ice candidates", {
            candidate: candidate,
            to: parterName,
            sender: socket.id,
          });
        };

        //当向连接中添加磁道时，track 事件的此处理程序由本地WebRTC层调用。例如，可以将传入媒体连接到元素以显示它。详见 Receiving new streams 。
        pc[parterName].ontrack = (ev) => {
          let str = ev.streams[0];

          if (document.getElementById(`${parterName}-video`)) {
            document.getElementById(`${parterName}-video`).srcObject = str;
          } else {
            let newVideo = document.createElement("audio");
            newVideo.id = `${parterName}-video`;
            newVideo.autoplay = true;
            newVideo.controls = true;
            //newVideo.className = 'remote-video';
            newVideo.srcObject = str;
            let li = document.createElement("li");
            li.id = `audio-${parterName}`;
            li.innerHTML = `<p>与${parterName}通话<p>`;
            li.appendChild(newVideo);
            let button = $('<button class="uncall" >结束通话</button>');
            button.appendTo(li);
            document.getElementById("videos").appendChild(li);
            $('#user-list li[user-id="' + parterName + '"] .call').css(
              "display",
              "none"
            );
          }
        };
      }
      var socket = io();
      let b = 0;
      socket.on("connect", () => {
        InitCamera(socket.id);
        //输出内容 其中 socket.id 是当前socket连接的唯一ID
        console.log("connect " + socket.id);
        $("form").submit(function (e) {
          //禁止页面重新加载
          e.preventDefault(); //prevents page reloading
          //发送事件，其值为文本框中输入的值

          socket.emit("chat message", $("#m").val());

          $("#messages").append(
            $("<li>")
              .text($("#m").val() + ":" + socket.id)
              .attr("class", "my")
          );
          //清空文本框的值
          $("#m").val("");
          //返回false 禁止原始的提交
          return false;
        });

        $("#user-id").text(socket.id);

        pc.push(socket.id);

        socket.emit("new user greet", {
          sender: socket.id,
          msg: "hello world",
        });
		       socket.on("need connect", (data) => {
          console.log("need!!!!!!!!!!!!!");

          console.log(data);
          //创建新的li并添加到用户列表中
          let li = $("<li></li>")
            .text(data.sender)
            .attr("user-id", data.sender);
          $("#user-list").append(li);
          //同时创建一个按钮
          let button = $('<button class="call" >通话</button>');
          button.appendTo(li);
          //监听按钮的点击事件, 这是个demo 需要添加很多东西，比如不能重复拨打已经连接的用户
          $(button).click(function () {
            //$(this).parent().attr('user-id')
            console.log($(this).parent().attr("user-id"));
            //点击时，开启对该用户的通话
            StartCall($(this).parent().attr("user-id"), true);
          });

          socket.emit("ok we connect", {
            receiver: data.sender,
            sender: socket.id,
          });
        });
        //某个用户失去连接时，我们需要获取到这个信息
        socket.on("user disconnected", (socket_id) => {
          console.log("disconnect : " + socket_id);
          $('#user-list li[user-id="' + socket_id + '"]').remove();
          $("#audio-" + socket_id).remove();
          $('#user-list li[user-id="' + socket_id + '"] .call').css(
            "display",
            "block"
          );
        });
        //链接吧..
        socket.on("ok we connect", (data) => {
          console.log(data);
          let li = $("<li></li>")
            .text(data.sender)
            .attr("user-id", data.sender);
          $("#user-list").append(li);
          let button = $('<button class="call">通话</button>');
          button.appendTo(li);
          //监听按钮的点击事件, 这是个demo 需要添加很多东西，比如不能重复拨打已经连接的用户
          $(button).click(function () {
            //$(this).parent().attr('user-id')
            console.log($(this).parent().attr("user-id"));
            //点击时，开启对该用户的通话
            StartCall($(this).parent().attr("user-id"), true);
          });
          //这里少了程序，比如之前的按钮啊，按钮的点击监听都没有。
        });

        //监听发送的sdp事件
        socket.on("sdp", (data) => {
          //如果时offer类型的sdp
          if (data.description.type === "offer") {
            //那么被呼叫者需要开启RTC的一套流程，同时不需要createOffer，所以第二个参数为false
            StartCall(data.sender, false);
            //把发送者(offer)的描述，存储在接收者的remoteDesc中。
            let desc = new RTCSessionDescription(data.description);
            //按1-13流程走的
            pc[data.sender].setRemoteDescription(desc).then(() => {
              pc[data.sender]
                .createAnswer()
                .then((answer) => {
                  return pc[data.sender].setLocalDescription(answer);
                })
                .then(() => {
                  socket.emit("sdp", {
                    type: "video-answer",
                    description: pc[data.sender].localDescription,
                    to: data.sender,
                    sender: socket.id,
                  });
                })
                .catch(); //catch error function empty
            });
          } else if (data.description.type === "answer") {
            //如果使应答类消息（那么接收到这个事件的是呼叫者）
            let desc = new RTCSessionDescription(data.description);
            pc[data.sender].setRemoteDescription(desc);
          }
        });

        //如果是ice candidates的协商信息
        socket.on("ice candidates", (data) => {
          console.log("ice candidate: " + data.candidate);
          //{ candidate: candidate, to: partnerName, sender: socketID }
          //如果ice candidate非空（当candidate为空时，那么本次协商流程到此结束了）
          if (data.candidate) {
            var candidate = new RTCIceCandidate(data.candidate);
            //讲对方发来的协商信息保存
            pc[data.sender].addIceCandidate(candidate).catch(); //catch err function empty
          }
        });
      });