使用js搭建简易的WebRTC实现视频直播

  1. 首先需要一个信令服务器,我们使用nodejs来搭建。两个端:发送端和接收端。
  2. 我的目录结构如下图:
    使用js搭建简易的WebRTC实现视频直播_第1张图片
  3. 流程
    1. 创建一个文件夹 WebRTC-Test。
    2. 进入文件夹中,新建一个node的文件夹。
    3. 使用终端并进入node的目录下,使用
      npm init

      创建package.json。

    4. 新建server.js,复制一下代码
      const app = require('express')();
      const wsInstance = require('express-ws')(app);
      
      const cors = require('cors');
      app.use(cors({ origin: 'http://localhost:3000' }));
      
      app.ws('/', ws => {
      	ws.on('message', data => {
      		// 未做业务处理,收到消息后直接广播
      		wsInstance.getWss().clients.forEach(server => {
      			if (server !== ws) {
      				server.send(data);
      				console.log(data,)
      			}
      		});
      	});
      });
      
      console.log("服务启动: http://localhost:8080");
      app.listen(8080, '0.0.0.0');
    5. 下载信令服务器的依赖。
      npm install express;
      npm install express-ws;
      npm install cors;
    6. 使用node server.js启动node的服务。
    7. 准备接收方的代码(receive.html)。
      
      
      
      
          
          
          
          
          Receiver
      
      
      
          
      
      
      
      
    8. 准备发送方的代码(send.html)。
      
      
      
      
          
          
          
          
          Send
      
      
      
          
      
      
      
    9. 使用vscode的插件live server启动两个html文件。
      下载live server插件。

      启动live server。
      使用js搭建简易的WebRTC实现视频直播_第2张图片
      启动后两个端口号。


    10. 等全部启动后,查看接收端的页面,要等一段时间,可以看到摄像头拍到的画面。
      接受端播放不了,在浏览器控制台中输入 remoteVideo.play() 就行
       

你可能感兴趣的:(h5,webrtc,javascript)