WebRTC初学Demo

最新推荐文章于 2024-05-11 09:36:13 发布

缤纷冷泪

最新推荐文章于 2024-05-11 09:36:13 发布

阅读量2.3k

点赞数 3

分类专栏：炒冷饭学习笔记 javascript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/holdsky/article/details/120841013

版权

文章目录

简介
实现基本的数据通道
文件传输
音视频通话
屏幕共享
- 捕捉屏幕
- 完整代码
NAT穿透之STUN/TURN
信令服务器
- 信令服务实现
- 完整代码

详细请访问

简介

WebRTC（网页实时通信技术），是一系列为了建立端到端文本或者随机数据的规范，标准，API和概念的统称。

任何实现了WebRTC标准的软件之间均可通信，如PC浏览器–手机浏览器、浏览器–App、App–App。通信双方是对等的，但通常还要引入服务端，以便于对等端能够找到对方。

移动端浏览器对WebRTC的支持

Android 4.4以上
iOS 11以上

WebRTC应用不需要非常高性能就能够平稳运行、拥有良好体验。对于WebRTC来说，获取特定硬件的权限也不是必需的。Web应用和原生应用对比：

原生应用会比Web应用更快，拥有更高级别的硬件权限；混合应用的运行速度更慢，不能使用移动设备的全部权限。
原生应用在不同的平台上的代码复用度有待提高；混合应用开发起来会更快，更省钱

结论：如果高性能和极致体验不是软件的必不可少的要求，那么，在绝大多数情况下，用户根本注意不到原生和混合WebRTC应用之间的差别。

实现基本的数据通道

对浏览器而言，WebRTC API处于底层且十分复杂。不过我们可以使用封装好的高级别的API----simple-peer是一个基础的，非常洁净的低层P2P连接封装器.下面的示例是simple-peer的一个标准例子。

<html>
  <body>
      <style>
        #outgoing {
     
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
        }
      </style>
    <form>
      <textarea id="incoming"></textarea>
      <button type="submit">submit</button>
    </form>
    <pre id="outgoing"></pre>
    <script src="simplepeer.min.js"></script>
    <script>
      const p = new SimplePeer({
     
        initiator: location.hash === '#1',
        trickle: false
      })

      p.on('error', err => console.log('error', err))

      p.on('signal', data => {
     
        console.log('SIGNAL', JSON.stringify(data))
        document.querySelector('#outgoing').textContent = JSON.stringify(data)
      })

      document.querySelector('form').addEventListener('submit', ev => {
     
        ev.preventDefault()
        p.signal(JSON.parse(document.querySelector('#incoming').value))
      })

      p.on('connect', () => {
     
        console.log('CONNECT')
        p.send('whatever' + Math.random())
      })

      p.on('data', data => {
     
        console.log('data: ' + data)
      })
    </script>
  </body>
</html>

演示步骤:

1、创建index.html文件，文件内容为上面的代码
2、下载simplepeer.min.js，放到和index.html同目录下
3、用浏览器打开file:///本地路径目录/index.html#1（这里使用file协议，是因为没有部署index.html到服务端），可以看到网页中输出了一个offer邀请信令，格式类似下面例子

{"type":"offer","sdp":"v=0\r\no=- 8456412157049919494 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0\r\na=extmap-allow-mixed\r\na=msid-semantic: WMS\r\nm=application 53799 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 171.84.6.216\r\na=candidate:1841888059 1 udp 2113937151 0ec970aa-e465-4105-a65e-81ec6552c7e5.local 53799 typ host generation 0 network-cost 999\r\na=candidate:842163049 1 udp 1677729535 171.84.6.216 53799 typ srflx raddr 0.0.0.0 rport 0 generation 0 network-cost 999\r\na=ice-ufrag:UqLe\r\na=ice-pwd:f08ur1ltpmFSGbMp/cwf9KkF\r\na=fingerprint:sha-256 71:60:B4:28:15:B6:5E:D4:CE:76:49:F8:B2:CE:44:E4:F8:F9:FD:14:7B:AA:DA:AA:BE:DF:66:62:27:2E:E9:00\r\na=setup:actpass\r\na=mid:0\r\na=sctp-port:5000\r\na=max-message-size:262144\r\n"}

