当前位置：网站首页>JS call camera

JS call camera

2022-07-06 16:02:00 【Star age Cao Botao】 

<!doctype html>
<html lang="en">
<head>
    <title>GET VIDEO</title>
    <meta charset="utf-8">
</head>
<body>
<input type="button" title=" Turn on camera " value=" Turn on camera " onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()"> Taking pictures </button>
<script> // get video Camera area  let video = document.getElementById("video"); function getMedia() {
       let constraints = {
       video: {
      width: 500, height: 500}, audio: true }; /*  Here's a new way :H5 New media interface  navigator.mediaDevices.getUserMedia()  This method will prompt the user whether to allow media input ,( Media input mainly includes camera , Video capture devices , Screen sharing service , Microphone ,A/D Converter, etc )  Back to a Promise object .  If the user agrees to use the permission , Will be  MediaStream Object as resolve() The parameters of are passed to then()  If the user denies permission , Or the requested media resource is not available , Will be  PermissionDeniedError As reject() The parameters of are passed to catch() */ let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(function (MediaStream) {
       video.srcObject = MediaStream; video.play(); }).catch(function (PermissionDeniedError) {
       console.log(PermissionDeniedError); }) } function takePhoto() {
       // get Canvas object  let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 500, 500); } </script>
</body>
</html>
原网站

版权声明
本文为[Star age Cao Botao]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207060919407196.html

边栏推荐

猜你喜欢

随机推荐