照相拍照功能
https://whatwebcando.today/photos.html
function getUserMedia(options, successCallback, failureCallback) {
var api = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (api) {
return api.bind(navigator)(options, successCallback, failureCallback);
}
}
var theStream;
function getStream() {
if (!navigator.getUserMedia && !navigator.webkitGetUserMedia &&
!navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
alert('User Media API not supported.');
return;
}
var constraints = {
video: true
};
getUserMedia(constraints, function (stream) {
var mediaControl = document.querySelector('video');
if ('srcObject' in mediaControl) {
mediaControl.srcObject = stream;
} else if (navigator.mozGetUserMedia) {
mediaControl.mozSrcObject = stream;
} else {
mediaControl.src = (window.URL || window.webkitURL).createObjectURL(stream);
}
theStream = stream;
}, function (err) {
alert('Error: ' + err);
});
}
function takePhoto() {
if (!('ImageCapture' in window)) {
alert('ImageCapture is not available');
return;
}
if (!theStream) {
alert('Grab the video stream first!');
return;
}
var theImageCapturer = new ImageCapture(theStream.getVideoTracks()[0]);
theImageCapturer.takePhoto()
.then(blob => {
var theImageTag = document.getElementById("imageTag");
theImageTag.src = URL.createObjectURL(blob);
})
.catch(err => alert('Error: ' + err));
MediaDevices.getUserMedia undefined 的问题
MediaDevices.getUserMedia只工作于以下三种环境:
-
localhost
域 - 开启了 HTTPS 的域
- 使用
file:///
协议打开的本地文件
如果暂时没有完成https,可以使用以下方法
chrome://flags/#unsafely-treat-insecure-origin-as-secure
--unsafely-treat-insecure-origin-as-secure="http://example.com"