快捷導(dǎo)航

js調(diào)用設(shè)備攝像頭的方法

更新時(shí)間：2018年07月19日 11:35:34 作者：東都花神

這篇文章主要為大家詳細(xì)介紹了js調(diào)用設(shè)備攝像頭的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js調(diào)用設(shè)備攝像頭的具體代碼，供大家參考，具體內(nèi)容如下

使用getUserMedia這個(gè)API來(lái)獲取攝像頭的權(quán)限
兼容chrome和火狐，IOS不兼容

下面是源碼：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
 </head>
 <body>
  <video src=""></video>
  <script type="text/javascript">
   var opt = {
    audio: true,
    video: {
     width: 375,
     height: 603
    }
   };
   navigator.mediaDevices.getUserMedia(opt)
    .then(function(mediaStream) {
     var video = document.querySelector('video');
     video.srcObject = mediaStream;
     video.onloadedmetadata = function(e) {
      video.play();
     };
    })
    .catch(function(err) {
     console.log(err.name + ": " + err.message);
    }); // always check for errors at the end.
  </script>
 </body>
</html>

注意，如果使用chrome查看代碼需要在https協(xié)議下才能生效，建議使用火狐查看。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
攝像頭

相關(guān)文章

JavaScript調(diào)用模式與this關(guān)鍵字綁定的關(guān)系
這篇文章主要介紹了JavaScript調(diào)用模式與this關(guān)鍵字綁定的關(guān)系的相關(guān)資料,需要的朋友可以參考下
2018-04-04
TypeScript接口使用介紹
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)，然后第三方就可以通過(guò)這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法
2022-10-10
JS實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
webpack獨(dú)立打包和緩存處理詳解
這篇文章主要介紹了webpack獨(dú)立打包和緩存處理的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)webpack具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
微信小程序如何實(shí)現(xiàn)在線客服功能
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)在線客服功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
詳解Webpack多環(huán)境代碼打包的方法
這篇文章主要介紹了詳解Webpack多環(huán)境代碼打包的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
TypeScript中的類型斷言[as語(yǔ)法|＜＞語(yǔ)法]的使用
本文主要介紹了TypeScript中的類型斷言[as語(yǔ)法|＜＞語(yǔ)法]的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
JavaScript語(yǔ)句錯(cuò)誤throw、try及catch實(shí)例解析
這篇文章主要介紹了JavaScript語(yǔ)句錯(cuò)誤throw、try及catch實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法示例
這篇文章主要介紹了JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法,結(jié)合實(shí)例形式分析了javascript響應(yīng)手機(jī)端屏幕上touch事件計(jì)算滑動(dòng)距離的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10