按鈕

<button onclick="videolz()" type="button" style="width: 100px; font-size: 32px;cursor: pointer;">開始 </button><button onclick="mediaStop()" type="button" style="width: 100px; font-size: 32px;cursor: pointer;margin-left: 60px;">停止 </button>

js實現

MediaStreamRecorder.js下載
https://download.csdn.net/download/gusijin/78228210

https://github.com/streamproc/MediaStreamRecorder

<script src="./MediaStreamRecorder.js"></script> <script>var uploadBlod = '';//防止兩次上傳var file = '';var recordTime = 15;//錄制時間，單位妙var mediaRecorder = '';var isStop = false;function videolz() {if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {var getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia ||navigator.oGetUserMedia;if (!getUserMedia) {console.log("當前瀏覽器不支持拍攝功能");return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}return new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}var mediaConstraints = {audio: true,video: true};isStop = false;navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);}function onMediaSuccess(stream) {mediaRecorder = new MediaStreamRecorder(stream);mediaRecorder.stream = stream;mediaRecorder.mimeType = 'video/mp4';mediaRecorder.ondataavailable = function (blob) {if (uploadBlod == '') {var blobURL = URL.createObjectURL(blob);document.write('<a target="_black" href="' + blobURL + '">' + blobURL + '</a> <br /><br />');file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {type: 'video/mp4'});uploadBlod = blob;}};++recordTime;mediaRecorder.start();setTimeout(function () {if (!isStop) {mediaStop();}}, recordTime * 1000);}function mediaStop() {isStop = true;mediaRecorder.stream.stop()console.log("錄像結束");//要給一點recorder到videoBlob的時間，必選setTimeout(function () {uploadVedio(file);console.log("錄像上傳");file = '';uploadBlod = '';}, 1000);}function onMediaError(e) {console.error('media error', e);}function uploadVedio(file) {// create FormDatavar formData = new FormData();formData.append('video-filename', file.name);formData.append('video-blob', file);makeXMLHttpRequest('/media-recorder/save.php', formData, function () {var downloadURL = '/media-recorder/uploads/' + file.name;console.log('File uploaded to this path:', downloadURL);});}function makeXMLHttpRequest(url, data, callback) {var request = new XMLHttpRequest();request.onreadystatechange = function () {if (request.readyState == 4 && request.status == 200) {callback();}};request.open('POST', url);request.send(data);}</script>

php保存

<?php // via: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-PHP/save.php header("Access-Control-Allow-Origin: *"); function selfInvoker() {if (!isset($_POST['audio-filename']) && !isset($_POST['video-filename'])) {echo 'PermissionDeniedError';return;}$fileName = $_POST['video-filename'];$tempName = $_FILES['video-blob']['tmp_name'];if (empty($fileName) || empty($tempName)) {echo 'PermissionDeniedError';return;}$filePath = 'uploads/' . $fileName;// make sure that one can upload only allowed audio/video files$allowed = array('webm','wav','mp4','mp3','ogg');$extension = pathinfo($filePath, PATHINFO_EXTENSION);if (!$extension || empty($extension) || !in_array($extension, $allowed)) {echo 'PermissionDeniedError';return;}if (!move_uploaded_file($tempName, $filePath)) {echo('Problem saving file.');return;}echo($filePath); }selfInvoker(); ?>

總結

以上是生活随笔為你收集整理的php js实现录制mp4视频，并上传视频保存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。