1. 前端 h5手機端視頻錄制
ios系統要使用input 調用本地攝像，下面是調起錄像的。
<input type="file" name="video" id="video-input" accept="video#zs#" capture="user" onchange="videoChange()" />
2. html5或者JS怎樣調用手機攝像頭或者相冊
你給的網頁用的是 <input accept="image/*" type="file">，在IOS端點擊時會提示選擇圖片或相機，安卓端要看瀏覽器對這兩個屬性的優化，部分瀏覽器會直接跳轉到資源管理器，優化做得好的可以直接提示選擇相冊或相機。
3. 用.net做的電子相冊可以查看和管理
查看基本前端來實現，這樣的插件很多，google一大堆，相冊管理就後台的增刪改，這很簡單
4. 前端使用input選擇圖片（多張）僅提供思路
1.首先前端用input調用android相冊，不能選擇多張圖，需要Android原生調用選擇圖片界面（非系統相冊），可以選擇PictureSelector框架。
在build.gradle中引入
// glide載入圖片
implementation 'com.github.LuckSiege.PictureSelector:picture_library:v2.2.3'
//glide版本慎用，高版本會導致閃退，具體參考github上的文件
implementation'com.github.bumptech.glide:glide:4.5.0'
2.在叢則webview中使用（可以直接調用相機setselectorPhoto）
3.選擇照帆鄭冊片後得到數據
4.最後轉化uri數組給前端（方法直接復制）
/*2.得到文件地址傳遞態宏前端*/
@SuppressWarnings("null")
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void onActivityResultAboveL(int requestCode,int resultCode, Intent data) {
if (requestCode != PictureConfig.CHOOSE_REQUEST
||mUploadCallbackAboveL ==null) {
return;
}
Uri[] results =null;
Uri uriData =null;
ArrayList uridatas =new ArrayList<>();
if (resultCode == Activity.RESULT_OK) {
if (data ==null) {
results =new Uri[]{imageUri};
}else {
// 3。得到文件地址集合
selectList = PictureSelector.obtainMultipleResult(data);
// 4。遍歷轉化uri，添加到uri集合
for (int i =0; i
uriData = Uri.fromFile(new File(selectList.get(i).getPath()));
uridatas.add(i, uriData);
}
// 5.uri集合轉數組
results = (Uri[]) uridatas.toArray(new Uri[selectList.size()]);
}
if (results !=null) {
// 6.上傳前端
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL =null;
}else {
results =new Uri[]{imageUri};
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL =null;
}
}else {
mUploadCallbackAboveL.onReceiveValue(null);
}
mUploadCallbackAboveL =null;
}
5. H5前端調用攝像頭拍照
就需求本身而言，若是交給Native同事去蔽野開發，就是一個自定義相機的功能。可能要看怎麼阻止系統拍攝照片後不進手機系統相冊。
對於此需求若是前端來實現的話，也可以實現。大概就是調起攝像頭後，獲取當前畫面，然後截取當前幀的畫面，轉換成圖片保存。基本步驟如下：
【 思路問題不大，但是實際這樣開發時，還會有以下幾個問題： 】
1. 交互神禪體驗不好
window.navigator.mediaDevices.getUserMedia瀏覽器BOM api時，需要用戶手動點擊確認，允許打開攝像頭。游並塵交互體驗不太好。
2. 畫面畫質問題
前端實現本質上和截圖差不多，畫面質量沒有原生拍照效果好。
3. 瀏覽器API mediaDevices為undefined問題
window.navigator.mediaDevices在非以下三種情況下時，會為undefined，所以當為非https的域或者非本地localhost域，則都無法使用。
a. localhost 域
b. 開啟了 HTTPS 的域
c. 使用 file:/// 協議打開的本地文件
【若想在http下也可使用，怎麼辦？？？】
通過設置chrome瀏覽器，開啟相應flag可以實現。
a.. chrome瀏覽器輸入 chrome://flags/#unsafely-treat-insecure-origin-as-secure
b. 將該 flag 切換成 enable 狀態
c. 輸入框中填寫需要開啟的域名，譬如example.com，多個以逗號分隔
6. 前端大屏項目自適應(個人筆記)
仔細觀察 網易有數 ， 網路suger ，他們都採用了css3的縮放transform: scale(X)屬性，看到這是不是有種豁然開朗的感覺。
於是我們只要監聽瀏覽器的窗口大小，然後控制變化的比例就好了。
以React的寫法為例
監聽window的resize事件最好加個節流函數debounce
然後一個簡單的組件就封裝好了
樣式文件index.less
只要把頁面放在這個組件中，就能實現跟大廠們類似的效果。這種方式下不管屏幕有多大，解析度有多高，只要屏幕的比例跟你定的比例一致，都能呈現出完美效果。而且開發過程中，樣式的單位也可以直接用px，省去了轉換的煩惱~~~
最後附上npm鏈接： https://www.npmjs.com/package/react-scale-box
7. 如何在wordpress文章頁裡面添加排列整齊的相冊功能
這個其實可以直接使用WordPress默認的媒體庫功能，然後創建相冊迅仿即可，只是這個需要你所使用的團陪WordPress主題前端CSS的一個美化，你看看截圖，是不是塌昌蠢這樣的效果呢！
8. web前端開發技術DIV+CSS頁面布局 5行5列怎麼弄
簡單寫了個例子，你看看就明白了，代碼如下：
<html>
<head>
<meta charset="utf-8"/>
<title>用戶指南 - 裝企</title>
</head>
<body>
<div class="row">
<div class="col">1-1</div>
<div class="col">1-2</div>
<div class="col">1-3</div>
<div class="col">1-4</div>
<div class="col">1-5</div>
</div>
<div class="row">
<div class="col">2-1</div>
<div class="col">2-2</div>
<div class="col">2-3</div>
<div class="col">2-4</div>
<div class="col">2-5</div>
</div>
<div class="row">
<div class="col">3-1</div>
<div class="col">3-2</div>
<div class="col">3-3</div>
<div class="col">3-4</div>
<div class="col">3-5</div>
</div>
<div class="row">
<div class="col">4-1</div>
<div class="col">4-2</div>
<div class="col">4-3</div>
<div class="col">4-4</div>
<div class="col">4-5</div>
</div>
<div class="row">
<div class="col">5-1</div>
<div class="col">5-2</div>
<div class="col">5-3</div>
<div class="col">5-4</div>
<div class="col">5-5</div>
</div>
<style type="text/css">
*{padding: 0;margin: 0;}
.row{width: 1000px;display: flex;margin: 0 auto;}
.row:nth-child(1){background: red;}
.row:nth-child(2){background: dodgerblue;}
.row:nth-child(3){background: yellowgreen;}
.row:nth-child(4){background: grey;}
.row:nth-child(5){background: blueviolet;}
.col{width: 200px;height: 50px;line-height: 50px;border: 1px solid #ffffff;text-align: center;}
</style>
</body>
</html>
效果如下：
demo
9. 如何將QQ相冊的新相放置放面
設為封面還是放到前端???
可以設為封面的,打開那張圖片後有提示的..
10. html5怎樣調用手機攝像頭或者相冊
用input type=file capture=camcorder調用攝像頭，會先讓你選擇拍照或者從相冊選取。
首先實現在瀏覽器中調用手機攝像頭，實現拍照功能並且把拍下的照片顯示在頁面並上傳到伺服器上，然後再在伺服器端進行分析。
首先實現在瀏覽器中調用攝像頭，當然用現在火的不行的html5，html5中的<video>標簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源。實現拍照功能的html5代碼：
<article>
<style scoped>
video { transform: scaleX(-1); }
p { text-align: center; }
</style>
<h1>Snapshot Kiosk</h1>
<section id="splash">
<p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
<p><input type=button value="📷" onclick="snapshot()">
</section>
<script>
navigator.getUserMedia({video:true}, gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
</script>
</article>
經本人測試在android手機的opera瀏覽器瀏覽器下可以正常實現手機拍照功能。android手機下的google chrome瀏覽器還不行，自帶的瀏覽器也測試沒有通過。iphone手機的safari瀏覽器也是不支持的。
想了解更多關於html5調用手機攝像頭的內容可以點擊http://dev.w3.org/2011/webrtc/editor/getusermedia.html。
圖片的獲取：
下面我們要從Canvas獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
Html代碼
var imgData =canvas.toDataURL("image/png");
因為真正圖像數據是base64編碼逗號之後的部分，所以我們實際伺服器處理的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
Html代碼
var data = imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
Html代碼
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串。例如PHP里
php代碼:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
圖片上傳：
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時：
js代碼
$.post('upload.php',{ 'data' : data } );
在後台我們用PHP腳本接收數據並存儲為圖片。
php代碼
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image); fclose($fp);
}
請注意，以上的解決方案不僅能用於Web App拍照上傳，並且你可以實現把Canvas的輸出轉換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、塗鴉的畫板功能，然後把用戶編輯完的圖片保存到伺服器上。