[WebRTC 01]通过浏览器访问摄像头

一、前言

音视频技术发展到今天，已经是比较成熟了，H264/H、VP8/VP9、以及AV1编解码器，解决了，音视频压缩率的问题；而5G技术的商用，解决了带宽问题。2011年Google推出WebRTC技术后，又大大降低了音视频技术的门槛。有了WebRTC开发人员不需要自己去实现回音消除、编解码器，更不用考虑跨平台的问题了。WebRTC可以在浏览器上快速开发出音视频应用，随着WebRTC1.0规范的推出，目前主流浏览器chrome 、Firefox 、Safari等都支持了WebRTC库。通过Javascript就可以访问电脑上的音视频设备。

二、demo

下面展示一个demo，我支持了HTTPS，先安装了nginx,配置了开启SSL，证书可以在阿里云或者腾讯云申请，前提是你有买域名，因为我没有买，所以是自己生成的，SSL的key和crt可以使用openssl生成证书。不用nginx直接在浏览器打开文件也是可以的。

注意：如果开启采集音频之后，html的video元素必须加上muted，设置静音，不然声音很恐怖，大半夜打开仿佛闹鬼了。

1、环境配置

1）生成证书：sudo openssl req -x509 -nodes -days 36500 -newkey rsa:2048 -keyout /usr/local/etc/nginx/nginx.key -out /usr/local/etc/nginx/nginx.crt

2）配置nginx开启SSL:

 server {
        listen       80;
        server_name  org.lj.dev.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /Users/leijing/webRTC;
            index  index.html index.htm;
        }

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

 server {
       listen 443 ssl;
        ssl_certificate /usr/local/etc/nginx/nginx.crt;
        ssl_certificate_key /usr/local/etc/nginx/nginx.key;
        server_name  org.lj.dev.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /Users/leijing/webRTC;
            index  index.html index.htm;
        }

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

}

3）配置hosts

127.0.0.1 org.lj.dev.com

2、代码

1）demo项目目录结构

 2）demo.html

    
    


online chatroom

3）demo.js

/**
 * Created by leijing on 2019/7/26.
 */
'use strict';
const localVideo = document.getElementById("player");
var myPlayer = {
    mediaStreamContrains:{
        //video:true,
        video:{
            facingMode:"environment" //user前置摄像头 environment后置摄像头 left 前置左侧摄像头 right前置右侧摄像头
        },
        audio:true,
        width:640,//视频宽度
        height:480,//视频高度
        aspectRatio:1.333333333333333333,//视频宽度/高度
        resizeMode:"none",//是否允许调整图像大小
        echoCancellation:true,//自动开启回音消除
        autoGainControl:true,//是否开启自动增益
        noiseSuppression:true//是否开启降噪
    },
    initMediaStream:function() {
        navigator.mediaDevices.getUserMedia(this.mediaStreamContrains)
            .then(this.setSrc)
            .catch(this.handleError);
    },
    setSrc: function (mediaStream) {
        localVideo.srcObject  = mediaStream;
    },
    handleError: function (e) {
        console.log("handleError error,"+e);
    }
};
myPlayer.initMediaStream();

css为空，就不展示了

3、浏览器中运行效果