手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致，
首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染，
接著，使用 HTML 的 <canvas> 標簽來截取當前攝像頭的畫面，通過 <canvas> 上的 getContext('2d') 方法來繪制，
最后，使用 canvas.toDataURL() 方法將影像轉換為 base64 格式，可以通過將其保存到本地或發送到服務器來存盤照片，
但是需要注意的是，在手機端，呼叫攝像頭需要在 HTTPS 或 localhost 下訪問，還需要用戶事先進行授權，
且在手機端可能會有些瀏覽器對于getUserMedia有所限制，需要額外兼容性處理，且手機端的實作需要考慮螢屏的方向，在繪制截圖時需要根據不同的螢屏方向調整畫布尺寸，
在手機端，為了讓用戶能夠在頁面中手動切換攝像頭，需要檢測手機端設備是否有多個攝像頭，在有多個攝像頭時，提供給用戶切換攝像頭的選項，
此外，需要進行一些兼容性處理，以便在不同瀏覽器和手機設備上正常作業，同時，需要考慮手機端的互動體驗，例如提供給用戶切換攝像頭和調整照片尺寸的選項，
對于一些高級功能，例如人臉檢測和識別，美顏，以及其他高級影像處理功能可以使用第三方庫，如openCV.js,tracking.js, face-api.js等來實作，
還可以使用框架，如 React Native, Ionic, PhoneGap 等更加輕松地在移動端實作相關功能，
總之，通過使用 MediaDevices API 和 <video> 標簽在手機端實作自定義拍照界面是可行的，但是需要注意的點比桌面端多一些，雖然在手機端實作自定義拍照界面有一定的挑戰，但是通過使用 MediaDevices API 和相關第三方庫，還有經驗豐富的前端工程師在這個問題上是有解決方案的，
一、實作示例框架代碼
<video id="camera" height="480" autoplay></video>
<button id="invoking" onclick="invokingCamera">invoking Camera</button>
<button id="snapshot" onclick="takeSnapshot">Take snapshot</button>使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染
// 呼叫攝像頭
function invokingCamera() {
// 注意本例需要在HTTPS協議網站中運行，新版本Chrome中getUserMedia介面在http下不再支持，
// 老的瀏覽器可能根本沒有實作 mediaDevices，所以我們可以先設定一個空的物件
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些瀏覽器部分支持 mediaDevices，我們不能直接給物件設定 getUserMedia
// 因為這樣可能會覆寫已有的屬性，這里我們只會在沒有getUserMedia屬性的時候添加它，
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的話，就獲得它
const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
// 一些瀏覽器根本沒實作它 - 那么就回傳一個error到promise的reject來保持一個統一的介面
if (!getUserMedia) {
return Promise.reject(new Error(
'getUserMedia is not implemented in this browser'));
}
// 否則，為老的navigator.getUserMedia方法包裹一個Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
// 手機可視區域寬度（請通過相關API獲取真實寬度）
const windowWidth = 375;
// 手機可視區域高度（請通過相關API獲取真實高度）
const windowHeight = 700;
const constraints = {
audio: false,
video: {
// 前置攝像頭
facingMode: 'user',
// 該屬性相當于手機端的高
width: Math.max(windowWidth, windowHeight) - 120, // 減去 120 用于在頁面底部放置拍照等功能按鈕
// 該屬性相當于手機端的寬
height: Math.min(windowWidth, windowHeight),
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
const video = document.querySelector('camera');
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// 防止在新的瀏覽器里使用它，應為它已經不再支持了
video.src = https://www.cnblogs.com/yuzhihui/p/window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name +": " + err.message);
});
}使用 HTML 的 <canvas> 標簽來截取當前攝像頭的畫面，通過 <canvas> 上的 getContext('2d') 方法來繪制
function takeSnapshot() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.querySelector('video');
canvas.width = Math.min(video.videoWidth, video.videoHeight);
canvas.height = Math.max(video.videoWidth, video.videoHeight);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// ****** 鏡像處理 ******
function getPixel(imageData, row, column) {
const uint8ClampedArray = imageData.data;
const width = imageData.width;
const height = imageData.height;
const pixel = [];
for (let i = 0; i < 4; i++) {
pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
}
return pixel;
}
function setPixel(imageData, row, column, pixel) {
const uint8ClampedArray = imageData.data;
const width = imageData.width;
const height = imageData.height;
for (let i = 0; i < 4; i++) {
uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
}
}
const mirrorImageData = https://www.cnblogs.com/yuzhihui/p/ctx.createImageData(canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let h = 0; h < canvas.height; h++) {
for (let w = 0; w < canvas.width; w++) {
const pixel = getPixel(imageData, h, canvas.width - w - 1);
setPixel(mirrorImageData, h, w, pixel);
}
}
ctx.putImageData(mirrorImageData, 0, 0);
// ****** 鏡像處理 ******
const base64 = canvas.toDataURL('image/jpeg');
}最后，使用 canvas.toDataURL() 方法將影像轉換為 base64 格式，可以通過將其保存到本地或發送到服務器來存盤照片
二、具體實作代碼（基于uni-app）
布局代碼：
<template>
<view style="width: 100vw;height: 100vh;background-color: #000;">
<video style="width: 100vw;height:calc(100vh - 240rpx);" object-fit="fill"></video>
<view
style="width: 100vw;height: 100vh;background-color: transparent;opacity: 1;position: absolute;top: 0; left: 0;z-index: 1;">
<view
style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 2;">
<image :src="https://www.cnblogs.com/yuzhihui/p/qjkImgSrc" mode="widthFix" style="width: 600rpx;margin-top: -200rpx;"></image>
</view>
<view
style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 3;">
<image :src="https://www.cnblogs.com/yuzhihui/p/qjtxkImgSrc" mode="widthFix" style="width: 500rpx;margin-top: -200rpx;"></image>
</view>
<view
style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 5;">
<view
style="position: absolute;bottom: 88rpx;left: 68rpx; color: #fff;font-weight: bold;background: #fff;border-radius: 16rpx;">
<uni-icons type="close" :size="32" @click="handlePhotographCloseClick">
</uni-icons>
</view>
<view style="position: absolute;bottom: 40rpx;" @click="handlePhotographClick">
<view >
<view ></view>
</view>
</view>
<view
style="position: absolute;bottom: 88rpx;right: 68rpx; color: #fff;font-weight: bold;background: #fff;border-radius: 16rpx;">
<uni-icons type="folder-add" :size="32" @click="handleAddPhotographClick">
</uni-icons>
</view>
</view>
</view>
</view>
</template>JavaScript 代碼：
export default {
data() {
return {
imageUrl: "",
// 媒體流，用于關閉攝像頭
mediaStreamTrack: null,
};
},
onl oad() {
this.invokingCamera();
},
onUnload() {
this.handlePhotographCloseClick();
},
methods: {
invokingCamera() {
const self = this;
// 注意本例需要在HTTPS協議網站中運行，新版本Chrome中getUserMedia介面在http下不再支持，
// 老的瀏覽器可能根本沒有實作 mediaDevices，所以我們可以先設定一個空的物件
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些瀏覽器部分支持 mediaDevices，我們不能直接給物件設定 getUserMedia
// 因為這樣可能會覆寫已有的屬性，這里我們只會在沒有getUserMedia屬性的時候添加它，
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的話，就獲得它
const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
// 一些瀏覽器根本沒實作它 - 那么就回傳一個error到promise的reject來保持一個統一的介面
if (!getUserMedia) {
return Promise.reject(new Error(
'getUserMedia is not implemented in this browser'));
}
// 否則，為老的navigator.getUserMedia方法包裹一個Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
uni.getSystemInfo({
success: function (res) {
const constraints = {
audio: false,
video: {
// 前置攝像頭
facingMode: 'user',
// 手機端相當于高
width: Math.max(res.windowWidth, res.windowHeight) - 120,
// 手機端相當于寬
height: Math.min(res.windowWidth, res.windowHeight),
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
self.mediaStreamTrack = stream;
const video = document.querySelector('video');
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// 防止在新的瀏覽器里使用它，應為它已經不再支持了
video.src = https://www.cnblogs.com/yuzhihui/p/window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name +": " + err.message);
});
}
});
},
handlePhotographCloseClick() {
if (this.mediaStreamTrack) {
// 關閉攝像頭
this.mediaStreamTrack.getTracks().forEach(function (track) {
track.stop();
});
this.mediaStreamTrack = null;
}
},
handlePhotographClick() {
const self = this;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.querySelector('video');
canvas.width = Math.min(video.videoWidth, video.videoHeight);
canvas.height = Math.max(video.videoWidth, video.videoHeight);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// ****** 鏡像處理 ******
function getPixel(imageData, row, column) {
const uint8ClampedArray = imageData.data;
const width = imageData.width;
const height = imageData.height;
const pixel = [];
for (let i = 0; i < 4; i++) {
pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
}
return pixel;
}
function setPixel(imageData, row, column, pixel) {
const uint8ClampedArray = imageData.data;
const width = imageData.width;
const height = imageData.height;
for (let i = 0; i < 4; i++) {
uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
}
}
const mirrorImageData = https://www.cnblogs.com/yuzhihui/p/ctx.createImageData(canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let h = 0; h < canvas.height; h++) {
for (let w = 0; w < canvas.width; w++) {
const pixel = getPixel(imageData, h, canvas.width - w - 1);
setPixel(mirrorImageData, h, w, pixel);
}
}
ctx.putImageData(mirrorImageData, 0, 0);
// ****** 鏡像處理 ******
self.$nextTick(() => {
const base64 = canvas.toDataURL('image/jpeg');
self.imageUrl = base64;
self.handlePhotographCloseClick();
});
},
handleAddPhotographClick() {
this.uploadImage();
},
uploadImage: function () {
const self = this;
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
success: function (res) {
self.handlePhotographCloseClick();
const file = res.tempFiles[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
self.imageUrl = e.target.result;
}
}
});
},
}
};樣式代碼：
<style scoped>
video {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/* Safari 和 Chrome */
-moz-transform: rotateY(180deg);
}
/deep/ .uni-video-bar {
display: none;
}
/deep/ .uni-video-cover {
display: none;
}
.outer-ring {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
/* background-color: #40ff2e; */
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.middle-ring {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
background-color: #000000;
/* background-color: #fff; */
/* position: absolute;
top: 10rpx;
left: 10rpx; */
display: flex;
justify-content: center;
align-items: center;
}
.inner-ring {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
/* background-color: #009966; */
background-color: #fff;
/* position: relative;
top: 10rpx;
left: 10rpx; */
}
</style>最終效果展示：
出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/541761.html
標籤：HTML5
下一篇：canvas畫板（滑鼠和觸摸）