socket实现视频通话-WebRTC

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

最近喜欢研究视频流,所以思考了双向通信socket,接下来我们就一起来看看本地如何实现双向视频通讯的功能吧~

客户端获取视频流

首先思考如何获取视频流呢?

其实跟录音的功能差不多,都是查询电脑上是否有媒体设备,如果有录音和录像的设备,首先就需要授权,然后将视频流通过socket传输给服务端。

获取媒体设备

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})

因为是打视频的功能,那A客户端本身也希望看到A的摄像头,所以我们直接将其赋值给一个video标签,就能看到图像了.

<p>这是A页面</p>

<div class="local-stream-page">
  <video autoplay controls muted id="elA"></video>
  <button onclick="onStart()">打视频给B页面</button>
</div>

<script>

  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    })
    if (videoElA) {
      videoElA.srcObject = stream // 在 video 标签上播放媒体流
    }
    peerInit(stream) // 初始化连接
  } catch (error) {
    console.log('error:', error)
  }

</script>

然后就是重要部分了,我们需要用到WebRTC的API

RTCPeerConnection

RTCPeerConnection是WebRTC API中的一个对象,用于建立和管理两个或多个用户之间的实时通信。它允许通过互联网进行音频和视频通话,以及共享数据流。

RTCPeerConnection对象提供了一系列的方法和事件,用于配置、管理和控制媒体流的传输。它支持使用不同的技术,如ICE(Interactive Connectivity Establishment)和STUN(Session Traversal Utilities for NAT)来解决网络地址转换(NAT)问题,以便在防火墙后面的不同设备之间建立连接。

使用RTCPeerConnection对象,您可以创建媒体流并将其发送到其他设备,也可以接收来自其他设备的媒体流。它还支持使用SDP(Session Description Protocol)描述媒体会话的配置,以及通过ICE和STUN协议协商和转发媒体数据包的路由。

const peerInit = stream => {
  // 1. 创建连接实例
  peerA = new RTCPeerConnection()
  // 2. 添加视频流轨道
  stream.getTracks().forEach(track => {
    peerA.addTrack(track, stream)
  })


  // peerA 端
  peerA.onicecandidate = event => {
    if (event.candidate) {
      socketA.send(JSON.stringify({ type: 'candid', data: event.candidate })) // socketA发送数据
    }
  }
  // 检测连接状态
  peerA.onconnectionstatechange = event => {
    if (peerA.connectionState === 'connected') {
      console.log('对等连接成功!')
    }
  }

  // 互换sdp认证
  transSDP()
}

到这里我们发送数据部分就是这样子啦,但是还不行,因为两者通视频,还需要SDP认证,什么是SDP认证呢?

SDP(Session Description Protocol)认证是指通过在SDP协议中添加特定的信息来验证身份或其他属性的方法。SDP协议是一种用于描述多媒体会话的信息协议,它包含了音频、视频等媒体的编码格式、分辨率、网络地址等信息,用于在通话双方之间建立和维护媒体连接。

在SDP认证中,通过在SDP协议中添加特定的信息,如用户名、会议ID等,双方可以互相验证身份。此外,还可以通过在SDP协议中包含数字签名或加密信息等技术来增强认证的安全性。

SDP认证通常用于多媒体通信、视频会议等应用场景中,以确保通信的安全性和可信度。在SDP认证中,需要使用相应的协议或算法来验证SDP信息的来源和完整性,以确认身份或其他属性的合法性。

互换SDP认证

// peerA 端
const transSDP = async () => {
 
  let offer = await peerA.createOffer()
  // 向 peerB 传输 offer
  socketA.send(JSON.stringify({ type: 'offer', data: offer }))
  // 接收 peerB 传来的 answer
  socketA.onmessage = async evt => {
    
    let reader = new FileReader()
    reader.readAsText(evt.data, 'utf-8')
    reader.onload = async function() {
      let { type, data } = JSON.parse(reader.result)
      console.log(JSON.parse(reader.result), 111)
      if (type == 'answer') {
        await peerA.setLocalDescription(offer)
        await peerA.setRemoteDescription(data)
      }
    }
    
  }
}

这就是A客户端的全部代码啦~

放心,全部代码文章末尾会给到.

node服务端socket传输

接下来我们来看看服务端是如何处理的.对了,这里必须说一下,两个socket之间的通信,必须要靠服务端管理,所以这就是为什么一定要学node的原因😂

const WebSocket = require('ws');

// 创建一个 WebSocket 服务器,监听 8080 端口
const wss = new WebSocket.Server({ port: 8000 });

