基于PeerJS的点对点实时视频程序

最新推荐文章于 2024-05-08 09:30:27 发布
最新推荐文章于 2024-05-08 09:30:27 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： js 无聊 文章标签： 音视频 javascript 前端 WebRTC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43548154/article/details/124612133
版权
无聊 同时被 2 个专栏收录
8 篇文章 2 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

建议先过一遍之前的这篇文章，很多基础的api本文将不再介绍。

本文涉及到的新api为peer.call()

// 发送端
var call = peer.call('dest-peer-id',mediaStream);

 //接收端
peer.on('call', function(call) {
	// Answer the call, providing our mediaStream
	call.answer(mediaStream);
});
  
call.on('stream', function (stream) {
   console.log('received remote stream');
   remoteVideo.srcObject = stream;                            
});

其中mediaStream可以通过以下代码获得：

var localStream  = null;
const constraints = {
   audio: true,
   video: { width: 320, deviceId: videoSource ? { exact: videoSource } : undefined }
};
navigator.mediaDevices
    .getUserMedia(constraints)
    .then(getStream)
    .catch(handleError);
//获取流
function getStream(stream) {
    console.log('received local stream');
    localStream = stream;
    //localVideo.srcObject = localStream; //显示到页面中的video标签
    // console.log(`localStream${stream}`)
}
//获取设备错误
function handleError(error) {
    console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}

由于代码我昨天晚上写的，由于各种琐事导致我上午没有写此文档，现在已经下午4点了。我不记得昨天写下列代码具体的逻辑了，功能是完整的。
因此，我就直接把代码列出来，代码是可以直接运行的（需要引入的js和css文件再我github仓库中有，链接放在文末）。

效果截图

在这里插入图片描述

