WebRTC系列(1)-手把手教你实现一个浏览器拍照室Demo

时间 2019-11-20

原文原文链接

1.WebRTC开发背景javascript

　　因为业务需求，须要在项目中实现实时音视频通话功能，以前基于浏览器开发的Web项目要进行音视频通话，须要安装flash插件才能实现或者使用C/S客户端进行通讯。随着互联网技术的驱动下，在不少场景下须要进行音视频通讯，在生活中咱们如今使用电话愈来愈少，使用微信和视频愈来愈多。在一些行业也须要进行音视频实时通讯，如：在线教育，远程医疗，保险理赔等等。有了WebRTC，能够开发一些好的网页应用，使得音视频通话愈来愈简单，无需安装任何插件，只需打开网页，就能实现音视频通话，方然也能实现消息收发，文件收发等等，下面，根据本身平时的项目开发与，对WebRTC就行一个简单的理解与概述，最终实现一个简单的拍照室Demo。html

2.WebRTC历史和概述前端

　　WebRTC是“网络实时通讯”（Web Real Time Communication）的缩写。它最初是为了解决浏览器上视频通话而提出的，即两个浏览器之间直接进行视频和音频的通讯，不通过服务器。后来发展到除了音频和视频，还能够传输文字和其余数据。2010年5月，Google以6820万美圆收购VoIP软件开发商Global IP Solutions的GIPS引擎，并改成名为“WebRTC”。WebRTC使用GIPS引擎，实现了基于网页的视频会议，并支持722，PCM，ILBC，ISAC等编码，同时使用谷歌自家的VP8视频解码器；同时支持RTP/SRTP传输等。Google是WebRTC的主要支持者和开发者，它推进了WebRTC标准的确立。java

　　WebRTC是一门年轻的技术，从2011推出到2017年，一直发展的不温不火。根据一段时间的开发，我的认为主要缘由有：各个浏览器的支持兼容程度和在互联网环境下点对点可以链接的成功率。从2017年苹果公司宣布iOS11的Safari浏览器支持WebRTC，一些云通讯产品例如腾讯云通讯和网易云通讯也是基于WebRTC上进行封装二次开发，也间接的说明了WebRTC发展会愈来愈好。web

3.基本概念的了解canvas

　　为了简化开发，WebRTC在浏览器中API集成了大量的技术，解决了一些繁重的问题，如捕捉摄像头和麦克风，处理音视频流，传输层等等。api

捕捉摄像头和麦克风

　　创建通讯平台第一步要检测用户设备的摄像头和麦克风权限，先检测设备的可用性，而后在获取用户受权并与设备创建链接，最后获取一段数据流。浏览器

音频与视频的编解码

　　在互联网要发送一段音视频数据，技术优化了网络数据，数据尺寸也仍是很大，因此要对数据在发送端编码，而后在接收端解码。WebRTC内置的几种编解码器包括：H.264,Opcus,iSAC,VP8。做为前端开发的我，最这些编解码技术固然不是很了解。幸运的是，当两个浏览器回话时，会综合两端状况选择最优的编解码器。安全

传输层

　　主要处理数据丢包，数据包排序以及创建用户之间的链接问题服务器

会话管理

　　一般来讲就是信令（Signaling），负责在浏览器中创建并管理多个链接。

4.获取用户媒体

　　建立一个基于WebRTC的通讯平台，首先要经过用户的网络摄像头和麦克风获取实时的视频和音频流，能够经过调用浏览器的getUserMedia API来实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取媒体流</title>
</head>
<body>
<div id="app">
  <h1>获取媒体流</h1>
  <video autoplay></video>
</div>
<script>
  function hasUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
  }

  if (hasUserMedia()) {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getUserMedia({video: true, audio: false}, function (stream) {
      console.log(stream);
      var video = document.querySelector('video');
      video.src=window.URL.createObjectURL(stream);
    }, function (err) {
      console.log(err);
    });
  } else {
    alert("Sorry, your browser does not support getUserMedia.");
  }
</script>
</body>
</html>

是否打开使用摄像头权限

　　注意：打开摄像头后获取到的视频流展现在Video标签中，video标签须要加上autoplay属性视频才能够播放，在调试中能够把getUserMedia方法参数中的audio设置为：false，避免杂音太大，同理，把video设置为false只能听到本身说话而没有画面，能够代替普通电话使用。

5.限制视频流

　　咱们能够经过设置参数来控制视频和音频是否使用，除此以外，咱们能够传入一个对象作更复杂的限制，如分辨率，视频宽高比等等。

navigator.getUserMedia({video: {
        width: 320,
        /*height:240,*/
        aspectRatio:1.77
      }, audio: false}, function (stream) {
      console.log(stream);
      var video = document.querySelector('video');
      video.src=window.URL.createObjectURL(stream);
    }, function (err) {
      console.log(err);
    });

能够根据本身业务需求来设置固定的宽高或分辨率等等。

6.完成一个拍照室Demo

　　经过调用摄像头获取到的视频流以及H5的canvas标签咱们能够完成一个简易的拍照功能。

增长一个拍照按钮以及一个canvas,修改后的整个页面代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取媒体流</title>
</head>
<body>
<div id="app">
  <h1>获取媒体流</h1>
  <video id="video" autoplay></video>
  <button type="button" onclick="capture()">点击拍照</button>
  <canvas id="canvas" width="320" height="240"></canvas>
</div>
<script>
  function hasUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
  }

  if (hasUserMedia()) {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getUserMedia({video: {
        width: 320,
        height:240,
      }, audio: false}, function (stream) {
      console.log(stream);
      var video = document.querySelector('video');
      video.src=window.URL.createObjectURL(stream);
    }, function (err) {
      console.log(err);
    });
  } else {
    alert("Sorry, your browser does not support getUserMedia.");
  }

  function capture(){
    console.log('capture...');
    var cxt=document.getElementById('canvas').getContext('2d');
    var video=document.getElementById('video');
    cxt.drawImage(video,0,0);
  }
</script>
</body>
</html>

如今单击一个点击拍照按钮，能够捕捉视频的某一帧并同时绘制到canvas上，加上canvas功能原本就很强大，后期对照片的旋转，剪裁，滤镜也都是能够实现的。

延伸：如今不少WebApp上要实时上传证件功能，咱们经过这种WebRTC+canvas也是能够实现的，并且是浏览器直接调的硬件拍照，有没有很溜。

7.开发中遇到的问题

　　在直接用http打开本地服务器页面是调用不了摄像头的，浏览器的限制认为http下是不安全的，可是能够用127.0.0.1或者localhost来代替本机ip。网页部署到服务器时也得使用https协议来返回页面，不然，没法调用摄像头。

　　以上简单的介绍了WebRTC的发展历史以及一些基本概念，让你们对其有个初步的了解，最后经过调用摄像头完成一个拍照室的Demo。后续文章再详细的写如何经过WebRTC来实现点对点通讯，相信WebRTC功能会愈来愈强大，这只是第一步。

参考资料：

《Learning WebRTC 中文版》　

《JavaScript 标准参考教程（alpha）阮一峰》

WebRTC百科

转载请注明出处，谢谢。