// 当有客户端连接时,创建一个 WebSocket 并将其添加到客户端列表中
wss.on('connection', function connection(ws) {
  console.log('Client connected');

  // 当客户端发送消息时,将消息发送给所有客户端
  ws.on('message', function incoming(message) {
    console.log('Received message:', message.toString('utf8')); // 接受的对象,客户端发送的是字符串,Buffer

    // 将消息发送给所有客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message); // 客户端接受的是blob格式数据
      }
    });
  });

  // 当客户端断开连接时,将其从客户端列表中删除
  ws.on('close', function close() {
    console.log('Client disconnected');
  });
});

服务端用到了ws依赖, 如何区分两个不同的socket客户端, 特别是在同一个服务器下,同一个端口,不同的页面下,我发现必须要给两个socket一个唯一的标识才能做到,所以这期就先出功能,后面再继续补一下ws的源码学习.

不过这里要区分清楚,这是将当前的client客户端发送给处理自己以外的,其他所以socket客户端,发送消息这里,就是一对多的关系哦.

客户端接受视频流

服务端处理完了,就进行下一个客户端如何接受视频流

刚刚的sdp认证,肯定不止止A页面的事情,都说了是认证,那肯定通信双方需要知晓.

这里有一个顺序问题

1.首先是A页面创建offer—createOffer

2.然后是B页面设置远程描述—setRemoteDescription

3.B页面生成发送到A页面的answer—createAnswer

4.B页面设置本地描述—setLocalDescription

5.A页面设置本地描述—setLocalDescription(传参是A页面的offer)

6.A页面设备远程描述–setRemoteDescription(传参是B页面的answer)

只要这上面6步都正常执行,B页面才能接收到A页面的视频流和音频流

const transSDP = async () => {
  // 1. 创建 offer
  let offer = await peerA.createOffer()
  await peerB.setRemoteDescription(offer)
  // 2. 创建 answer
  let answer = await peerB.createAnswer()
  await peerB.setLocalDescription(answer)
  // 3. 发送端设置 SDP
  await peerA.setLocalDescription(offer)
  await peerA.setRemoteDescription(answer)
}

加上socket之后就是这样

不过既然是socket了,所以数据上要做转换处理,接收到的是blob数据

socket实现视频通话-WebRTC,分享,前端,音视频,webrtc

// B接收A的消息
// peerB 端,接收 peerA 传来的 offer
socketB.onmessage = evt => {
  // console.log(evt.data)
  handleBlobToText(evt.data)
}

const handleBlobToText = (blob) => {
  let reader = new FileReader()
  reader.readAsText(blob, 'utf-8') // 接收到的是blob数据,先转成文本
  reader.onload = async function() {
    console.log(reader.result)
    let { type, data } = JSON.parse(reader.result) // 文本转对象
    console.log(JSON.parse(reader.result))
    if (type == 'offer') {
      await peerB.setRemoteDescription(data)
      console.log('2.然后是B页面设置远程描述', new Date().getTime())
      let answer = await peerB.createAnswer()
      console.log('3.B页面生成发送到A页面的answer', new Date().getTime())
      await peerB.setLocalDescription(answer)
      console.log('4.B页面设置本地描述', new Date().getTime())
      // 向 peerA 传输 answer
      socketB.send(JSON.stringify({ type: 'answer', data: answer }))
    }
    if (type == 'candid') {
      peerB.addIceCandidate(data)
    }
  }
}

socketB.onerror = function() {
  console.log('WebSocket error. Ready state:', socketB.readyState);
};

socket实现视频通话-WebRTC,分享,前端,音视频,webrtc

根据时间戳,就能发现这六步的顺序.

将接收到的视频流渲染到B页面的video标签中,这就能接受的A页面的视频流了.

const socketB = new WebSocket('ws://localhost:8000');

const peerB = new RTCPeerConnection()
const videoElB = document.getElementById('elB')

// 监听数据传来
peerB.ontrack = async event => {
  const [remoteStream] = event.streams
  videoElB.srcObject = remoteStream
}

效果

这就是两个页面视频通讯的结果如下:

socket实现视频通话-WebRTC,分享,前端,音视频,webrtc

全部源码已经上传在GitHub上啦~

https://github.com/0522skylar/webRTC-video文章来源地址https://www.toymoban.com/news/detail-773750.html

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

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

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

