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

这篇具有很好参考价值的文章主要介绍了使用js搭建简易的WebRTC实现视频直播。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

      创建package.json。文章来源地址https://www.toymoban.com/news/detail-703208.html

    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)。
      <!DOCTYPE html>
      <html lang="zh-CN">
      
      <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">
          <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
          <title>Receiver</title>
      </head>
      
      <body>
          <video autoplay id="remote"></video>
      </body>
      <script>
          const remoteVideo = document.querySelector('#remote')
      
          const socket = new WebSocket('ws://localhost:8080');
          socket.onopen = function () {
              console.log("Socket Success")
          }
          let buddy = new RTCPeerConnection()
      
      
          // 如果接收到对方的视频
          socket.onmessage = function (e) {
              const { type, sdp, iceCandidate } = JSON.parse(e.data)
              console.log(type)
              switch (type) {
                  case "offer":
                      buddy.setRemoteDescription(
                          new RTCSessionDescription({ type, sdp })
                      )
                      buddy.createAnswer().then(answer => {
                          buddy.setLocalDescription(answer)
                          socket.send(JSON.stringify(answer))
                      })
                      break;
      
                  case "offer_ice":
                      buddy.addIceCandidate(iceCandidate)
                      break;
      
                  default:
                      break;
              }
          }
      
          buddy.ontrack = function (e) {
              remote.srcObject = e.streams[0]
          }
      
          buddy.onicecandidate = function (e) {
              if (e.candidate) {
                  socket.send(JSON.stringify({
                      type: "answer_ice",
                      iceCandidate: e.candidate
                  }))
              }
          }
      
      </script>
      
      </html>
    8. 准备发送方的代码(send.html)。
      <!DOCTYPE html>
      <html lang="zh-CN">
      
      <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">
          <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
          <title>Send</title>
      </head>
      
      <body>
          <script>
              const socket = new WebSocket('ws://localhost:8080');
              socket.onopen = function () {
                  console.log("Socket Success")
              }
              let peer = new RTCPeerConnection()
      
              navigator.mediaDevices.getUserMedia({
                  video: true,
                  audio: true
              }).then(stream => {
                  stream.getTracks().forEach(track => {
                      peer.addTrack(track, stream);
                  })
      
                  peer.createOffer().then(offer => {
                      peer.setLocalDescription(offer);
                      socket.send(JSON.stringify(offer));
                  })
              })
      
              peer.onicecandidate = function (e) {
                  if (e.candidate) {
                      socket.send(JSON.stringify({
                          type: "offer_ice",
                          iceCandidate: e.candidate
                      }))
                  }
              }
      
              // 如果接收到对方的视频
              socket.onmessage = function (e) {
                  const { type, sdp, iceCandidate } = JSON.parse(e.data)
                  console.log(type)
                  switch (type) {
                      case "answer":
                          peer.setRemoteDescription(
                              new RTCSessionDescription({ type, sdp })
                          )
                          break;
      
                      case "answer_ice":
                          peer.addIceCandidate(iceCandidate)
                          break;
      
                      default:
                          break;
                  }
              }
          </script>
      </body>
      
      </html>
    9. 使用vscode的插件live server启动两个html文件。
      下载live server插件。
      使用js搭建简易的WebRTC实现视频直播,h5,webrtc,javascript
      启动live server。
      使用js搭建简易的WebRTC实现视频直播,h5,webrtc,javascript
      启动后两个端口号。
      使用js搭建简易的WebRTC实现视频直播,h5,webrtc,javascript

      使用js搭建简易的WebRTC实现视频直播,h5,webrtc,javascript
    10. 等全部启动后,查看接收端的页面,要等一段时间,可以看到摄像头拍到的画面。
      接受端播放不了,在浏览器控制台中输入 remoteVideo.play() 就行
       

