鍓嶈█鍓嶄簺澶╋紝绾夸笂绗旇瘯鐨勬椂鍊欙紝鍙戠幇闇€瑕佹祻瑙堝櫒鍚屾剰寮€鍚憚鍍忓ご锛屾劅瑙夊儚鏄?js 璋冪敤鐨勶紝鐢变簬褰撴椂绗旇瘯锛屼篃灏辨病鎯冲埌杩欎箞澶氿煠ｃ€備粖澶╅棽鏉ユ棤浜嬶紝鐪嬩簡涓嬭嚜宸辩殑 todo锛屽彂鐜版湁杩欎釜璋冪敤鎽勫儚澶寸殑todo锛屾墠鎯冲埌馃槀銆傜綉涓婃煡浜嗕竴涓嬶紝鏋滅劧 js 鏈夎皟鐢ㄦ憚鍍忓ご鐨?api锛屼负姝よ嚜宸卞啓涓€涓?demo 锛岄伩鍏嶅繕璁般€傛鏂囪皟鐢ㄦ憚鍍忓ご涓€鍏辨湁涓ょ瀹炵幇鏂瑰紡锛屼竴绉嶆槸浣跨敤navigator.getUserMedia锛堣鐗规€у凡缁忎粠 Web 鏍囧噯涓垹闄わ紝铏界劧涓€浜涙祻瑙堝櫒鐩墠浠嶇劧鏀寔瀹冿紝浣嗕篃璁镐細鍦ㄦ湭鏉ョ殑鏌愪釜鏃堕棿鍋滄鏀寔锛岃灏介噺涓嶈浣跨敤璇ョ壒鎬э級锛屽墠闈竴绉嶅凡缁忎粠 Web 鏍囧噯涓垹闄わ紝浠呬负浜嗗悜鍚庡吋瀹硅€屽瓨鍦紝绗簩绉嶆槸浣跨敤navigator.mediaDevices.getUserMedia(鎺ㄨ崘浣跨敤),杩欎袱绉嶆柟娉?Safari 璨屼技閮戒笉鏀寔銆傘€傘€傘€傜涓€绉嶆柟娉昻avigator.getUserMedia鐢ㄦ硶璇﹁ mdn 锛屼唬鐮佸涓嬶細<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>鎽勫儚澶磋皟鐢?</title></head><body> <video id="v"></video> <script> !(function () { function userMedia() { return navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || null; } if (userMedia()) { var constraints = { video: true, audio: false }; var media = navigator.getUserMedia(constraints, function (stream) { var v = document.getElementById('v'); var url = window.URL || window.webkitURL; v.src = url ? url.createObjectURL(stream) : stream; v.play(); }, function (error) { console.log("ERROR"); console.log(error); }); } else { console.log("涓嶆敮鎸?); } })(); </script></body></html>绗簩绉嶆柟娉昻avigator.mediaDevices.getUserMedia鐢ㄦ硶璇﹁mdn銆俷avigator.mediaDevices.getUserMedia 鍏跺疄鍜岀涓€绉嶅樊涓嶅锛屼富瑕佺浜岀杩斿洖鏄竴涓?Promise 瀵硅薄锛屼唬鐮佸涓嬶細<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>鎽勫儚澶磋皟鐢?</title></head><body> <video id="v"></video> <script> !(function () { // 鑰佺殑娴忚鍣ㄥ彲鑳芥牴鏈病鏈夊疄鐜?mediaDevices锛屾墍浠ユ垜浠彲浠ュ厛璁剧疆涓€涓┖鐨勫璞? if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 棣栧厛锛屽鏋滄湁getUserMedia鐨勮瘽锛屽氨鑾峰緱瀹? var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // 涓€浜涙祻瑙堝櫒鏍规湰娌″疄鐜板畠 - 閭ｄ箞灏辫繑鍥炰竴涓猠rror鍒皃romise鐨剅eject鏉ヤ繚鎸佷竴涓粺涓€鐨勬帴鍙? if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } // 鍚﹀垯锛屼负鑰佺殑navigator.getUserMedia鏂规硶鍖呰９涓€涓狿romise return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } const constraints = { video: true, audio: false }; let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(stream => { let v = document.getElementById('v'); // 鏃х殑娴忚鍣ㄥ彲鑳芥病鏈塻rcObject if ("srcObject" in v) { v.srcObject = stream; } else { // 闃叉鍐嶆柊鐨勬祻瑙堝櫒閲屼娇鐢ㄥ畠锛屽簲涓哄畠宸茬粡涓嶅啀鏀寔浜? v.src = window.URL.createObjectURL(stream); } v.onloadedmetadata = function (e) { v.play(); }; }).catch(err => { console.error(err.name + ": " + err.message); }) })(); </script></body></html>鎷嶇収鎬濊矾鏄缃竴涓爣蹇楀彉閲?videoPlaying 鐪嬬湅鏄惁 video 鏈夊湪 play锛岀洃鍚媿鐓ф寜閽殑鐐瑰嚮浜嬩欢锛屽鏋渧ideoPlaying 涓?true 锛屼娇鐢ㄤ竴涓猚anvas 鑾峰彇 video 鐨勫楂橈紙榛樿 canvas 鏄笉鏄剧ず鐨勶級锛岀劧鍚庝娇鐢?canvas 鐨刣rawImage,鐒跺悗浣跨敤 canvas 鐨?toDataURL杩斿洖涓€涓?data url锛屽皢杩欎釜 url锛岃缃湪涓€涓?img 鏍囩涓婂嵆鍙煒€绗竴绉嶆柟娉昻avigator.getUserMedia瀹炵幇浠ｇ爜锛?lt;!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>鎷嶇収1</title></head><body> <button id="take">鎷嶇収</button> <br /> <video id="v" style="width: 640px;height: 480px;"></video> <canvas id="canvas" style="display:none;"></canvas> <br /> <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo"> <script> !(function () { function userMedia() { return navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || null; } if (userMedia()) { let videoPlaying = false; let constraints = { video: true, audio: false }; let video = document.getElementById('v'); let media = navigator.getUserMedia(constraints, function (stream) { let url = window.URL || window.webkitURL; video.src = url ? url.createObjectURL(stream) : stream; video.play(); videoPlaying = true; }, function (error) { console.log("ERROR"); console.log(error); }); document.getElementById('take').addEventListener('click', function () { if (videoPlaying) { let canvas = document.getElementById('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); let data = canvas.toDataURL('image/webp'); document.getElementById('photo').setAttribute('src', data); } }, false); } else { console.log("涓嶆敮鎸?); } })(); </script></body></html>绗簩绉峮avigator.mediaDevices.getUserMedia瀹炵幇鏂规硶:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>鎷嶇収2</title></head><body> <button id="take">鎷嶇収</button> <br /> <video id="v" style="width: 640px;height: 480px;"></video> <canvas id="canvas" style="display:none;"></canvas> <br /> <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo"> <script> !(function () { // 鑰佺殑娴忚鍣ㄥ彲鑳芥牴鏈病鏈夊疄鐜?mediaDevices锛屾墍浠ユ垜浠彲浠ュ厛璁剧疆涓€涓┖鐨勫璞? if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 棣栧厛锛屽鏋滄湁getUserMedia鐨勮瘽锛屽氨鑾峰緱瀹? var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // 涓€浜涙祻瑙堝櫒鏍规湰娌″疄鐜板畠 - 閭ｄ箞灏辫繑鍥炰竴涓猠rror鍒皃romise鐨剅eject鏉ヤ繚鎸佷竴涓粺涓€鐨勬帴鍙? if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } // 鍚﹀垯锛屼负鑰佺殑navigator.getUserMedia鏂规硶鍖呰９涓€涓狿romise return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } const constraints = { video: true, audio: false }; let videoPlaying = false; let v = document.getElementById('v'); let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(stream => { // 鏃х殑娴忚鍣ㄥ彲鑳芥病鏈塻rcObject if ("srcObject" in v) { v.srcObject = stream; } else { // 闃叉鍐嶆柊鐨勬祻瑙堝櫒閲屼娇鐢ㄥ畠锛屽簲涓哄畠宸茬粡涓嶅啀鏀寔浜? v.src = window.URL.createObjectURL(stream); } v.onloadedmetadata = function (e) { v.play(); videoPlaying = true; }; }).catch(err => { console.error(err.name + ": " + err.message); }) document.getElementById('take').addEventListener('click', function () { if (videoPlaying) { let canvas = document.getElementById('canvas'); canvas.width = v.videoWidth; canvas.height = v.videoHeight; canvas.getContext('2d').drawImage(v, 0, 0); let data = canvas.toDataURL('image/webp'); document.getElementById('photo').setAttribute('src', data); } }, false); })(); </script></body></html>
