node搭建webrtc信令服务器

nodejs搭建信令服务器

由于最近在研究webRTC视频推流,查了很多webRTC的资料,准备搭建rtsp的流媒体推送服务器,属于个人研究,非团队。进度慢之又慢!资料查了又查,始终找不到webrtc推送rtsp流的开源项目,自己后续慢慢研究吧!
虽然没开发出来什么东西,但是学习不少的东西!例如:创建nodejs搭建的聊天室,创建视频通话。生命就是在不断学习的过程!谢谢大佬的博客https://huangxiaoguo.blog.csdn.net/article/details/104229233
虽然需要修改一部分变量,但最终还是跑通了!如果对于流程及api感到比较陌生的话可以看看这篇文章webrtc开发入门教程
一下代码是修改过后的代码可以直接运行!在gitee上开源源码地址gitee码云,单独复制代码,会运行报错!

'use strict'
//引入express框架
var express = require('express');
//引入http
var http = require('http');
//引入文件管理的fs
var fs = require('fs');
//引入路径
var path = require('path');
//引入静态文件内容插件
var serveIndex = require('serve-index');
//初始化 express框架;
let app = express();
//express挂载
app.use(express.static('./public'));

//引入scoket
var { ioinit, logger, USERCOUNT } = require('./scoket');

app.use('/index', function (req, res, next) {

  logger.debug('主页面请求')
  console.log('主页面请求', req.url, req.url.indexOf('/favicon.ico') != -1);
  if (req.url.indexOf('/index') != -1) { }
  if (req.url.indexOf('/tall') != -1) {
    console.log('进到消息通话页面');
    res.sendFile(path.resolve(__dirname, './static/tall.html'));
  } else if (req.url.indexOf('/webrtc') != -1) {
    console.log('进到视频通话页面123');
    res.sendFile(path.resolve(__dirname, './view/index.html'))
  } else if (req.url.indexOf('/js') != -1) {
    res.sendFile(path.resolve(__dirname, './static/client.js'));
  } else if (req.url.indexOf('/tjs') != -1) {
    res.sendFile(path.resolve(__dirname, './view/tjs/client.js'));
  } else {
    res.send({ code: 400, message: '请求的页面不见了', success: false })
  }
});
//挂载静态文件夹下所有文件名称路径
app.use('/filepath', serveIndex('./public'));
app.use('/', (req, res, next) => {
  console.log('荣阔所有路径', req.url);
  res.sendFile(path.resolve(__dirname, './static/favicon.ico'));
})

let serve = http.createServer(app)
let io = ioinit(serve)
serve.listen(3100)

io.sockets.on('connection', (socket) => {
  console.log('创建socket', 11);
  logger.info("connection");

  //转发信息
  socket.on('message', (room, data) => {
    console.log('message消息推送', 33,room,data);
    logger.info("message data " + socket.id + " " + room, data);
    socket.emit('message', room, socket.id, '回复链接')//房间内所有人,除自己外
  });

  //用户加入
  socket.on('join', (room) => {
    console.log('用户加入', room, 22);
    logger.info("join", ",room = ", room, ",socket.id = ", socket.id);

    
    var myRoom = io.sockets.adapter.rooms[room];
    console.log('===========', myRoom);
    var users = (myRoom) ? Object.keys(myRoom.sockets).length : 0;
    logger.debug('the number of user in room is:' + users)

    //处理一对一通信
    if (users < USERCOUNT) {
      //给本人回信息
      socket.emit('joined', room, socket.id);
      if (users > 1) {
        socket.to(room).emit('otherjoin', room, socket.id);
      }
    } else {
      socket.leave(room);
      socket.emit('full', room, socket.id);
    }
  });

  //用户离开
  socket.on('leave', (room) => {
    console.log('用户离开', 44);
    var myRoom = io.sockets.adapter.rooms[room];
    var users = (myRoom) ? Object.keys(myRoom.sockets).length : 0;
    //users-1
    logger.debug('the number of user in room is:' + (users - 1));

    socket.to(room).emit('exit', room, socket.id);
    socket.emit('leaved', room, socket.id);

  });
});

serve.on('error', (error) => {
  console.log('启动失败', error)
})
serve.on('listening', () => {
  logger.debug('监听3100端口启动-启动成功')
  console.log('3100端口启动成功');
})

使用了express框架,没有使用路由中间件,使用log4js进行日志记录,使用scoketIo进行数据通讯
聊天室代码

<html>
	<head>
		<title>
			Chat Room
		</title>
	</head>
	<body>
		<table align="center">
			<tr>
				<td>
					<label>UserName:</label>
					<input type="text" id="uesrname"/>
				</td>	
			</tr>
			<tr>
				<td>
					<label>room:</label>
					<input type="text" id="room"/>
					<button id="connect">加入</button>
				</td>
			</tr>
			<tr>
				<td>
					<label>Content:</label><br>
					<textarea disabled  id="output" rows="10" cols="50"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<label>Input:</label><br>
					<textarea disabled  id="input" rows="3" cols="50"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<button id="send">Send</button>
				</td>
			</tr>
		</table>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>
		<script src="./js/client.js"></script>
	</body>
</html>

聊天室

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

<head>
  <meta charset="UTF-8">
  <title>视频通话</title>

</head>

<body>
  <div>
    <h4>我的视频&nbsp;&nbsp;
      <button type="button" id="startvideo">发起视频</button>&nbsp;&nbsp;
      <button type="button" id="endvideo">结束视频</button>
    </h4>
    <video id="myvideo" autoplay playsinline></video>
  </div>
  <div>
    <h4>对方的视频:</h4>
    <video id="usersvideo" width="" height="" controls autoplay></video>
  </div>
</body>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
  console.log(adapter.browserDetails.browser);
  var myvideo = document.querySelector('#myvideo');
  var usersvideo = document.querySelector('#usersvideo');
  var startvideo = document.querySelector('#startvideo')
  var endvideo = document.querySelector('#endvideo')
  var videostream = ''
  console.log(startvideo);
  var constraints = {
    audio: true,
    video: true
  };
  //发起视频
  startvideo.onclick = () => {
    console.log('发起视频');

    function handleSuccess (stream) {
      var videoTracks = stream.getVideoTracks();
      console.log('Using video device: ' + videoTracks[0].label);
      myvideo.srcObject = stream;
    }
    function handleError (error) {
      console.log('getUserMedia error: ' + error.name, error);
    }

    videostream = navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
  }
  //结束视频
  endvideo.onclick = () => {
    myvideo.src = ''
    console.log('结束视频');
    videostream.then(item => {
      console.log(item);
    })
    // videostream.then(item => {
    //   console.log(item);
    // })

    // videostream.getTracks().forEach(function (track) {
    //   track.stop();
    //   console.log('关闭视频通道不成功', track);
    //   myvideo.src = ''
    // })



  }

</script>

</html>

视频聊天页面
对于不懂的api及流程可以看看webrtc开发入门教程

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值