相关文章

  • WebRTC音视频通话-实现GPUImage视频美颜滤镜效果iOS

    WebRTC音视频通话-实现GPUImage视频美颜滤镜效果 在WebRTC音视频通话的GPUImage美颜效果图如下 可以看下 之前搭建ossrs服务,可以查看:https://blog.csdn.net/gloryFlow/article/details/132257196 之前实现iOS端调用ossrs音视频通话,可以查看:https://blog.csdn.net/gloryFlow/article/details/132262724 之前WebR

    2024年02月12日
    浏览(51)
  • 一小时教你用SpringBoot+WebSocket+WebRTC实现视频通话

    1. 运行结果 SpringBoot+WebSocket+WebRTC实现视频通话 上述运行结果中是有声音(比较小而已)及动的画面的(画面不是静止的)。 网上关于webrtc的文档(文章)和视频也挺多的,但是用SpringBoot结合WebRTC的却屈指可数,前一段时间小编我学习了一下WebRTC的相关知识,于是用SpringBoot+WebRTC实现

    2024年02月10日
    浏览(51)
  • 基于webrtc的音视频通话,实现相机流识别人脸的功能

    这几天研究了一下webRTC的基础能力,在此基础之上能实现的视频通话,互动等更多实用功能。项目中使用的是阿里的rtc,我研究的是声网的是否符合功能,后续会总结和记录一下应用到的几个功能实现方法。 今天要记录的功能是项目流识别人脸的功能,其实类似功能很常见了

    2024年04月28日
    浏览(50)
  • SRS流媒体服务(四)WebRTC实现实时视频通话和低延时互动直播

    CentOS版本号:7.9 SRS版本号:4.0.215 服务器IP:192.168.5.104 注意需要开启端口号:1935、1985、8000(UDP端口)、8080。 注意需要开启服务:http WebRTC是一个由Google发起的实时通讯解决方案,其中包含视频音频采集,编解码,数据传输,音视频展示等功能,我们可以通过技术快速地构

    2024年02月12日
    浏览(65)
  • WebRTC音视频通话-WebRTC本地视频通话使用ossrs服务搭建

    iOS开发-ossrs服务WebRTC本地视频通话服务搭建 之前开发中使用到了ossrs,这里记录一下ossrs支持的WebRTC本地服务搭建。 ossrs是什么呢? SRS(Simple Realtime Server)是一个简单高效的实时视频服务器,支持RTMP、WebRTC、HLS、HTTP-FLV、SRT等多种实时流媒体协议。 官网地址:https://ossrs.net/lt

    2024年02月12日
    浏览(43)
  • WebRTC音视频通话(二)简单音视频通话

    本篇不详细介绍websocket,只针对websocket整合rtc。 webrtc是P2P通信,也就是实际交流的 只有两个人 ,而要建立通信,这两个人需要 交换一些信息来保证通信安全 。而且, webrtc必须通过ssh加密 ,也就是使用https协议、wss协议。 借用一幅图 1.1 创建端点的解析 以下解析不包括we

    2023年04月09日
    浏览(58)
  • Hololens2远程音视频通话与AR远程空间标注,基于OpenXR+MRTK3+WebRTC实现

    下面展示一些 内联代码片 。

    2024年04月10日
    浏览(59)
  • WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机

    WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机 在之前已经实现了WebRTC调用ossrs服务,实现直播视频通话功能。但是在使用过程中,RTCCameraVideoCapturer类提供的方法不能修改及调节相机的灯光等设置,那就需要自定义RTCVideoCapturer自行采集画面了。 iOS端WebRTC调用ossrs相关,实现

    2024年02月12日
    浏览(59)
  • 技术分享| 小程序实现音视频通话

    上一期我们把前期准备工作做完了,这一期就带大家实现音视频通话! 为了更好的区分功能,我分成了六个 js 文件 config.js 音视频与呼叫邀请配置 store.js 实现音视频通话的变量 rtc.js 音视频逻辑封装 live-code.js 微信推拉流状态码 rtm.js 呼叫邀请相关逻辑封装 util.js 其他方法

    2024年02月02日
    浏览(55)
  • WebRTC音视频通话-WebRTC推拉流过程中日志log输出

    WebRTC音视频通话-WebRTC推拉流过程中日志log输出 之前实现iOS端调用ossrs服务实现推拉流流程。 推流:https://blog.csdn.net/gloryFlow/article/details/132262724 拉流:https://blog.csdn.net/gloryFlow/article/details/132417602 在推拉流过程中的WebRTC的相关日志log输出可以看到一些相关描述信息。在WebRTC日志

    2024年02月10日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包