master

分支 (3)

标签 (7)

管理

管理

master

fix-uncall-callback

feat-plugin

1.2.1

1.2.0

1.1.0

1.0.2

1.0.0

0.0.3

0.0.2

xmedia
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="initial-scale=1.0" />
  <title>Vite App</title>

  <style>
    * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    body {
      font-size: 16px;
      min-height: 100vh;
    }

    button {
      line-height: 2.4;
      cursor: pointer
    }

    button+button {
      margin-left: 10px;
    }

    #app div+div {
      margin-top: 20px;
    }

    #app {
      padding: 16px;
    }

    .take-photo-btn {
      position: fixed;
      width: 60px;
      height: 60px;
      border-radius: 100%;
      left: calc(50vw - 30px);
      bottom: 30px;
      background-color: blueviolet;
      color: #fff;
      border: none;
      padding: 0;
      z-index: 1001;
    }

    .take-photo-btn:after {
      content: "";
      display: block;
    }

    #img {
      max-width: 100%;
    }

    #tapaudio {
      width: 100%;
      line-height: 42px;
      font-size: 16px;
      border: none;
      border: none;
    }

    #tapaudio.active {
      background-color: green;
      color: #fff;
    }

    .take-btn {
      position: fixed;
      width: 68px;
      height: 68px;
      border-radius: 100%;
      left: calc(50vw - 30px);
      bottom: 30px;
      background-color: #000;
      border: 2px solid #fff;
      color: #fff;
      padding: 0;
      z-index: 1010;
    }

    .take-btn>div {
      width: 60px;
      height: 60px;
      margin: 4px;
      border-radius: 100%;
      background-color: #fff;
      padding: 0;
      z-index: 1010;
    }

    #media-guide {
      position: relative;
      margin: 100px auto 0;
      width: 94vw;
      height: calc(94vw * 0.75);
      border: 1px solid #fff;
      border-radius: 4px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, .6);
      z-index: 1005;
    }

    .scanner-box .box {
      width: 100%;
      height: 100%;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
    }

    .scanner-box .line {
      height: calc(100% - 2px);
      width: 100%;
      background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #fff 211%);
      border-bottom: 3px solid #ddd;
      transform: translateY(-100%);
      animation: radar-beam 2s infinite;
      animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
      animation-delay: 1.4s;
    }

    @keyframes radar-beam {
      0% {
        transform: translateY(-100%);
      }

      100% {
        transform: translateY(0);
      }
    }

    .bottom-btns {
      width: 100vw;
      display: flex;
      align-items: center;
    }

    .bottom-btns>div {
      width: 33.33%;
      text-align: center;
      flex: 1;
    }

    .bottom-btns>div:first-child {
      text-align: left;
      padding-left: 16px;
    }

    .bottom-btns>div:last-child {
      text-align: right;
      padding-right: 16px;
    }

    .bottom-btns button {
      padding: 0;
      margin: 0;
      border: none;
      font-size: 16px;
      background-color: transparent;
    }

    .xmedia-back-btn {
      width: 100%;
      text-align: left;
      color: var(--xmedia-cancel-color, #999);
    }

    .xmedia-file-btn {
      width: 100%;
      text-align: right;
      color: var(--xmedia-confirm-color, #0074D9);
    }

    .xmedia-take-btn {
      width: 62px;
      height: 62px;
      margin: 0 auto;
      border-radius: 100%;
      background-color: #000;
      border: 4px solid #fff;
      padding: 0;
      box-sizing: content-box;
      overflow: hidden;
    }

    .xmedia-take-btn>span {
      display: block;
      width: 58px;
      height: 58px;
      margin: 2px;
      border-radius: 100%;
      background-color: #fff;
      padding: 0;
      z-index: 1010;
    }
  </style>
  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
    // 接下来即可照常使用 `console` 等方法
    console.log('Hello world');

    // 结束调试后，可移除掉
    vConsole.destroy();
  </script>
  <script crossorgin="anonymous" src="https://wxtest.guosen.com.cn/asset/eruda.min.js"></script>
  <script>
    eruda.init()
  </script>
  <script crossorgin="anonymous" src="http://172.24.154.32:8080/h5/pagespy/index.min.js"></script>
  <script>
    new PageSpy();
  </script>
  <!--app-head-->
</head>

<body>
  <div id="app">

    <button onclick="location.reload()">刷新</button>
    <div>
      <button type="button" id="takeface">前置拍照</button>
      <button type="button" id="takefacef">前置拍照(支持文件)</button>
      <button type="button" id="takeidcard">拍证件</button>
      <button type="button" id="takeidcardScan">拍证件scan</button>
      <button type="button" id="takephoto">后置拍照</button>
      <button type="button" id="inputfile">input拍照</button>
      <button type="button" id="hmbtn">鸿蒙官方示例</button>
    </div>
    <div class="">
      <div>
        <button type="button" id="openaudio">请求录音权限</button>
        <button type="button" id="startaudio">点击开始录音</button>
        <button type="button" id="stopaudio">点击停止录音</button>
      </div>
      <div>
        <button type="button" id="tapaudio">长按录音</button>
      </div>
      <div>
        <audio id="audio" src="" controls />
      </div>

    </div>

    <div><a
        href="https://wxtest.guosen.com.cn/gxzq/openaccount/prompt_multi.html?qrcode=1702983064220&UsrInf=">旧版普通开户</a>
    </div>
    <div><a href="https://wxtest.guosen.com.cn/gxzq/openaccount/prompt.jsp?qrcode=1689559547486">新版普通开户</a></div>
    <div><a href="https://lizhilicai.guosen.com.cn/asset/outco/dist/demo.html?v=1223121#/file">视频认证调试入口</a></div>
    <div>
      <img id="img" src="" alt="">
    </div>
  </div>


  <div id="hm" style="display: none;">
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
  </div>


  <!-- 身份证拍摄引导示意 -->
  <!-- <div class="idcard-guide-container" v-show="showGuide">
    <div class="idcard-guide-tip text-center">将身份证<span class="s-warning">人像面</span>对准取景框</div>
    <div id="idcard-guide" class="idcard-guide" :class="{'face': takeingType == 1,'gh': takeingType == 2}">
      <div class="angle"></div>
    </div>
    <div class="idcard-take-tip text-center">
      无法拍摄身份证，点此<button class="sub-take-btn" hover-class="button-hover" @click="subTakeIdcard">调整拍摄方式</button>
    </div>
  </div> -->

  <script type="module" src="./dist/xmedia.umd.js?v=23523"></script>

  <script>

    function testWebsocket(url, callback) {
      if (!WebSocket) callback(false)
      var wsClient = new WebSocket(url);
      wsClient.binaryType = 'arraybuffer';
      wsClient.onopen = function () {
        callback(true)
        wsClient.close();
      };
      wsClient.onerror = function (e) {
        console.error(e);
        callback(false)
      };
    }

    function isSupportWebRTC(callback, tryOpen) {

      var url = 'wss://dgvs.guosen.com.cn/';
      var tryOpen = (tryOpen === undefined ? true : tryOpen)
      var result = {
        error_no: 0,
        error_info: '支持'
      }
      var ua = navigator.userAgent.toLowerCase()
      function isSafari() {
        if (
          ua.indexOf('applewebkit') > -1 &&
          ua.indexOf('mobile') > -1 &&
          ua.indexOf('safari') > -1 &&
          ua.indexOf('linux') === -1 &&
          ua.indexOf('android') === -1 &&
          ua.indexOf('chrome') === -1 &&
          ua.indexOf('ios') === -1 &&
          ua.indexOf('browser') === -1
        ) {
          return true
        }
        return false
      }

      function getSafariVersion() {
        var verinfo = ua.match(/os [\d._]*/gi)
        var version = (verinfo + '').replace(/[^0-9|_.]/gi, '').replace(/_/gi, '.')
        return version
      }

      function isExistWebRTCObject() {
        var RTCPeerConnection =
          window.RTCPeerConnection ||
          window.mozRTCPeerConnection ||
          window.webkitRTCPeerConnection ||
          ''
        var isSupportWebRTC = true
        try {
          new RTCPeerConnection(null)
          isSupportWebRTC = !!navigator.mediaDevices
        } catch (e) {
          console.error(e)
          isSupportWebRTC = false
        }
        return isSupportWebRTC
      }

      function compareVersion(v1, v2) {
        if (v1 == v2) {
          return 0
        }
        var vs1 = v1.split('.')
        var vs2 = v2.split('.')
        var length = Math.min(vs1.length, vs2.length)
        for (var i = 0; i < length; i++) {
          if (parseInt(vs1[i]) > parseInt(vs2[i])) {
            return 1
          } else if (parseInt(vs1[i]) < parseInt(vs2[i])) {
            return -1
          }
        }
        if (length == vs1.length) {
          return -1
        } else {
          return 1
        }
      }
      testWebsocket(url, function (flag) {
        if(!flag){
          console.info("不支持WebSocket链接")
        }
        if (flag) {
          console.info("WebSocket环境检测通过...")
          if (ua.indexOf('iphone') > -1) {
            if (compareVersion(getSafariVersion(), '14.3.0') >= 0) {
            } else {
              result = {
                error_no: 3,
                error_info: 'ios系统版本低于14.3'
              }
            }
            callback(result)
          } else {
            if (!isExistWebRTCObject()) {
              result = {
                error_no: 1,
                error_info: '不支持RTCPeerConnection'
              }
              callback(result)
            } else {
              console.info("ios系统版本不低于低于14.3检测通过...")
              console.info("RTCPeerConnection环境检测通过...")
              if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                // 增加一个参数，配置是否要尝试打开摄像头，tryOpen
                navigator.mediaDevices
                    .getUserMedia({ video: true, audio: true })
                    .then(stream => {
                      stream.getTracks().forEach(function (track) {
                        track.stop()
                      })
                      console.info("getUserMedia调起摄像头环境检测通过...")
                      callback(result)
                    })
                    .catch(e => {
                      console.error(e)
                      console.error(e.code, e.message)
                      callback({
                        error_no: 4,
                        error_info: '无法通过getUserMedia打开摄像头'
                      })
                    })
              }
            }
          }
        } else {
          callback({
            error_no: 5,
            error_info: '不支持websocket'
          })
        }
      })
    }
    console.info("开始webrtc环境检测...")
    isSupportWebRTC(function (res) {
      console.log("webRTC支持情况：" + res.error_info);
      console.info("webrtc环境检测结束")
    })
  </script>
  <script>
    document.querySelector("#takeface").onclick = function () {
      xmedia.startTakeFace({
        targetId: '#img',
        defaultOri: 3,
        needCompress: true,
        success: function (data) {
          console.info('success...')
          console.info(data);
        },
        fail: function (err) {
          console.info('fail...')
          console.error(err)
        }
      }).then(() => {
        // console.info('摄像头准备就绪...')
      })
    }

    document.querySelector("#takefacef").onclick = function () {
      xmedia.startTakeFace({
        targetId: '#img',
        tips: '温馨提示:请确保人脸完整',
        supportFile: true,
        defaultOri: 8,
        capture: 'camera',
        needRotate: true,
        fileBtnText: '调整拍摄方式',
        needCompress: true,
        success: function (data) {
          console.info('success...')
          console.info(data);
        },
        fail: function (err) {
          console.info('fail...')
          console.error(err)
        }
      }).then(() => {
        // console.info('摄像头准备就绪...')
      })
    }


    document.querySelector("#takephoto").onclick = function () {
      xmedia.startTakePhoto({
        targetId: '#img',
        needCompress: true,
        success: function (data) {
          console.info('success...')
          console.info(data);
        },
        fail: function (err) {
          console.info('fail...')
          console.error(err)
        }
      }).then(() => {
        console.info('摄像头准备就绪...')
      }).catch(err => {
        console.info('startTakePhoto error')
        console.error(err)
      })
    }
    document.querySelector("#takeidcard").onclick = function () {
      xmedia.startTakePhoto({
        targetId: '#img',
        withGuide: true,
        needCompress: false,
        success: function (data) {
          console.info('success...')
          console.info(data);
        },
        fail: function (err) {
          console.info('fail...')
          console.error(err)
        }
      }).then(() => {
        console.info('摄像头准备就绪...')
        setTimeout(function () {
          console.info('步骤摄像头内容....')
          xmedia.capture(false)
        }, 2000)
      })
    }


    document.querySelector("#takeidcardScan").onclick = function () {
      xmedia.startTakePhoto({
        targetId: '#img',
        withGuide: true,
        scanEffect: true,
        needCompress: false,
        success: function (data) {
          console.info('success...')
          console.info(data);
        },
        fail: function (err) {
          console.info('fail...')
          console.error(err)
        }
      }).then(() => {
        console.info('摄像头准备就绪...')
        setTimeout(function () {
          console.info('步骤摄像头内容....')
          xmedia.capture(false)
        }, 2000)
      })
    }

    document.querySelector("#openaudio").onclick = function () {
      xmedia.openAudio().then(() => {
        console.info('麦克风成功授权..')
      })
    }

    document.querySelector("#startaudio").onclick = function () {
      xmedia.startAudioRecord({
        success: function (blob) {
          console.info('结束录音...')
          console.info(blob)
          const audioURL = URL.createObjectURL(blob);
          document.querySelector("audio").src = audioURL;
        },
        fail: function (err) {
          console.info('fail...')
          console.error(err)
        }
      })
    }

    document.querySelector("#stopaudio").onclick = function () {
      xmedia.stopAudioRecord()
    }

    document.querySelector("#tapaudio").ontouchstart = function (e) {
      e.preventDefault();
      window.timer && clearTimeout(window.timer);
      window.timer = setTimeout(function () {
        xmedia.startAudioRecord({
          success: function (blob) {
            console.info('结束录音...')
            console.info(blob)
            const audioURL = URL.createObjectURL(blob);
            document.querySelector("audio").src = audioURL;
          },
          fail: function (err) {
            console.info('fail...')
            console.error(err)
          }
        })
        document.querySelector("#tapaudio").className = 'active';
      }, 500)
    }

    document.querySelector("#tapaudio").ontouchend = function (e) {
      e.preventDefault();
      xmedia.stopAudioRecord();
      clearTimeout(window.timer);
      document.querySelector("#tapaudio").className = '';
    }
    document.querySelector("#inputfile").onclick = function (e) {
      xmedia.inputFile("image", "", function (res) {
        console.info(res)
      })
    }

    document.querySelector("#hmbtn").onclick = function(e){
      let constraints = {
        // video: {width: 500, height: 500},
        video: {
          facingMode: "environment"
        },
        // video: {
        //   deviceId: 'default',
        //   facingMode: "user"
        // },
        // video: true,
        audio: false
      };

      console.info(constraints)
      //获取video摄像头区域
      let video = document.getElementById("video");
      //返回的Promise对象
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      //then()异步，调用MediaStream对象作为参数
      promise.then(function (MediaStream) {

        const mediastreams = MediaStream.getTracks();
        if(mediastreams.length) {
            let s = mediastreams[0];
            let enabled = s.enabled;
            let kind = s.kind;
            let label = s.label;
            let readyState = s.readyState;
            console.info(`media label:${label},kind:${kind},enabled:${enabled},readyState:${readyState}`);
        }

        video.srcObject = MediaStream;
        video.play();
        document.querySelector("#hm").style.display = "block";
      });
    }

  </script>
</body>

</html>