WEBRTC 01

1.获取本地媒体

'use strict';

const constraints = window.constraints = {
  audio: false,
  video: true
};

function handleSuccess(stream) {
  const video = document.querySelector('video');
  window.stream = stream; 
  video.srcObject = stream;
}

function handleError(error) {
    console.log("error")
}

async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
  } catch (e) {
    handleError(e);
  }
}

document.querySelector('#showVideo').addEventListener('click', e => init(e));
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>webrtcdemo</title>
    </head>
    <body>
        <div>
            <h1>获取网络摄像头</h1>
            <video autoplay playsinline></video>
            <button id="showVideo">Open camera</button>
        </div>
        <script src="./js/main.js"></script>
    </body>
</html>

测试：

 

posted @ 2020-11-25 18:06  启程华夏  阅读(103)  评论(0)  编辑  收藏  举报