首页 > 软件开发 > HTML >

html5 如何关闭本地摄像头

来源:互联网 2023-03-16 19:12:01 197

html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

工具/原料

  • html5

方法/步骤

  • 1

    打开vsCode,使用vscode 来做代码演示mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 2

    在右上角找到 文件 新建文件mEm办公区 - 实用经验教程分享!

    创建一个html文件mEm办公区 - 实用经验教程分享!

    12Visual Studio Code如何创建一个html文件mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 2本页面未经授权抓取自百度经验
  • 3

    先创建好html文件所必须的 结构mEm办公区 - 实用经验教程分享!

    填入以下的代码mEm办公区 - 实用经验教程分享!

    mEm办公区 - 实用经验教程分享!

    !DOCTYPE html>mEm办公区 - 实用经验教程分享!

    html lang="en">mEm办公区 - 实用经验教程分享!

    head>mEm办公区 - 实用经验教程分享!

    meta charset="UTF-8">mEm办公区 - 实用经验教程分享!

    meta name="viewport" content="width=device-width, initial-scale=1.0">mEm办公区 - 实用经验教程分享!

    meta http-equiv="X-UA-Compatible" content="ie=edge">mEm办公区 - 实用经验教程分享!

    title>Document/title>mEm办公区 - 实用经验教程分享!

    /head>mEm办公区 - 实用经验教程分享!

    body>mEm办公区 - 实用经验教程分享!

    mEm办公区 - 实用经验教程分享!

    /body>mEm办公区 - 实用经验教程分享!

    /html>mEm办公区 - 实用经验教程分享!

    mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 4

    因为要使用摄像头,我们先添加一个 video的标签mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 5

    在html使用摄像头我们需要使用MediaStreammEm办公区 - 实用经验教程分享!

    添加script语句mEm办公区 - 实用经验教程分享!

    mEm办公区 - 实用经验教程分享!

    var constraints = { video: { width: 1280, height: 720 } };mEm办公区 - 实用经验教程分享!

    mEm办公区 - 实用经验教程分享!

    navigator.mediaDevices.getUserMedia(constraints)mEm办公区 - 实用经验教程分享!

    .then(function (mediaStream) {mEm办公区 - 实用经验教程分享!

    var video = document.querySelector('video');mEm办公区 - 实用经验教程分享!

    video.srcObject = mediaStream;mEm办公区 - 实用经验教程分享!

    video.onloadedmetadata = function (e) {mEm办公区 - 实用经验教程分享!

    video.play();mEm办公区 - 实用经验教程分享!

    };mEm办公区 - 实用经验教程分享!

    })mEm办公区 - 实用经验教程分享!

    .catch(function (err)mEm办公区 - 实用经验教程分享!

    { console.log(err.name ": " err.message); });mEm办公区 - 实用经验教程分享!

    mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 6

    保存代码,并在浏览器中运行mEm办公区 - 实用经验教程分享!

    就可以看到摄像头已经打开了mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 7

    现在我们添加一个关闭摄像头的功能mEm办公区 - 实用经验教程分享!

    先添加一个关闭按钮mEm办公区 - 实用经验教程分享!

    button onclick="funClose();">关闭摄像头/button>mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 8

    添加关闭摄像头的逻辑mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 9

    选择关闭摄像头按钮后,mEm办公区 - 实用经验教程分享!

    之前的摄像头区域,就变黑了mEm办公区 - 实用经验教程分享!

    html5 如何关闭本地摄像头mEm办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!mEm办公区 - 实用经验教程分享!


    标签: HTML摄像

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码