前端使用WebRTC———HelloWorld

借助 WebRTC，您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据，允许开发人员构建强大的语音和视频通信解决方案.重点: 点对点发送视频、语音和数据。先尝试跑通这个简单的Demo，可以看从页面中看到本地预览、推拉流的效果。如果你是第一次接触webrtc，上面的流程中有很多看不懂的名字和方法可以先忽略它们。代码。

豆包啊啊

500人浏览 · 2023-07-05 13:59:24

豆包啊啊 · 2023-07-05 13:59:24 发布

什么是webrtc？

借助 WebRTC，您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据，允许开发人员构建强大的语音和视频通信解决方案.

重点: 点对点发送视频、语音和数据。

如何在浏览器中使用webrtc？

浏览器中可以通过一下方法判断当前浏览器是否支持webrtc

   window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection

简单的Demo

先从最简单的例子开始，我们在一个网页中，通过两个RTCPeerConnection对象来建立一个连接，一个RTCPeerConnection(pc_pub)对象发送视频和语音，另一个RTCPeerConnection(pc_sub)对象接收视频和语音。

效果
在这里插入图片描述
此处使用了Safri的虚拟摄像头。可以避免使用真实摄像头还要露脸的尴尬。可以看到左侧是本地采集的画面，右侧是接收到的视频画面。中间有大概几十毫秒的延迟。

流程

在这里插入图片描述

在上面的流程图中，pub_pc表示推流的对象(PeerConnection)， sub_pc表示订阅的对象(PeerConnection)。

● 通过getUserMedia方法来请求使用本地设备，更多关于获取设备的方法可以参考# 获取浏览器麦克风、摄像头和屏幕共享(一)
● 左侧的VideoElement只是用来显示推流内容(本地预览)，是否显示都不影响推流效果。

总结

先尝试跑通这个简单的Demo，可以看从页面中看到本地预览、推拉流的效果。如果你是第一次接触webrtc，上面的流程中有很多看不懂的名字和方法可以先忽略它们。

代码

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>webrtc连接</title>
</head>

<body>
  <video id="localStream" style="width: 320px; height: 240px;" autoplay muted></video>
  <video id="remoteStream" style="width: 320px; height: 240px;" autoplay muted> </video>
  <button id="deviceBtn">打开本地摄像头</button>
  <button id="startBtn">建立连接</button>
  <script>
    let localStream = null;
    let localVideo = document.getElementById("localStream");
    let remoteVideo = document.getElementById("remoteStream")
    let deviceBtn = document.getElementById("deviceBtn");
    let startBtn = document.getElementById("startBtn");

    let pc_pub = new RTCPeerConnection();
    let pc_sub = new RTCPeerConnection();

    deviceBtn.addEventListener("click", () => {
      navigator.mediaDevices.getUserMedia({ video: true }).then((mediastream) => {
        localStream = mediastream;
        localVideo.srcObject = mediastream;
      })
    })

    startBtn.addEventListener("click", () => {
      pc_pub.addTrack(localStream.getVideoTracks()[0], localStream);
      pc_pub.createOffer().then((offer) => {
        pc_pub.setLocalDescription(offer).then(() => {
          pc_sub.setRemoteDescription(offer).then(() => {
            pc_sub.createAnswer().then((answer) => {
              pc_sub.setLocalDescription(answer).then(() => {
                pc_pub.setRemoteDescription(answer).then(() => {

                })
              })
            })
          })
        })
      })
    })

    pc_pub.addEventListener('icecandidate', (event) => {
      if (event.candidate) {
        pc_sub.addIceCandidate(event.candidate);
      }
    })

    pc_sub.addEventListener('icecandidate', (event) => {
      if (event.candidate) {
        pc_pub.addIceCandidate(event.candidate);
      }
    })

    pc_sub.addEventListener('track', (event) => {
      remoteVideo.srcObject = event.streams[0];
    })
  </script>
</body>