本文由微医云技术团队前端工程师张宇航分享,原题“从0到1打造一个 WebRTC 应用”,即时通讯网有修订和改动。
cover-opti.png (12.04 KB, 下载次数: 681)
下载附件 保存到相册
2 年前 上传
cd webrtc-server yarn npm start cd webrtc-static yarn npm start
0.jpg (26.2 KB, 下载次数: 645)
1.png (21.41 KB, 下载次数: 652)
x1.png (190.89 KB, 下载次数: 586)
2.png (35.93 KB, 下载次数: 628)
3.png (24.85 KB, 下载次数: 609)
const constraints = { video: true, audio: true }; // 非安全模式(非https/localhost)下 navigator.mediaDevices 会返回 undefined try { const stream = await navigator.mediaDevices.getUserMedia(constraints); document.querySelector('video').srcObject = stream; } catch (error) { console.error(error); }
try { const devices = await navigator.mediaDevices.enumerateDevices(); this.videoinputs = devices.filter(device => device.kind === 'videoinput'); this.audiooutputs = devices.filter(device => device.kind === 'audiooutput'); this.audioinputs = devices.filter(device => device.kind === 'audioinput'); } catch (error) { console.error(error); }
4.png (33.9 KB, 下载次数: 646)
1. git clone [url=https://github.com/coturn/coturn.git]https://github.com/coturn/coturn.git[/url] 2. cd coturn/ 3. ./configure --prefix=/usr/local/coturn 4. make -j 4 5. make install // 生成 key 6. openssl req -x509 -newkey rsa:2048 -keyout /etc/turn_server_pkey.pem -out /etc/turn_server_cert.pem -days 99999 -nodes
vim /usr/local/coturn/etc/turnserver.conf listening-port=3478 external-ip=xxx.xxx // 你的主机公网 IP user=xxx:xxx // 账号: 密码 realm=xxx.com // 你的域名
1. cd /usr/local/coturn/bin/ 2. ./turnserver -c ../etc/turnserver.conf // 注意:云主机内的 TCP 和 UDP 的 3478 端口都要开启
5.png (34.37 KB, 下载次数: 617)
// server 端 server.js const Koa = require('koa'); const socket = require('socket.io'); const http = require('http'); const app = new Koa(); const httpServer = http.createServer(app.callback()).listen(3000, ()=>{}); socket(httpServer).on('connection', (sock)=>{ // .... }); // client 端 socket.js import io from 'socket.io-client'; const socket = io.connect(window.location.origin); export default socket;
// server 端 server.js socket(httpServer).on('connection', (sock)=>{ // 用户离开房间 sock.on('userLeave',()=>{ // ... }); // 检查房间是否可加入 sock.on('checkRoom',()=>{ // ... }); // .... }); // client 端 Room.vue import socket from '../utils/socket.js'; // 服务端告知用户是否可加入房间 socket.on('checkRoomSuccess',()=>{ // ... }); // 服务端告知用户成功加入房间 socket.on('joinRoomSuccess',()=>{ // ... }); //....
socket.on('answerVideo', async (user) => { VIDEO_VIEW.showInvideoModal(); // 创建本地视频流信息 const localStream = await this.createLocalVideoStream(); this.localStream = localStream; document.querySelector('#echat-local').srcObject = this.localStream; this.peer = new RTCPeerConnection(); this.initPeerListen(); this.peer.addStream(this.localStream); if (user.sockId === this.sockId) { // 接收方 } else { // 发送方 创建 offer const offer = await this.peer.createOffer(this.offerOption); await this.peer.setLocalDescription(offer); socket.emit('receiveOffer', { user: this.user, offer }); } });
initPeerListen () { // 收集自己的网络信息并发送给对端 this.peer.onicecandidate = (event) => { if (event.candidate) { socket.emit('addIceCandidate', { candidate: event.candidate, user: this.user }); } }; // .... }
socket.on('receiveOffer', async (offer) => { await this.peer.setRemoteDescription(offer); const answer = await this.peer.createAnswer(); await this.peer.setLocalDescription(answer); socket.emit('receiveAnsewer', { answer, user: this.user }); });
socket.on('receiveAnsewer', (answer) => { this.peer.setRemoteDescription(answer); });
socket.on('addIceCandidate', async (candidate) => { await this.peer.addIceCandidate(candidate); }); this.peer.onaddstream = (event) => { // 拿到对方的视频流 document.querySelector('#remote-video').srcObject = event.stream; };
6.jpg (7.47 KB, 下载次数: 652)
7.jpg (9.91 KB, 下载次数: 649)
8.jpg (34.23 KB, 下载次数: 593)
来源:即时通讯网 - 即时通讯开发者社区!
轻量级开源移动端即时通讯框架。
快速入门 / 性能 / 指南 / 提问
轻量级Web端即时通讯框架。
详细介绍 / 精编源码 / 手册教程
移动端实时音视频框架。
详细介绍 / 性能测试 / 安装体验
基于MobileIMSDK的移动IM系统。
详细介绍 / 产品截图 / 安装体验
一套产品级Web端IM系统。
详细介绍 / 产品截图 / 演示视频
引用此评论
引用:椎锋陷陈 发表于 2021-08-24 11:26 之前也有幸使用了WebRTC搭建了公司项目中的音视频通话模块,这里借这篇文章也回顾总结一下: WebRTC是基 ...
引用:椎锋陷陈 发表于 2021-08-24 13:43 就是移动端的
引用:椎锋陷陈 发表于 2021-08-24 17:17 用的是Github上的开源项目Signal所封装的WebRTC库:https://github.com/signalapp/libwebrtc-android/tre ...
引用:Mr.Potter 发表于 2021-08-24 18:43 这个demo只能端到端通信?不能实现多端通信吗
引用:edward13th 发表于 2021-08-30 15:54 我运行demo调用网络端地址的时候 会报错显示 找百度说是1、地址为localhost:// 访问时;2、地址为https:// ...
精华主题数超过100个。
连续任职达2年以上的合格正式版主
为论区做出突出贡献的开发者、版主等。
Copyright © 2014-2024 即时通讯网 - 即时通讯开发者社区 / 版本 V4.4
苏州网际时代信息科技有限公司 (苏ICP备16005070号-1)
Processed in 0.124997 second(s), 34 queries , Gzip On.