h5 HTML5 浏覽器 錄制視訊

HTML 部分：

<div class="layui-body">
    <div style="margin-left: 10%" id="container">
        <video id="gum" autoplay muted></video>
    <div>
    <button id="record" disabled>開始錄制</button>
    <button id="upload" disabled>上傳</button>
</div>
           

JS 部分：

var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
var mediaRecorder;
var recordedBlobs;
var sourceBuffer;

var gumVideo = document.querySelector('video#gum');

var recordButton = document.querySelector('button#record');
var uploadButton = document.querySelector('button#upload');
recordButton.onclick = toggleRecording;
uploadButton.onclick = upload;

// window.isSecureContext could be used for Chrome
var isSecureOrigin = location.protocol === 'https:' || location.hostname === 'localhost';
if (!isSecureOrigin) {
    alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' + '\n\nChanging protocol to HTTPS');
    location.protocol = 'HTTPS';
}

var constraints = {
    audio: true,
    video: {
      width:480,//視訊寬度
      height:480,//視訊高度
      frameRate:60,//每秒60幀
  }
};

function handleSuccess(stream) {
    recordButton.disabled = false;
    console.log('getUserMedia() got stream: ', stream);
    window.stream = stream;
    gumVideo.srcObject = stream;
}

function handleError(error) {
    console.log('navigator.getUserMedia error: ', error);
}

navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);

function handleSourceOpen(event) {
    console.log('MediaSource opened');
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
    console.log('Source buffer: ', sourceBuffer);
}


function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

function handleStop(event) {
    console.log('Recorder stopped: ', event);
}

function toggleRecording() {
    if (recordButton.textContent === '開始錄制') {
        startRecording();
    } else {
        stopRecording();
        recordButton.textContent = '開始錄制';
        uploadButton.disabled = false;
    }
}

function startRecording() {
	recordedBlobs = [];
	var options = {mimeType: 'video/webm;codecs=h264'};
	try {
		mediaRecorder = new MediaRecorder(window.stream, options);
	} catch (e) {
	    console.error('Exception while creating MediaRecorder: ' + e);
	    alert('Exception while creating MediaRecorder: '
	    + e + '. mimeType: ' + options.mimeType);
	    return;
	}
	console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
	recordButton.textContent = '結束錄制';
	uploadButton.disabled = true;
	mediaRecorder.onstop = handleStop;
	mediaRecorder.ondataavailable = handleDataAvailable;
	mediaRecorder.start(10); // collect 10ms of data
	console.log('MediaRecorder started', mediaRecorder);
}

function stopRecording() {
    mediaRecorder.stop();
    console.log('Recorded Blobs: ', recordedBlobs);
}

function upload(){
    //儲存在本地，通過post請求
    //還可以用append方法添加一些附加資訊參數為(name,value)，如下面的代碼：
    var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
    var formData = new FormData();
    formData.append('video', blob);
    console.log(formData);

    $.ajax({
        type: "POST",
        url: "/user/vertify",
        data: formData,
        processData:false,   //  告訴jquery不要處理發送的資料
        contentType:false,    // 告訴jquery不要設定content-Type請求頭
        success:function(res){
            console.log(res);
        }
    });
}
           

PHP控制器部分

public function vertify()
{
	//建立檔案儲存目錄
    $save_dir = '\upload\Video\' . date('Ym').'\'.date('md');
    if (!file_exists('.'.$save_dir)) {
        mkdir('.'.$save_dir,0777,true);
    }
    $newfile = time().mt_rand().'.mp4';
    $destinationPath = public_path() . $save_dir;
    if($_FILES["video"]["error"] !== 0){
        return ['ret' => 1, 'msg' => $_FILES["file"]["error"]];
    }
    $video_path = $destinationPath.'\\'.$newfile;
    //儲存視訊
    $res = move_uploaded_file($_FILES['video']['tmp_name'],$video_path);
    if(!$res){
        return ['ret' => 1, 'msg' => '視訊上傳出錯'];
    }
}
           

原文連結：https://blog.csdn.net/xiaopeng_han123/article/details/78602022?locationNum=1&fps=1