H5實現呼叫本地攝像頭實現實時視訊以及拍照功能

阿新 • • 發佈：2019-01-16

getUserMedia API

HTML 5 的getUserMedia API提供了訪問媒體的能力, 基於該特性, 開發者可以不依賴任何瀏覽器外掛下去訪問視訊和音訊等裝置.

舊版API : navigator.getUserMedia
新版API : navigator.mediaDevices.getUserMedia

舊版語法:

getUserMedia(constraints, successCallback, errorCallback);

新版語法:

getUserMedia(constraints).then(successCallback).catch(errorCallback)

引數 constraints, 請求的媒體型別, 主要包含video和audio, 例如請求不帶任何引數的視訊和音訊: {video: true, audio: true}
也可指定視訊解析度, 程式碼如下: {video: {width: 640, height: 360}}
移動裝置上, 可指定使用前置攝像頭, 程式碼如下: {video: {facingMode: 'user'}}
或者使用後置攝像頭, 程式碼如下: {video: {facingMode: {exact : 'environment'}}}
成功回撥函式successCallback的引數stream, 為MediaStream物件, 表示媒體流, 可以通過URL.createObjectURL

(馬上廢棄)轉換後設置為Video或Audio元素的src屬性來使用, 也可以直接使用srcObject屬性來使用.
失敗回撥函式為errorCallback

例子程式碼

<!DOCTYPE html>
<html lang="en">
<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>攝像頭拍照</title>
</head>
<body>
  <video id="video" width="480" height="320" controls>
  </video>
  <div>
    <button id="capture">拍照</button>
  </div>
  <canvas id="canvas" width="480" height="320"></canvas>
  <script>
    //訪問使用者媒體裝置的相容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的標準API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心瀏覽器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox瀏覽器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //舊版API
        navigator.getUserMedia(constraints, success, error);
      }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
      //相容webkit核心瀏覽器
      let CompatibleURL = window.URL || window.webkitURL;
      //將視訊流設定為video元素的源
      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }

    function error(error) {
      console.log(`訪問使用者媒體裝置失敗${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //呼叫使用者媒體裝置, 訪問攝像頭
      getUserMedia({video : {width: 480, height: 320}}, success, error);
    } else {
      alert('不支援訪問使用者媒體');
    }

    document.getElementById('capture').addEventListener('click', function () {
      context.drawImage(video, 0, 0, 480, 320);      
    })
  </script>
</body>
</html>

轉載來源：http://blog.csdn.net/c_kite/article/details/78536451

H5實現呼叫本地攝像頭實現實時視訊以及拍照功能

getUserMedia API HTML 5 的getUserMedia API提供了訪問媒體的能力, 基於該特性, 開發者可以不依賴任何瀏覽器外掛下去訪問視訊和音訊等裝置. 舊版API : navigator.getUserMedia 新版API : navi

java呼叫本地攝像頭，實現人臉識別

package com.lw.test; import java.awt.Graphics; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.awt.imag

input type=“file” 在移動端H5頁面實現呼叫本地相簿、拍照、錄音

<input type="file" accept="image/*" mutiple="mutiple" capture="camera" /> 三個屬性： accept - 規定可提交的檔案型別。 capture - 系統所捕獲的預設裝置。camera(照相機)，camc

如何實現網上實時視訊直播的功能

　　問：在比賽現場、慶典活動現場的實時直播，如何在攝像機錄影的同時在旁邊不遠的大螢幕直播出去，最好能順便採集錄影?如何實現網上視訊直播的功能，就像NBA比賽的視訊直播? 　　答：正規的方法是使用直播車，車中有切換臺。攝像機無線傳輸視訊訊號，經過切換後由直播車無線傳送。這個估計你們搞不了。如果非要這樣的

H5呼叫本地攝像頭拍攝照片

前言最近專案中需要H5呼叫本地攝像頭拍照的需求。程式碼 <canvas id="canvasCemara" width="500" height="500"></canvas

H5呼叫本地攝像頭

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text

python 簡單照相機呼叫系統攝像頭實現 pygame

# -*- coding: utf-8 -*- from VideoCapture import Device import time import pygame from p

在chrome中，呼叫本地攝像頭

原文地址：https://blog.csdn.net/journey191/article/details/40744015 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head

Opencv+Python3在WIN10環境下呼叫電腦攝像頭並儲存視訊

測試環境：win10 Python-3.7.1 opencv-3.4.2 話不多說，直接上程式碼： # 匯入opencv和numpy的庫檔案 import cv2 import numpy as np # VideoCapture()用來捕獲視訊裝置的ID，device = 0表示只有一個

H5技術調取本地攝像頭

Html5呼叫本地攝像頭

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #c

呼叫本地攝像頭進行拍照

jsp介面程式碼 <div class="col-lg-4 col-md-4 col-sm-4 form-group " > <input type="button" value="拍照" id="saveBtn" onclick="savePh

雙攝像頭的實時視訊拼接及目標跟蹤（二）

視訊拼接演算法視訊拼接思想及總體框圖影象拼接是視訊拼接的基礎，是將多張影象生成一張全景圖，衡量的指標主要在於全景圖的質量，而對拼接速度的要求並不高。對於視訊拼接而言，視訊流的輸入是源源不斷的，需要將多個攝像頭採集的圖片進行拼接，每個攝像頭的影象幀序列必須一一

雙攝像頭的實時視訊拼接及目標跟蹤（三）

實時視訊拼接初步視訊拼接虛影問題的探討經過上述方案處理之後的初步拼接視訊，將會存在目前視訊拼接技術中一個普遍的問題，即重合區域存在運動物體產生虛影。效果圖如下，產生偽影的影象幀可以看到，重疊區域內，存在運動物體時，出現了虛影，並且都

雙攝像頭的實時視訊拼接及目標跟蹤（五）

實時視訊拼接速度的優化方案優化方案，提高拼接速度根據之前章節的方法，進行初步視訊拼接得到的效果，其速度並不是最快，需要進行一定的優化。通過實驗，得到下面幾種優化方式。 1.程式碼執行的環境是在VS2017上執行的，其中有兩種執行模式，分別為Debug模式和R

C# 實現呼叫百度翻譯API做一個翻譯功能

appId 和 passWord 需要到百度翻譯開放平臺申請 using System; using System.Net; using System.Web.Security; using System.Web.Script.Serialization; n

android進階4step2：Android音視訊處理——拍照功能實現及應用

Camera有哪幾種使用場景? 呼叫系統相機使用Camera API 使用Camera大致的流程 1、呼叫系統的相機實現拍照/儲存/顯示 AndroidManifest.xml中寫上需要的許可權注意：android6.0之後需要動態申請許可權 &

JS呼叫本地攝像頭拍照（相容各大瀏覽器及IE8+）

最近做的專案遇到了個難題，使用video+canvas+getUserMedia()寫的呼叫本地攝像頭拍照不相容IE。原因：IE8及以下不支援HTML5標籤：video和canvas；IE11及以下所有版本，包括Edge都不支援getUserMedia()。

呼叫USB攝像頭，實時進行HOG人體識別

網上找到了一款人體識別的程式碼。環境：在XP、VS2010、OpenCV3.1.0 硬體：CPU是 Intel Core 2 DUo CPU E7300 @2.66GHz。2G記憶體。USB攝像頭一卡一卡的。不過只是用於人員闖入，並提示。打算將這個程式打包成函式，直

利用html5呼叫本地攝像頭拍照上傳圖片

H5實現呼叫本地攝像頭實現實時視訊以及拍照功能

例子程式碼

相關推薦