WebRTC实时通信系列教程9 数据通道图片传输

最新推荐文章于 2022-01-18 15:39:33 发布
最新推荐文章于 2022-01-18 15:39:33 发布
阅读量5.9k 收藏 7
点赞数
分类专栏： 【前端开发】 # WebRTC协议 【通信协议】 文章标签： WebRTC 图片传输

【转载请注明出处: http://blog.csdn.net/leytton/article/details/76838194】

 PS：如果本文对您有帮助，请点个赞让我知道哦~微笑

《WebRTC实时通信系列教程》翻译自《Real time communication with WebRTC》

示例代码下载http://download.csdn.net/detail/leytton/9923708

WebRTC实时通信系列教程1 介绍

WebRTC实时通信系列教程2 概述

WebRTC实时通信系列教程3 获取示例代码

WebRTC实时通信系列教程4 从摄像头获取视频流

WebRTC实时通信系列教程5 RTCPeerConnection传输视频

WebRTC实时通信系列教程6 使用RTCDataChannel传输数据

WebRTC实时通信系列教程7 使用Socket.IO搭建信令服务器交换信息

WebRTC实时通信系列教程8 打通P2P连接和信令通信

WebRTC实时通信系列教程9 数据通道图片传输

WebRTC实时通信系列教程10 恭喜完成本系列课程


一、译文

1、你将学到

  • 拍照并通过canvas标签获取图片数据.
  • 与远程用户交换图片数据.

完整示例代码在 step-06 目录下.

2、工作原理

前面你学习了如何使用 RTCDataChannel 交换文本消息.

这一节将讲解如何传输整个文件: 案例中通过 getUserMedia() 获取图片.

核心步骤如下:

  1. 建立数据通道. 此节中你不需要添加媒体流到P2P连接之中.
  2. 使用 getUserMedia() 获取取用户摄像头视频流:
var video = document.getElementById('video');

function grabWebCamVideo() {
  console.log('Getting user media (video) ...');
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true
  })
  .then(gotStream)
  .catch(function(e) {
    alert('getUserMedia() error: ' + e.name);
  });
}
  1. 当用户点击 Snap(拍照) 按钮, 从视频流获取一张快照 (一个视频帧)并在canvas 标签显示:
var photo = document.getElementById('photo');
var photoContext = photo.getContext('2d');

function snapPhoto() {
  photoContext.drawImage(video, 0, 0, photo.width, photo.height);
  show(photo, sendBtn);
}
  1. 当用户点击 Send(发送) 按钮, 将图片转换成字节并通过数据通道发送:
function sendPhoto() {
  // Split data channel message in chunks of this byte length.
  var CHUNK_LEN = 64000;
  var img = photoContext.getImageData(0, 0, photoContextW, photoContextH),
    len = img.data.byteLength,
    n = len / CHUNK_LEN | 0;

  console.log('Sending a total of ' + len + ' byte(s)');
  dataChannel.send(len);

  // split the photo and send in chunks of about 64KB
  for (var i = 0; i < n; i++) {
    var start = i * CHUNK_LEN,
      end = (i + 1) * CHUNK_LEN;
    console.log(start + ' - ' + (end - 1));
    dataChannel.send(img.data.subarray(start, end));
  }

  // send the reminder, if any
  if (len % CHUNK_LEN) {
    console.log('last ' + len % CHUNK_LEN + ' byte(s)');
    dataChannel.send(img.data.subarray(n * CHUNK_LEN));
  }
}
  1. 接收端将接收到的信息字节转换成图片并展示:
function receiveDataChromeFactory() {
  var buf, count;

  return function onmessage(event) {
    if (typeof event.data === 'string') {
      buf = window.buf = new Uint8ClampedArray(parseInt(event.data));
      count = 0;
      console.log('Expecting a total of ' + buf.byteLength + ' bytes');
      return;
    }

    var data = new Uint8ClampedArray(event.data);
    buf.set(data, count);

    count += data.byteLength;
    console.log('count: ' + count);

    if (count === buf.byteLength) {
      // we're done: all data chunks have been received
      console.log('Done. Rendering photo.');
      renderPhoto(buf);
    }
  };
}

