整体描述：

通过H5调用视频、频输入输出设备，包括可以调用摄像头拍照，调用音频输入设备录音，调用音频输出设备播放音乐，同时还可以捕捉音频波形。

本插件可在PC或移动端使用，如果是移动端会判断手机方向是否正确，以保证拍摄正向的视频。

请参考：演示页面

注意： 由于安全机制限制，相关组件只能在SSL（https）模式下使用。浏览器的兼容情况请参考 官方文档

调用条件：

下载并复制 jquery.mediaDevice.js 到网站目录，同时也需要事先准备好 jQuery 框架。

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.mediaDevice.js"></script>

包含组件：

本插件包含三个组件：

• camera 组件 ： 摄像头及音频设备调用
• audio 组件 ： 音频波形分析
• fullscreen 组件 ： 全屏设置组件

设置方式：

camera 组件

本组件需要作用于"video"标签，使用方法：

$(videoObj).camera(opt, callback_function);

其中opt可为以下内容（设置参数或指令）

• start 或 对象参数：启动媒体设备，本方法的回调函数可选，传入参数为事件对象，默认启动参数对象如下：

  default_constraints = {
      /**
       * 【音频参数调整】
       * volume            音量调整（范围 0-1.0， 0为静音，1为最大声）
       * sampleRate        采样率 （例 8000）
       * sampleSize        采样大小 （例 16位 2字节）
       * echoCancellation  回音消除 （true/false）
       * autoGainControl   自动增益 （在原有录音的基础上是否增加音量， true/false）
       * noiseSuppression  是否开启降噪功能 （true/false）
       */
      audio: {
          volume: 1,
          sampleRate: 22050,
          sampleSize: 16,
          echoCancellation: true,
          autoGainControl: false,
          noiseSuppression: true,
          channelCount: 2
      },
      /**
       * 【视频参数调整】
       * width        视频宽度
       * height       视频高度
       * aspectRatio  比例（一般可不设置，只设置宽高即可，可用来获取宽高比）
       * frameRate    帧率（可通过帧率设置码流，帧率越高，码流越大，视频越平滑）
       * facingMode   摄像头（PC会忽略，手机端可区分）
       *              user           前置摄像头
       *              environment    后置摄像头
       *              left           前置左侧摄像头
       *              right          前置右侧摄像头
       * resizeMode   采集画面是否裁剪
       *              none           不裁剪
       *              crop-and-scale 裁剪
       */
      video: {
          width: { min: 1024, ideal: 1280, max: 1920 },
          height: { min: 576, ideal: 720, max: 1080 },
          aspectRatio: 1.777777778,   //16:9
          frameRate: {min: 15, ideal: 20, max: 30 },
          facingMode: "user",
          resizeMode: "none"
      },
      /**
       * 【其他参数】
       * latency           延迟大小 （ 延迟小，网络不好的情况下，会卡顿花屏等，好处在于可实时通信，建议200ms）
       *                           （ 延迟大，网络不好的情况下，画面相对更平滑流畅，但即时性较差）
       * channelCount      单/双声道
       * deviceID          多个摄像头或音频输入输出设备时，可进行设备切换（例如切换前后置摄像头）
       * groupID           同一组设备
       */
  };

• close ：关闭当前已启动的媒体设备并调用回调函数（可选），在更换媒体设备时也需要先关闭现有启动设备。

• snap ：截取当前摄像头所拍摄的图片，并将图片base64编码的url传给回调函数。

• record ：开始或停止录制视频，开始录制视频时会直接进入全屏状态，按 ESC 键会退出全屏并停止录像。录像停止后会将摄像事件（含录像内容）传递给回调函数

• enum ：枚举所有可用的媒体设备，并将结果传递给回调函数，本方法使用无需实现启动媒体控件，所返回的设备信息，如下：

  {
      "audioinput": [{
          "deviceId": "98071022b7ed80548ef96d0ba9adbeea3a4159af8db6e956d3cc037f0d5b0e2f",
          "kind": "audioinput",
          "label": "Internal Microphone (Built-in)",
          "groupId": "133c9d98f59b60fa9d6a8bda35c679bc6c5364540f88957a425b3073793978bb"
      }],
      "videoinput": [{
          "deviceId": "bf86e6cab55fb24e1e248677d97b29e3d8bcd52f8a419fe38804d9bd0ddc4e28",
          "kind": "videoinput",
          "label": "FaceTime HD Camera",
          "groupId": "b0798bff15f8df35cee8b5a64cfe7ece7c8d1ada764608f9f1bb1bba9adda326"
      }],
      "audiooutput": [{
          "deviceId": "cab55abf75f9003ffcb35628f76ac60745f5fce880622692e2b0b89e2137b572",
          "kind": "audiooutput",
          "label": "Internal Speakers (Built-in)",
          "groupId": "133c9d98f59b60fa9d6a8bda35c679bc6c5364540f88957a425b3073793978bb"
      }]
  }

• constraints ：返回当前媒体调用参数，具体情况见启动媒体控件

audio 组件

本组件可作用于任意标签，如为audio标签，将在audio标签下添加波形图，如非audio标签，则会自动调用audio控件，并在调用标签下插入波形对象，使用方法：

$(obj).audio(opt);

其中opt为配置参数，设置如下：

{
    device_id : 'audio input device id',  //音频输入设备ID，可通过枚举方式获取，如不设置则选用默认设备
    file : 'path/to/music',  //音乐文件地址，如未设置则自动调用麦克风
    func : 'wave_function' //用于绘制波形的函数，默认有effect_1，effect_2 和 effect_3
}

波形绘制函数 ：本函数可由用户自定义，包含四个参数，分别是：data（音频数据）, canvas（画板对象）, width（画板宽）, height（画板高）

fullscreen 组件

本组件用于设置浏览器或任意支持全屏属性的对象，多对非全屏对象模拟全屏效果，使用方法：

$(obj).fullscreen(opt);

其中opt可为以下内容

• run：启动全屏
• exit：退出全屏
• check：检测全屏状态
• 留空：切换全屏状态
• 其他：返回当前全屏对象