HTML5提供了一個非常不錯的功能——視頻錄制功能。通過HTML5，可以在不需要額外插件的情況下直接在瀏覽器中錄像，并將錄制的視頻上傳到服務器上。那么如何編寫HTML5錄像的代碼呢？下面讓我們來看看具體實現過程。 首先，我們需要使用一個video標簽來顯示我們錄制的視頻。使用以下代碼：

<video id="video" width="640" height="480" autoplay></video>

需要注意的是，這個video標簽的寬度和高度需要設置，否則會出現視頻不顯示的問題。同時，我們使用了autoplay屬性，這樣在錄制完成后，錄制的視頻就能夠直接播放了。 接下來，我們需要使用JavaScript來實現錄制功能。我們可以使用一個canvas標簽來獲取視頻的畫面，然后再將這個畫面保存為mp4格式的視頻文件。

<script>var video = document.querySelector("#video");
var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var context = canvas.getContext('2d');
var captureInterval = null;
var recording = false;
function startRecording(){
recording = true;
captureInterval = setInterval(function(){
context.drawImage(video, 0, 0, canvas.width, canvas.height);
}, 1000/30);
}
function stopRecording(){
recording = false;
clearInterval(captureInterval);
var dataURL = canvas.toDataURL('video/mp4');
var blobData =  new Blob([dataURL], { type: "video/mp4" });
uploadVideo(blobData);
}
</script>

在上面的代碼中，我們使用了startRecording()和stopRecording()兩個函數來控制錄制，其中，startRecording()用于開始錄制，stopRecording()用于停止錄制，并將錄制的視頻文件上傳至服務器。 在startRecording函數中，我們使用了setInterval函數來定時獲取視頻的畫面，并將其保存在canvas上。而在stopRecording函數中，我們使用了canvas.toDataURL()將canvas中的內容轉換成base64格式的數據，并使用了Blob對象將其轉換為mp4格式的視頻文件。 最后，我們需要將錄制的視頻文件上傳到服務器上。可以使用Ajax進行上傳，代碼如下：

<script>function uploadVideo(videoBlob){
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function () {
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log('上傳失敗');
}
};
xhr.onerror = function () {
console.log('網絡錯誤');
};
var formData = new FormData();
formData.append('videoFile', videoBlob);
xhr.send(formData);
}
</script>

在這里，我們使用了FormData對象將視頻文件轉化為表單數據，并通過XMLHttpRequest對象發送到服務器。 最后，我們需要將startRecording()和stopRecording()函數與錄制按鈕和停止按鈕綁定，代碼如下：

<button onclick="startRecording()">開始錄制<button onclick="stopRecording()">停止錄制

至此，我們就完成了HTML5視頻錄制功能的編寫，同時也將錄制完成的視頻上傳到了服務器上。