function renderPhoto(data) {
  var canvas = document.createElement('canvas');
  canvas.width = photoContextW;
  canvas.height = photoContextH;
  canvas.classList.add('incomingPhoto');
  // trail is the element holding the incoming images
  trail.insertBefore(canvas, trail.firstChild);

  var context = canvas.getContext('2d');
  var img = context.createImageData(photoContextW, photoContextH);
  img.data.set(data);
  context.putImageData(img, 0, 0);
}

3、获取代码

将step-06 中的index.html 文件替换掉 work 目录里的:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <h2>
    <span>Room URL: </span><span id="url">...</span>
  </h2>

  <div id="videoCanvas">
    <video id="camera" autoplay></video>
    <canvas id="photo"></canvas>
  </div>

  <div id="buttons">
    <button id="snap">Snap</button><span> then </span><button id="send">Send</button>
    <span> or </span>
    <button id="snapAndSend">Snap &amp; Send</button>
  </div>

  <div id="incoming">
    <h2>Incoming photos</h2>
    <div id="trail"></div>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="js/lib/adapter.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

在 work 目录下使用以下命令行运行Node服务器:

node index.js

(确保你使用的的 index.js 文件中是上一节中实现了Socket.IO的代码.)

如果需要浏览器允许网页调用摄像头.

应用将会创建一个随机房间ID并将其添加到URL. 在新标签中打开这个URL.

点击 Snap & Send 按钮，查看另一个标签中页面下方的接收区域.

你将会看到如下所示:


4、拓展

  1. 如何修改代码让其支持传输任何类型的文件?

5、更多资料


二、原文

摘自https://codelabs.developers.google.com/codelabs/webrtc-web/#8


9. Take a photo and share it via a data channel

What you'll learn

In this step you'll learn how to:

  • Take a photo and get the data from it using the canvas element.
  • Exchange image data with a remote user.

A complete version of this step is in the step-06 folder.

How it works

Previously you learned how to exchange text messages using RTCDataChannel.

This step makes it possible to share entire files: in this example, photos captured via getUserMedia().

The core parts of this step are as follows:

  1. Establish a data channel. Note that you don't add any media streams to the peer connection in this step.
  2. Capture the user's webcam video stream with getUserMedia():
var video = document.getElementById('video');

function grabWebCamVideo() {
  console.log('Getting user media (video) ...');
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true
  })
  .then(gotStream)
  .catch(function(e) {
    alert('getUserMedia() error: ' + e.name);
  });
}
  1. When the user clicks the Snap button, get a snapshot (a video frame) from the video stream and display it in acanvas element:
var photo = document.getElementById('photo');
var photoContext = photo.getContext('2d');

function snapPhoto() {
  photoContext.drawImage(video, 0, 0, photo.width, photo.height);
  show(photo, sendBtn);
}
  1. When the user clicks the Send button, convert the image to bytes and send them via a data channel:
function sendPhoto() {
  // Split data channel message in chunks of this byte length.
  var CHUNK_LEN = 64000;
  var img = photoContext.getImageData(0, 0, photoContextW, photoContextH),
    len = img.data.byteLength,
    n = len / CHUNK_LEN | 0;

  console.log('Sending a total of ' + len + ' byte(s)');
  dataChannel.send(len);

  // split the photo and send in chunks of about 64KB
  for (var i = 0; i < n; i++) {
    var start = i * CHUNK_LEN,
      end = (i + 1) * CHUNK_LEN;
    console.log(start + ' - ' + (end - 1));
    dataChannel.send(img.data.subarray(start, end));
  }

  // send the reminder, if any
  if (len % CHUNK_LEN) {
    console.log('last ' + len % CHUNK_LEN + ' byte(s)');
    dataChannel.send(img.data.subarray(n * CHUNK_LEN));
  }
}
  1. The receiving side converts data channel message bytes back to an image and displays the image to the user:
function receiveDataChromeFactory() {
  var buf, count;

  return function onmessage(event) {
    if (typeof event.data === 'string') {
      buf = window.buf = new Uint8ClampedArray(parseInt(event.data));
      count = 0;
      console.log('Expecting a total of ' + buf.byteLength + ' bytes');
      return;
    }

    var data = new Uint8ClampedArray(event.data);
    buf.set(data, count);

    count += data.byteLength;
    console.log('count: ' + count);

    if (count === buf.byteLength) {
      // we're done: all data chunks have been received
      console.log('Done. Rendering photo.');
      renderPhoto(buf);
    }
  };
}

function renderPhoto(data) {
  var canvas = document.createElement('canvas');
  canvas.width = photoContextW;
  canvas.height = photoContextH;
  canvas.classList.add('incomingPhoto');
  // trail is the element holding the incoming images
  trail.insertBefore(canvas, trail.firstChild);

  var context = canvas.getContext('2d');
  var img = context.createImageData(photoContextW, photoContextH);
  img.data.set(data);
  context.putImageData(img, 0, 0);
}

Get the code

Replace the contents of your work folder with the contents of step-06. Your index.html file in work should now look like this:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <h2>
    <span>Room URL: </span><span id="url">...</span>
  </h2>

  <div id="videoCanvas">
    <video id="camera" autoplay></video>
    <canvas id="photo"></canvas>
  </div>

  <div id="buttons">
    <button id="snap">Snap</button><span> then </span><button id="send">Send</button>
    <span> or </span>
    <button id="snapAndSend">Snap &amp; Send</button>
  </div>

  <div id="incoming">
    <h2>Incoming photos</h2>
    <div id="trail"></div>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="js/lib/adapter.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

If your Node server is not running, start it by calling the following command from your work directory:

node index.js