代码：videoself.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频聊天</title>
  <link rel="stylesheet" type="text/css" href="css/common.css" />
  <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
  <!-- <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script> -->
  <script src="./js/peerjs.min.js"></script>
  <script src="./js/jquery-1.12.4.js"></script>
  <script src="./js/jquery-ui.js"></script>
  <script>
    var peer = null; 
    var startId = null; 
    var receiveId = null;
    var conn = null;
    var localStream = null;
    
 
    //获取url后面的参数
    getRequest = function() { 
        var url = location.search; 
        var theRequest = new Object(); 
        if (url.indexOf("?") != -1) { 
            let str = url.substr(1); 
            let strs = str.split("&"); 
            for(let i = 0; i < strs.length; i++) { 
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
            } 
        } 
        return theRequest; 
    }

    //绑定摄像头列表到下拉框
    function getDevices(deviceInfos) {
        if (deviceInfos===undefined){
            return
        }
        console.log(`设备信息${deviceInfos}`)
        for (let i = 0; i !== deviceInfos.length; ++i) {
          // console.log(deviceInfos[i])
          const deviceInfo = deviceInfos[i];
          const option = document.createElement('option');
          option.value = deviceInfo.deviceId;
          if (deviceInfo.kind === 'videoinput') {
              option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
              console.log(option)
              videoSelect.appendChild(option);
          }
        }
    }

    //获取设备错误
    function handleError(error) {
        console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    }

    //获取流
    function getStream(stream) {
        console.log('received local stream');
        localStream = stream;
        localVideo.srcObject = localStream; //显示到页面
        // console.log(`localStream${stream}`)
    }

    //开启本地摄像头
    function start() {
        if (localStream) { //停止
            localStream.getTracks().forEach(track => {
                track.stop();
            });
        }
        const videoSource = videoSelect.value;
        const constraints = {
            audio: true,
            video: { width: 6020, deviceId: videoSource ? { exact: videoSource } : undefined }
        };
        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(getStream)
            .then(getDevices)
            .catch(handleError);
    }
    
    //封装发送消息
    function sendMessage(from, to, action) {
        var message = { "from": from, "to": to, "action": action };
        if (!conn) {
            conn = peer.connect(receiveId);
            conn.on('open', () => {
                conn.send(JSON.stringify(message));
                console.log("发消息",message);
            });
        }
        if (conn.open){
            conn.send(JSON.stringify(message));
            console.log(message);
        }
    }
    
    //当此端改变摄像头 请求那边重新call一次 不然画面传不过去
    function pleaseCallMe(){
      sendMessage(startId, receiveId, "pleaseCallMe");
    }


    //页面加载后 
    window.onload = function () {
      var videoSelect = document.querySelector("select#videoSelect")
      var localVideo = document.querySelector("video#localVideo");
      var remoteVideo = document.querySelector("video#remoteVideo");
      var lblFrom = document.querySelector("label#lblFrom");
      var tip = document.querySelector("#tip");
      if (!navigator.mediaDevices ||
          !navigator.mediaDevices.getUserMedia) {
          console.log('webrtc is not supported!');
          alert("webrtc is not supported!");
          return;
      }

      //获取摄像头列表
      navigator.mediaDevices
        .enumerateDevices()
        .then(getDevices)
        .catch(handleError);

      //改变摄像头重新获取流
      videoSelect.onchange = function(){
        start();
        pleaseCallMe(); //让那边重新call 就能同步画面
      }; 
      start(); //默认直接获取流

      $("#dialog-confirm").hide(); //隐藏接收提示框


      //每次使用同一个startId
      if(localStorage.getItem("startId")==null){
        startId = new Date().getTime();
        localStorage.setItem("startId",startId)
      }else{
        startId = localStorage.getItem("startId")
      }

      peer = new Peer(startId);
      console.log(peer)

      peer.on('open', function(id) {
        startId = id;
        console.log('My peer ID is: ' + id);
        console.log(`接收端链接${location.href.replace("self","target")}?startId=${startId}`)
        document.getElementById("receivedUrl").innerHTML = `<a target="_blank" href="${location.href.replace("self","target")}?startId=${startId}">${location.href.replace("self","target")}?startId=${startId}</a>` 
      });

      peer.on('call', function (call) {
        console.log("oncall")
        call.answer(localStream);
      });

      peer.on('connection', function(conn) {
        console.log("被连接",conn);
        receiveId = conn.peer;
        conn.on('data', (data) => {
            var msg = JSON.parse(data);
            console.log("收到消息",msg);
            //收到视频邀请时，弹出询问对话框
            if (msg.action === "call") {
                console.log("call")
                tip.innerHTML = "被别人call"
                lblFrom.innerText = msg.from;
                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: "auto",
                    width: 400,
                    modal: true,
                    buttons: {
                        "Accept": function () {
                            $(this).dialog("close");
                            sendMessage(msg.to, msg.from, "accept");
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            }

            //接受视频通话邀请后，通知另一端    
            if (msg.action === "accept-ok") {
                console.log("accept-ok call => " + JSON.stringify(msg));
                var call = peer.call(receiveId, localStream);
                call.on('stream', function (stream) {
                    console.log('received remote stream');
                    remoteVideo.srcObject = stream;                            
                });
                tip.innerHTML = "已连接"
            }
        });
      });

    }
  </script>
</head>
<body>
  <div class="container" style="text-align: center;">
    <h1>基于PeerJS的点对点视频聊天程序</h1>
    <p>
      <span style="font-weight: 700;">切换设备</span>
      <select id="videoSelect" style="width:100px"></select>
    </p>
    <p>
      把下方链接发送给你对象即可开始视频啦<br />
      <span>对象链接：</span><span id="receivedUrl">生成中...</span>
    </p>
    <div style="display: flex;flex-flow: wrap;justify-content: center;">
      <div style="border: 5px solid #ccc;">
        <h4>你的画面</h4>
        <video id="localVideo" autoplay controls></video>
      </div>
      <div style="border: 5px solid #ccc;">
        <h4>对象画面</h4>
        <video id="remoteVideo" autoplay controls></video>
      </div>
    </div>
    
    <div id="dialog-confirm" title="接受视频通话吗?">
        <p>
          <span class="ui-icon ui-icon-info" style="float:left; margin:12px 12px 20px 0;"></span><label id="lblFrom"></label>
          打你，是否接受？
        </p>
    </div>
    <div id="tip">
      等待分享链接给对象...
    </div>
  </div>
</body>

</html>

代码：videotarget.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频聊天</title>
  <link rel="stylesheet" type="text/css" href="css/common.css" />
  <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
  <!-- <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script> -->
  <script src="./js/peerjs.min.js"></script>
  <script src="./js/jquery-1.12.4.js"></script>
  <script>
    var peer = null; 
    var startId = null; 
    var receiveId = null;
    var conn = null;
    var localStream = null;
    

    //获取url后面的参数
    getRequest = function() { 
        var url = location.search; 
        var theRequest = new Object(); 
        if (url.indexOf("?") != -1) { 
            let str = url.substr(1); 
            let strs = str.split("&"); 
            for(let i = 0; i < strs.length; i++) { 
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
            } 
        } 
        return theRequest; 
    }

    //绑定摄像头列表到下拉框
    function getDevices(deviceInfos) {
        if (deviceInfos===undefined){
            return
        }
        console.log(`设备信息${deviceInfos}`)
        for (let i = 0; i !== deviceInfos.length; ++i) {
          // console.log(deviceInfos[i])
          const deviceInfo = deviceInfos[i];
          const option = document.createElement('option');
          option.value = deviceInfo.deviceId;
          if (deviceInfo.kind === 'videoinput') {
              option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
              console.log(option)
              videoSelect.appendChild(option);
          }
        }
    }

    //获取设备错误
    function handleError(error) {
        console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    }

    //获取流
    function getStream(stream) {
        console.log('received local stream');
        localStream = stream;
        localVideo.srcObject = localStream; //显示到页面
        // console.log(`localStream${stream}`)
    }

    //开启本地摄像头
    function start() {
        if (localStream) { //停止
            localStream.getTracks().forEach(track => {
                track.stop();
            });
        }
        const videoSource = videoSelect.value;
        const constraints = {
            audio: true,
            video: { width: 320, deviceId: videoSource ? { exact: videoSource } : undefined }
        };
        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(getStream)
            .then(getDevices)
            .catch(handleError);
        if(conn){
            sendMessage(receiveId, start, "accept-ok");
        }
    }

    //封装发送消息
    function sendMessage(from, to, action) {
        var message = { "from": from, "to": to, "action": action };
        if (!conn) {
            conn = peer.connect(hashCode(to));
            conn.on('open', () => {
                conn.send(JSON.stringify(message));
                console.log(message);
            });
        }
        if (conn.open){
            conn.send(JSON.stringify(message));
            console.log(message);
        }
    }

    //页面加载后 
    window.onload = function () {
      var videoSelect = document.querySelector("select#videoSelect")
      var localVideo = document.querySelector("video#localVideo");
      var remoteVideo = document.querySelector("video#remoteVideo");
      var tip = document.querySelector("#tip");
      if (!navigator.mediaDevices ||
          !navigator.mediaDevices.getUserMedia) {
          console.log('webrtc is not supported!');
          alert("webrtc is not supported!");
          return;
      }

      //获取摄像头列表
      navigator.mediaDevices
        .enumerateDevices()
        .then(getDevices)
        .catch(handleError);

      //改变摄像头重新获取流 从新call一遍
      videoSelect.onchange = function(){
          start();
          sendMessage(receiveId,startId,"call");
      }
      start(); //默认直接获取流

      $("#dialog-confirm").hide(); //隐藏接收提示框


      //获取参数 获取发起对话者的id 用户建立连接
      param = getRequest();
      startId = param.startId;

      if(!localStorage.getItem("receiveId")){
        receiveId = new Date().getTime();
        localStorage.setItem("receiveId",receiveId)
      }else{
        receiveId = localStorage.getItem("receiveId")
      }
      peer = new Peer(receiveId); //第一个参数为id 第二个参数为选项 ('',{"debug":3})
      console.log(peer)
      peer.on('open', function(id) {
        receiveId = id;
        console.log('My peer ID is: ' + id);
        //这里先向start建立连接，让start知道这个端的id（reveivedId）
        conn = peer.connect(startId);
        conn.on('open', () => {
              //直接发送消息
              console.log("发送消息")
              sendMessage(receiveId,startId,"call")
              tip.innerHTML = "等待接听..."
        });
      });
      
      peer.on('connection', function(conn) {
        console.log("被连接",conn);
        conn.on('data', (data) => {
            console.log("收到消息",data);
        });
      });

      peer.on('call', function (call) {
        console.log("oncall")
        call.answer(localStream);
      });

  
      peer.on('connection', function(conn) {
        console.log("被连接",conn);
        receiveId = conn.peer;
        conn.on('data', (data) => {
            var msg = JSON.parse(data);
            console.log("收到消息",msg);
            
            //画面卡住了 重新call
            if(msg.action === "pleaseCallMe"){
                sendMessage(receiveId,startId,"call")
            }

            //接受视频通话邀请
            if (msg.action === "accept") {
                console.log("accept")
                console.log("accept call => " + JSON.stringify(msg));
                var call = peer.call(receiveId, localStream);
                call.on('stream', function (stream) {
                    console.log('received remote stream');
                    remoteVideo.srcObject = stream;
                    tip.innerHTML = "已连接!"
                    sendMessage(msg.to, msg.from, "accept-ok");
                });
            }
        });
      });

      

    }
  </script>
</head>
<body> 
    <div class="container" style="text-align: center;">
        <h1>基于PeerJS的点对点视频聊天程序</h1>
        <p>
          <span style="font-weight: 700;">切换设备</span>
          <select id="videoSelect" style="width:100px"></select>
        </p>
        <div style="display: flex;flex-flow: wrap;justify-content: center;">
          <div style="border: 5px solid #ccc;">
            <h4>你的画面</h4>
            <video id="localVideo" autoplay controls></video>
          </div>
          <div style="border: 5px solid #ccc;">
            <h4>对象画面</h4>
            <video id="remoteVideo" autoplay controls></video>
          </div>
        </div>
        <div id="dialog-confirm" title="接受视频通话吗?">
            <p>
              <span class="ui-icon ui-icon-info" style="float:left; margin:12px 12px 20px 0;"></span><label id="lblFrom"></label>
              打你，是否接受？
            </p>
        </div>
        <div id="tip">
            连接中...
        </div>
      </div>
  
</body>
</html>

源码地址：https://github.com/QiuYang01/Video-Base-On-PeerJS
预览地址：https://map.gnnu.work/rm21/qy/video/videoself.html

快乐边城
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PeerJS:简化启用对等通信的配置过程
06-11
PeerJS 简化 P2P 通信所涉及的所有 API 的配置、连接和传输管理过程。 工作正在进行中！ PeerJS 通过使用自定义事件和适度的 Api 遵循 WebRTC 的常见实现模式。 在阅读有关 WebRTC 连接的更多信息 这个想法是尝试做 1 个配置并使用一组事件来处理操作。 这假设您有一个使用 Web Sockets 进行通信的信令服务器和 STUN/TURN 服务器来处理连接（由于防火墙或其他原因）。 例子 只有 1 个配置和一些事件来处理响应。 /** * Peer Example * ---------------------------------------- */ var localVideoEl = document . getElementById ( 'local-video' ) , remoteVideoEl = do
PeerJS:使用 WebRTC 的简单点对点-开源
06-23
PeerJS 包装了浏览器的 WebRTC 实现，以提供完整、可配置且易于使用的点对点连接 API。 只配备一个 ID，对等点可以创建到远程对等点的 P2P 数据或媒体流连接。 为了代理连接，PeerJS 连接到 PeerServer。 请注意，...
通过peerjs无需后台服务器前端实现视频通话功能
zzh122500的博客
09-13 2200
直接上代码，粘贴即可使用，俩台设备打开网页后，将一台设备的ID填入到另一台设备中，点击确认按钮直接进行视频通话。
探秘WebRTC的神器：PeerJS
最新发布
gitblog_00029的博客
05-08 391
探秘WebRTC的神器：PeerJS 项目地址:https://gitcode.com/peers/peerjs 在当今的互联网世界中，实时通信的需求日益增长，无论是在线协作工具还是视频聊天应用，都需要强大的底层技术支持。而WebRTC作为一项开放的技术标准，为实现浏览器间的直接通信提供了可能。今天，我们要向您推荐一款基于WebRTC的轻量级库——PeerJS，它将帮助您轻松构建复杂的P2P应用程...
一篇文章介绍使用PeerJS实现实时在线消息发送
superherooooss的博客
02-09 5295
PeerJS开源项目简化了WebrRTC的开发过程，对底层的细节做了封装，直接调用API即可。可以实现一端通过知道另一端的ID进行连接，ID可以自行设置也可以服务器随机分配，并且建立。发起者请求连接，接收者接收连接后，发送者上传一个png图片，接收者也能正常收到。，指的是一类指定元素类型的数组，而不是array的数组类型。功能实现的js功能包，提供丰富的、易用的并且可以配置的。连接到指定的远程peer并返回数据连接。
基于PeerJS的点对点实时聊天程序
qq_43548154的博客
05-03 2035
本文将演示如何实现用户A进入网页后生成一个链接，把链接发送给用户B，然后A与B就能相互聊天。
Android WebRTC 实现1V1实时音视频通信
12-13
本课程讲述如何使用OC 实现1V1 Android端实时音视频通信包括如何使用nodejs开发WebSocket信令服务器理解WebRTC媒体的交互流程coturn服务器搭建Android音视频客户端开发
网站在线客服系统实时语音视频聊天实战开发，利用peerjs vue.js实现webRTC网页音视频客服系统...
程序员老狼专注开发aigc或客服系统应用
02-12 2445
webRTC机制和peerjs库的介绍在其他博客中已经有了很多介绍，这里我直接搬运过来 一、webrtc回顾 WebRTC(Web Real-Time Communication)即：网页即时通信。 简单点讲，它可以实现浏览器网页与网页之间的音视频实时通信(或传输其它任何数据)，目前主流浏览器都支持该API，WebRTC现在已经纳入W3C标准。 1.1 媒体协商通信的主要目的之一是彼此交换信息。...
Web 的点对点通信 PeerJS.zip
09-17
总结一下，Web的点对点通信，尤其是通过PeerJS实现，为Web应用提供了强大的通信能力，使得开发者能够构建创新的、实时交互的应用，而不再局限于传统的服务器-客户端模式。无论是在教育、娱乐、协作还是其他领域，...
route65:基于PeerJS的简单的基于对等WebRTC的聊天应用程序
04-28
65路使用PeerJS制作的简单的点对点WebRTC聊天应用程序。 目前只有德国本地化（因为这是德国组织的项目）！ ＃＃＃用法： 从下载最新的（v0.10.0-rc1）node-webkit可执行文件下载route65.nw并使用node-webkit运行它...
peerjs:与peerjs视频聊天
06-11
将人脸识别处理与视频聊天图像相结合，对视频中显示的人脸进行处理。 使用源代码时 下面的部分需要重写。 接收器.js var peer = new Peer ( { key : 'PeerJSで発番されるKeyを設定' } ) ; 主文件 var peer = ...
peerjs：使用WebRTC的简单对等
02-02
PeerJS：使用WebRTC的简单对等 PeerJS提供了一个完整的，可配置的，易于使用的对等API，该API建立在WebRTC之上，同时支持数据通道和媒体流。 现场例子 这是一个同时使用媒体和数据连接的示例应用程序： : 。 该示例还使用了自己的 。 建立 包括图书馆 使用npm： npm install peerjs及其用法： import Peer from 'peerjs' ; 创建一个对等体 const peer = new Peer ( 'pick-an-id' ) ; // You can pick your own id or omit the id if you want to get a random one from the server. 数据连接 连接 const conn = peer . connect ( 'another-peers-id' ) ; conn . on ( 'open' , ( ) => { conn . send ( 'hi!' ) ; } ) ; 接收 peer . on ( 'connection' , ( c
live-chat-peerjs:简单的实时网络聊天可与您的朋友实时交谈
04-27
同行JS实验-实时聊天 使用Peer JS进行实时聊天Web实验 前提条件 不需要任何东西。 只需在浏览器中运行并连接互联网即可。 我在这里使用的工具 同行JS 高山JS 自举5 如何在本地服务器上测试 通过git clone https://github.com/gifaldyazkaa/live-chat-peerjs.git将此存储git clone https://github.com/gifaldyazkaa/live-chat-peerjs.git到您的PC 打开live-chat-peerjs文件夹 在浏览器中，打开2个index.html文件。 （进入2个标签） 选项卡1是“创建会议室并复制生成的会议室代码”。 选项卡2是“加入现有房间” 。 将复制的房间代码粘贴到“ Room ID 。 然后，开始聊天。 您会看到它正在运行！
peerjs-server：PeerJS服务器
02-06
PeerServer：PeerJS的服务器 PeerServer帮助建立PeerJS客户端之间的连接。 数据不通过服务器代理。 在Gitpod上运行您自己的服务器！ 用法 运行服务器 本机 如果您不想开发任何东西，只需在下面输入一些命令。 全局安装软件包： $ npm install peer -g 运行服务器： $ peerjs --port 9000 --key peerjs --path /myapp Started PeerServer on ::, port: 9000, path: /myapp (v. 0.3.2) 检查它： : : / 它应该返回带有名称，描述
webrtchat:PeerJS 上的语音和文本聊天应用程序
06-22
网络即时通讯 PeerJS 上的语音和文本聊天应用程序。 演示 部署到 Heroku 执照 在许可下发布
PeerJS提供了一个完整可配置易于使用基于WebRTC的点对点的数据通信
08-08
`PeerJS` 是一个基于JavaScript的库，其核心目标是简化WebRTC的使用，提供了一套完整的、可配置的API，让开发者可以快速地在网页应用中实现点对点的数据通信。这个库特别适合那些想要在浏览器之间建立直接连接，但又...
peerJS应用
weixin_43663255的博客
01-05 470
peerJS服务器+终端
vue使用peer.js实现语音通话
qq_45149139的博客
10-30 671
【代码】vue使用peer.js实现语言通话。
利用peerjs轻松玩转webrtc
weixin_30251829的博客
08-31 970
　随着5G技术的推广，可以预见在不久的将来网速将得到极大提升，实时音视频互动这类对网络传输质量要求较高的应用将是最直接的受益者。而且伴随着webrtc技术的成熟，该领域可能将成为下一个技术热点，但是传统的webrtc应用开发存在一定的复杂性，本文将介绍如何利用peerjs这一开源框架来简化webrtc开发。 一、webrtc回顾WebRTC（Web Real-Time Communic...
安卓 peerjs实现视频语音通话
06-10
安卓上使用PeerJS实现视频语音通话的步骤如下： 1. 在项目的build.gradle文件中添加以下依赖： ``` implementation 'org.webrtc:google-webrtc:1.0.+' implementation 'org.peerjs:peerjs-android:0.3.1' ``` 2. 在AndroidManifest.xml文件中添加以下权限： ``` <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> ``` 3. 在代码中创建Peer对象并连接到Peer服务器： ``` Peer peer = new Peer("your-peer-id", new PeerOptions().setSecure(true)); peer.on(Peer.PeerEventEnum.OPEN, new OnCallback() { @Override public void onCallback(Object o) { Log.d("PeerJS", "Peer connection opened"); } }); ``` 4. 使用getUserMedia方法获取本地视频和音频流： ``` MediaStreamConstraints constraints = new MediaStreamConstraints(); constraints.video = true; constraints.audio = true; peer.getUserMedia(constraints, new OnCallback() { @Override public void onCallback(Object o) { MediaStream stream = (MediaStream) o; // 将本地视频流显示在界面上 VideoRendererGui.setView(videoView, null); VideoRenderer renderer = VideoRendererGui.create(0, 0, 100, 100, true); stream.videoTracks.get(0).addRenderer(renderer); // 创建并发送连接请求 Peer.MediaConnection connection = peer.call("peer-id-to-call", stream); connection.on(Peer.MediaEventEnum.STREAM, new OnCallback() { @Override public void onCallback(Object o) { MediaStream remoteStream = (MediaStream) o; // 显示远程视频流 VideoRendererGui.setView(remoteView, null); VideoRenderer remoteRenderer = VideoRendererGui.create(0, 0, 100, 100, true); remoteStream.videoTracks.get(0).addRenderer(remoteRenderer); } }); } }); ``` 这样就可以在安卓设备上使用PeerJS实现视频语音通话了。注意，需要在两个设备上分别运行相同的代码，并且将peer-id-to-call替换成对方的peer ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值