創建媒體對象

navigator.getUserMedia詳情介紹點擊下面鏈接

MediaDevices.getUserMedia() - Web API 接口 | MDN

//創建媒體對象開啟攝像頭

if (navigator.getUserMedia) {? ?舊版本方法

? ? alert('請調整好攝像頭');

? ? ? ? ? ? navigator.getUserMedia({

? ? ? ? ? ? ? ? video:true,

? ? ? ? ? ? ? ? audio:false

? ? ? ? ? ? },function(strem){

攝像頭成功回調。

? ? ? ? ? ? ? /*? console.log(strem); */

? ? ? ? ? ? ?mediaStreamTrack = stream.getTracks()[0];

? ? ? ? ? ? ? ? video.src = vendorUrl.createObjectURL(strem);

? ? ? ? ? ? ? ? video.play();

? ? ? ? ? ? },function(error){

? ? ? ? ? ? ? ? //error.code

? ? 攝像頭失敗回調。

? alert('攝像頭是否正確安裝');

? ? ? ? ? ? });? ?

? ? ? ? }

? ? ? ? else {

? ? ? ? ? ? alert('瀏覽器不支持攝像頭');

? ? ? ? }

//新版本方法

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

? ? ? ? navigator.mediaDevices.getUserMedia({

? ? ? ? ? ? video: true,

? ? ? ? ? ? audio: true? ? ? ? }).then(function(stream) {

? ? ? ? ? ? console.log(stream);

? ? ? ? ? ? mediaStreamTrack =typeofstream.stop === 'function' ? stream : stream.getTracks()[1];

? ? ? ? ? ? video.src = (window.URL || window.webkitURL).createObjectURL(stream);

? ? ? ? ? ? video.play();

? ? ? ? }).catch(function(err) {

? ? ? ? ? ? console.log(err);

? ? ? ? })

? ? }

與舊版類似，不過該方法返回了一個Promise對象，可以使用then和catch表示成功與失敗的回調

更多參照文檔

點擊拍照

snap.addEventListener('click', function(){

? ? ? ? //繪制canvas圖形

? ? ? ? canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

? ? ? ? //把canvas圖像轉為img圖片

? ? ? ? /* img.src = canvas.toDataURL("image/png"); */

? ? ? /*? alert(canvas.toDataURL("image/png")); */

? ? });

//刪除相機

close.addEventListener('click',function() {

? ? ? ? mediaStreamTrack && mediaStreamTrack.stop();

? ? }, false);

var video = document.getElementById('video'),

canvas = document.getElementById('canvas'),

snap = document.getElementById('savePhotoId'),

img = document.getElementById('img'),

close = document.getElementById('close'),

mediaStreamTrack;

HTML就比較簡單，在下就自己創建咯！