4、用另外一个浏览器打开file:///本地路径目录/index.html，注意没有#1，然后将步骤3中的offer信令复制到本步骤中网页的提交框中，并提交，然后可以在网页中看到一answer应答信令，格式类似下面例子

{"type":"answer","sdp":"v=0\r\no=- 5040306846154650858 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0\r\na=extmap-allow-mixed\r\na=msid-semantic: WMS\r\nm=application 9 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 0.0.0.0\r\na=candidate:1841888059 1 udp 2113937151 71a8e768-d70d-4554-8ce3-c3d1ee6751a0.local 49173 typ host generation 0 network-cost 999\r\na=ice-ufrag:VhmK\r\na=ice-pwd:KVNGXnCYlO1TaAqAEnhObWP4\r\na=fingerprint:sha-256 5E:09:41:CF:D8:25:46:D4:E4:D7:B6:FB:6D:E7:18:7F:BE:CB:4B:98:28:72:95:06:78:24:FB:6C:6F:B4:50:AE\r\na=setup:active\r\na=mid:0\r\na=sctp-port:5000\r\na=max-message-size:262144\r\n"}

5、将步骤4中的answer信令制到步骤3中网页的提交框中，并提交。打开浏览器的开发者模式，可以看到两个浏览器已经建立了数据通道，并互相发送了一个随机数消息

文件传输

建立起基本的数据通道后，就可以做一些比较直观的不那么抽象事情了，比如传输文件。对于使用WebRTC进行文件传输，有一些细节需要处理

修改传输速度限制

Chrome默认将WebRTC的数据通道传输速度限制在30K，我们可以修改SDP的内容来提高上限,例如256K。

let peer = new SimplePeer()
peer.on('signal', data => {
   
    data.sdp = data.sdp.replace( 'b=AS:30', 'b=AS:262144' );
    console.log('SIGNAL', JSON.stringify(data))
})

选择并读取文件数据

我们选取基本的input控件作为文件选择器,并监听文件选择动作。

<input type="file" onchange="OnFileSelected(this.files)"/>
<script>
    //选中文件
    function OnFileSelected(files)
    {
     
        file = files[0];
        let fileReader = new FileReader();
        fileReader.onload = (ev)=>{
     
            let blobData = ev.currentTarget.result;
            console.log(blobData)
        }
        fileReader.readAsArrayBuffer( file.slice( 0, file.size ) );
    }
</script>

考虑到传输速度限制，在读取文件内容时，应进行切片–循环读取、发送，直到文件末尾。

自动下载文件

接收完成后，数据还保存在浏览器内存（缓存）中，需要触发文件下载机制将数据下载到本地。

let blobData = '接收的数据'
let blob = new window.Blob( blobData );
let anchor = document.createElement( 'a' );
anchor.href = URL.createObjectURL( blob );
anchor.download = '文件名';
anchor.textContent = '下载文件';
anchor.click()

完整代码

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
    </head>
  <body>
    <style>
        #outgoing {
     
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
        }
      </style>
    <form>
      <textarea id="incoming"></textarea>
      <button type="submit">提交</button>
    </form>
    <div>口令</div>
    <pre id="outgoing"></pre>
    
    <input id="fileinput" type="file" onchange="OnFileSelected(this.files)" hidden="true"/>
    <script src="simplepeer.min.js">

最低0.47元/天解锁文章

缤纷冷泪

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
WebRTC初学Demo

文章目录简介实现基本的数据通道文件传输修改传输速度限制选择并读取文件数据自动下载文件完整代码音视频通话https访问音视频流完整代码屏幕共享捕捉屏幕完整代码NAT穿透之STUN/TURN信令服务器信令服务实现完整代码详细请访问简介WebRTC（网页实时通信技术），是一系列为了建立端到端文本或者随机数据的规范，标准，API和概念的统称。任何实现了WebRTC标准的软件之间均可通信，如PC浏览器–手机浏览器、浏览器–App、App–App。通信双方是对等的，但通常还要引入服务端，以便于对等端能够找到对方
复制链接

扫一扫