到了这里,关于使用js搭建简易的WebRTC实现视频直播的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebRTC技术文档 -- 1.音视频直播(笔记)

    1.1 两条技术路线 1.1.1 以音视频会议为代表的实时互动直播 互动直播主要解决音视频远程交流问题,实时性较强,时延一般低于500ms。 1.1.2 以娱乐直播为代表的流媒体分发 娱乐直播主要解决音视频大规模分发问题,实时性较差,时延一般在3s以上。 1.2 直播技术 WebRTC用于实时

    2024年02月22日
    浏览(56)
  • 视频直播新时代,低延时直播交互,Web,Android,WebRtc推流拉流测试

    直播现在已经深入了生活,学习,工作和娱乐方方面面,由于前些年的技术所限,传统rtmp,flv,m3u8 技术让直播快速启动项目产品,但也有很多不足,特别的交互式直播,一直是其中的痛点,延时较大(1-10秒不等) 让用户即想用,已不是太爽,随技术进步,Webrtc已经切入了视

    2024年01月19日
    浏览(56)
  • 【音视频流媒体】2、WebRTC 直播超详细介绍

    一对一直播框架: WebRTC终端: 音视频采集, 编解码, NAT穿越, 音视频数据传输 Signal服务器: 信令处理(如加入房间, 离开房间, 传递媒体协商消息) STUN/TURN服务器: 获取WebRTC终端在公网的IP地址, NAT穿越失败后的数据中转. js中 var promise = navigator.mediaDevices.getUserMedia(constraints); 可访问摄

    2023年04月18日
    浏览(47)
  • WebRTC音视频通话-iOS端调用ossrs直播拉流

    WebRTC音视频通话-iOS端调用ossrs直播拉流 之前实现iOS端调用ossrs服务,文中提到了推流。没有写拉流流程,所以会用到文中的WebRTCClient。请详细查看:https://blog.csdn.net/gloryFlow/article/details/132262724 最近有朋友问过,我发现之前少了一块拉流流程,这里补充一下。 2.1、拉流实现时

    2024年02月11日
    浏览(57)
  • 监控摄像头接入GB28181平台实现监控视频直播的详细搭建流程

    将监控摄像头的视频在网站和APP中直播,要解决的几个问题是: 1)获取摄像头视频 2)将视频直播出去 3)网页无插件直播和APP集成 获取摄像头视频,之前主要采取拉流模式,即在知道摄像头ip地址的情况下,可以通过RTSP协议拉取摄像头实时视频。最新的方案是采用GB28181协

    2023年04月17日
    浏览(58)
  • 【音视频处理】RTMP、HLS、HTTP-FLV、WebRTC、RTSP的区别?直播协议详解

      大家好,欢迎来到停止重构的频道。 本期我们详细讨论 直播的相关协议 ,包括:HTTP-FLV、HLS、RTMP、Web-RTC、RTSP等等。 我们将会详细介绍这些协议的工作原理、应用场景、及延迟的原因。 我们按这样的顺序讨论​ 1、  RTMP、HTTP-FLV  2、  HLS  3、  Web-RTC  4、  RTSP  RTM

    2024年02月02日
    浏览(45)
  • Docker搭建rtmp视频直播

    sudo apt-get install docker sudo apt-get update  sudo apt-get install docker.io  sudo docker pull alfg/nginx-rtmp  sudo docker run -it -p 1935:1935 -p 8080:80 --rm alfg/nginx-rtmp  ffmpeg -s 640*480 -i /dev/video3 -vcodec h264  -f flv rtmp://192.168.4.97:1935/stream/example  ffplay rtmp://192.168.4.97:1935/stream/example ffmpeg -i rtmp://192.18.4.

    2024年02月10日
    浏览(48)
  • vue+萤石云ezuikit.js播放直播流视频(声音自动关闭,添加控件,多个视频播放)

    vue+萤石云ezuikit.js播放直播流视频(声音自动关闭,添加控件,多个视频播放) 实例使用 引入最新的ezuikit.js 看过官网的文档都知道萤石云的文档是多么的‘善解人意’哈,懂得都懂,很多东西没有说清楚的,只能靠自己去摸索或者看他们的demo来一点点测试实现 官网地址:

    2024年02月04日
    浏览(124)
  • 浅述HLS视频服务器EasyDarwin视频直播点播平台如何快速搭建一个视频点播系统

    EasyDarwin视频直播点播平台能实现视频流媒体的上传、转码、存储、录像、推拉流、直播、点播等功能,可兼容Windows、Android、iOS、Mac等操作系统,系统支持HTTP、HLS、RTMP等播出协议,具备较强的可拓展性与灵活性。 EasyDarwin的特点包括: 1.开源免费:EasyDarwin以开源的形式发布

    2024年02月20日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包