(Make sure you're using the version of index.js that implements Socket.IO — and remember to restart your Node server if you make changes.)

If necessary, click on the Allow button to allow the app to use your webcam.

The app will create a random room ID and add that ID to the URL. Open the URL from the address bar in a new browser tab or window.

Click the Snap & Send button and then look at the Incoming area in the other tab at the bottom of the page. The app transfers photos between tabs.

You should see something like this:


Bonus points

  1. How can you change the code to make it possible to share any file type?

Find out more

What you learned

  • How to take a photo and get the data from it using the canvas element.
  • How to exchange that data with a remote user.

A complete version of this step is in the step-06 folder.



李乾文
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的WebRTC视频语音和数据通道
08-10
简单的WebRTC视频语音和数据通道
WebRTC：实现实时通信的现代技术
最新发布
你若盛开，清风自来
06-01 820
本文将介绍WebRTC的概念、优势和应用场景，以及如何在实际项目中使用WebRTC实现实时通信。WebRTC是一种现代技术，它允许网页浏览器之间进行实时通信。了解WebRTC的概念、优势和应用场景对于开发者来说具有重要意义。掌握WebRTC的使用可以帮助我们更高效地实现实时通信功能，提高用户体验和互动性。
webrtc 框架_使用我们的新WebRTC框架，通过浏览器流式传输高质量的实时图形
culiao6493的博客
09-17 939
webrtc 框架Now you can develop applications that take advantage of Unity’s rapidly advancing graphics capabilities without being constrained by device performance. Our new open-source WebRTC library for...
WebRTC从摄像头获取图片传入canvas
铁手渔夫
12-29 297
前面我们已经能够利用WebRTC的功能，通过浏览器打开摄像头，并把预览的图像显示在video元素中。 接下来我们尝试从视频中截取某一帧，显示在界面上。 html 先准备一下界面，摆上控件。下面是关键部分的代码。 <video playsinline autoplay></video> <button id="showVideo">打开摄像头</button> <button id="takeSnapshot">截取</button> &
WebRTC零基础开发者教程
07-22
1. **架构与组件**：WebRTC由一系列组件构成，如RTCPeerConnection（负责建立和维护两端之间的媒体流连接）、RTCDataChannel（用于传输任意类型的数据）和MediaStream（处理音频和视频源）等。它们共同协作，确保了...
webrtc教程(v3.0)
07-03
5. **WebRTC组件**：教程可能涵盖WebRTC的主要组件，如PeerConnection用于建立两端连接，MediaStream API处理音频和视频流，DataChannel用于传输任意数据。还会涉及如何在JavaScript中使用这些API进行实际应用开发。...
webrtc-web
02-22
2. **数据通道**：通过RTCDataChannel，WebRTC允许开发者在浏览器之间交换任意类型的数据，无论是文本、图像还是大型文件，都可实时传输。 3. **对等连接（Peer-to-Peer）**：WebRTC支持P2P通信模式，直接在用户...
基于webrtc native开发的音视频工具.zip
05-29
6. **数据通道**：理解RTCDataChannel，它是WebRTC中用于双向传输任意数据的通道，可以用于实现文件传输、实时聊天等功能。 7. **安全性**：了解WebRTC的安全特性，如DTLS（Datagram Transport Layer Security）...
Go-gfile是一个基于WebRTC的文件直接传输软件
08-14
gfile是一个基于WebRTC的文件直接传输软件
webrtc_ros:使用WebRTC流式传输ROS图像主题
05-06
webrtc_ros 使用WebRTC流式传输ROS图像主题 该节点提供了一个WebRTC对等方，可以将其配置为流ROS图像主题并接收发布到ROS图像主题的流。 该节点托管一个提供简单测试页面的Web服务器，并提供可用于创建和配置WebRTC对等方的Websocket服务器。 有关完整文档，请参见 。 该项目是努力的一部分而发布。 执照 webrtc_ros与BSD许可证一起发布。 有关完整的条款和条件，请参阅文件。 作者 有关贡献者的完整列表，请参见文件。
com.webrtc.web.zip
09-03
WebRTC（Web Real-Time Communication）是一项开放的技术标准，旨在实现浏览器之间的实时通信，无需插件或额外的应用程序。这个“com.webrtc.web.zip”压缩包包含的是一系列针对WebRTC技术的实践教程代码，以及一个...
WebRTC中文版
10-31
第七篇至第九篇进一步细化了RTCPeerConnection的相关状态枚举、ICE服务器交互和IANA注册，这些都是确保WebRTC通信稳定、安全和标准化的重要元素。 第十篇提供了一个简单的JavaScript示例，帮助开发者理解如何在实际...
webrtc-learning:WebRTC学习计划
04-03
4. **数据通道**：除了音视频通信外，WebRTC还支持双向数据传输，可以用于P2P文件分享或其他应用。 5. **媒体交换**：通过SDP（Session Description Protocol）协商，实现两端媒体流的直接传输，避免服务器压力。 ...
【WebRTC---入门篇】（十二）WebRTC传输协议
用可见的方式来记录和分享每一次收获
09-28 1599
浏览器协议栈（左图传统HTTP 右图WebRTC） RTP/SRTP RTP是未加密的数据，SRTP是加密后的数据。 RTP协议 对于同一帧进行分包/组包处理的时候，seq number是连续的,timestamp是同一时间戳，H264内部有起始位和结束位。 RTCP/SRTCP RTCP用来控制RTP的传输，出现丢包，抖动，延迟等通过RTCP上报并且计算。 RTP端口多为偶数 在WebRTC需要进行NAT穿越,如果是多个窗口的话。RTP和RTCP可能....
webRTC之 DataChannel 文件传输
点滴
11-05 4517
前面介绍了 webrtc 音视频流的通信， 根据自己粗浅的理解简单介绍了下， 今天花了点时间看了下DataChannel， 如何通过rtc发送文件，开始的步骤还是一样的 通过websocket 把 offer answer icecandidate 点对点建立 这次的主要提下 createDataChannel 本地端创建 sendChannel = local.createDataChan...
Windows远程桌面实现之十三：浏览器客户端使用WebRTC传输，以及WebRTC和MSE渲染显示（一）
fanxiushu的专栏
01-18 3453
by fanxiushu 2022-01-17 转载或引用请注明原始作者。 在前面阐述windows远程桌面实现的一系列文中，其实主要阐述的内容是如何采集桌面图像和电脑声音为主， 包括windows下的各种采集方式，linux平台，macOS平台，iOS平台， 所以基本上70%-80%的内容，都是跟”采集“相关的， 而对网络传输，讲述的内容比较少， 也就是在第六章，提到xdisp_virt的新版本框架的时候，提到了网络通信框架。Windows远程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值