[译]WebRTC基础实践 - 9. 拍照并传给对方

栏目: Html5 · 发布时间: 7年前

内容简介：在本节课程中, 我们将学习以下内容:本节的完整版代码位于前面的小节中, 我们使用

本节内容

在本节课程中, 我们将学习以下内容:

拍照并通过canvas元素获取图像数据。
给对面发送图片。

本节的完整版代码位于 step-06 文件夹中。

工作原理

前面的小节中, 我们使用 RTCDataChannel 来传递文本消息。

本节课程, 将学习如何发送文件: 下面的示例发送的是通过 getUserMedia() 捕获的照片文件, 原理都是一样的。

核心内容包括:

getUserMedia()

var video = document.getElementById('video');

function grabWebCamVideo() {
  console.log('Getting user media (video) ...');
  navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(gotStream)
  .catch(function(e) {
    alert('getUserMedia() error: ' + e.name);
  });
}

点击 Snap (拍照)按钮, 会从 video 流中得到一份快照(一帧视频), 并通过 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);
}

点击 Send (发送)按钮, 会将图像转换为字节数组(bytes), 并通过数据通道发送给对方:

function sendPhoto() {
  // 将数据分块的字节数长度;
  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));
  }
}

接收端, 则将收到的字节, 转换为图像, 并展示给用户:

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);
}

实现代码

将 step-06 文件夹下的内容, 复制到 work 目录中。

index.html文件的内容为:

<!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 & 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="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>
</html>

如果没有执行上一节的操作, 需要在 step-06 目录, 或者工作目录下, 安装相应的依赖, 命令如下:

cnpm install

安装完成后, 需要启动 Node.js 服务器, 在 work 目录下执行命令:

node index.js

请确认 index.js 文件的内容中包含了 Socket.IO 相关的内容, 参考前一小节。更多关于Node和Socket.IO的内容, 请参考 7_Set_up_signaling_service.md 。

如果弹出对话框, 请点击 Allow (允许)按钮, 授权使用本地摄像头。

本应用会创建一个随机的房间ID, 并将此ID加入URL中。

然后在一个新的标签或窗口打开同样的URL。

点击 Snap 和 Send 按钮, 然后查看另一个标签页中, 是否显示了传过去的照片。

这个应用主要是实现了在不同标签页/不同窗口之间传输照片。

界面看起来类似这样:

[译]WebRTC基础实践 - 9. 拍照并传给对方

练习与实践

修改代码, 以传输任意类型的文件。

了解更多

MediaStream 图像捕捉API,用于控制相机拍照的API, 让浏览器拍照变得简单易用: https://www.chromestatus.com/features/4843864737185792
MediaRecorder API, 用于录制音频和视频, 相关示例: https://webrtc.github.io/samples/src/content/getusermedia/record/ ; 相关文档: https://www.chromestatus.com/features/5929649028726784 。

内容回顾

拍照并通过canvas元素获取图像数据。
给对面发送图片。

本节的完整版代码位于 step-06 文件夹中。

原文链接: https://codelabs.developers.google.com/codelabs/webrtc-web/#8

翻译人员: 铁锚 - https://blog.csdn.net/renfufei

翻译日期: 2018年08月27日

以上所述就是小编给大家介绍的《[译]WebRTC基础实践 - 9. 拍照并传给对方》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

这就是搜索引擎

张俊林 / 电子工业出版社 / 2012-1-1 / 45.00元

搜索引擎作为互联网发展中至关重要的一种应用，已经成为互联网各个领域的制高点，其重要性不言而喻。搜索引擎领域也是互联网应用中不多见的以核心技术作为其命脉的领域，搜索引擎各个子系统是如何设计的？这成为广大技术人员和搜索引擎优化人员密切关注的内容。本书的最大特点是内容新颖全面而又通俗易懂。对于实际搜索引擎所涉及的各种核心技术都有全面细致的介绍，除了作为搜索系统核心的网络爬虫、索引系统、排序系统、......一起来看看《这就是搜索引擎》这本书的介绍吧!

码农工具