按钮

<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视频，并上传视频保存相关推荐

腾讯视频下载安装链接_腾讯视频怎么上传视频
今天继续给大家分享腾讯视频方面的内容.腾讯视频播放器是腾讯视频官方推出的一款视频客户端,致力于为用户提供高清.流畅.丰富的专业视频服务,在这里您可在线享受腾讯视频网站内全部免费高清正版视频.使用腾讯视 ...
JS任意截图并上传图片，上传视频、上传文件
** JS截图上传图片 ** 在前端WEB开放过程中,经常使用上传图片.上传视频.上传音频以及上传其他文件等,通常都使用到各种上传插件,但是很多插件只是单纯的上传文件,不具备图片截图,即使有也很传统, ...
html5 视频录制上传视频,怎么上传视频（手把手教你怎么在今日头条录制及上传视频）...
想上传精彩视频与人分享其实很简单,只需要以下几个简单的步骤即可 1.磨刀不误砍柴工,首先要准备录屏软件(如果后期经常剪那你还会需要一个傻瓜式的剪辑软件),没有要推销广告的意思所以软件自行选择能满足使用 ...
element UI el-upload组件实现视频文件上传视频回显
项目中需要提供一个视频介绍,使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL, 百度找了一番后最终实现了. HTML <el ...
thinkphp6+webuploader实现大文件(视频)分片上传/本地保存或上传OSS
thinkPHP6+webuploader分片上传大视频的解决方案: ①能解决视频太大,1G.2G直传服务器压力过大 ②部分追求完美的人不发接受直传,那只能分片上传 ③分片上传是我找到的比较合理的解决 ...
html 前端优化上传视频,前端上传组件Plupload使用---上传大视频(分片上传)
上传视频到服务器 1.引入js插件: 2.html页面如图: 上传视频: 上传视频支持AVI.wma.rmvb.rm.flash.mp4.mid.3GP等格式 3.js代码 $(function ( ...
wangEditor 修改 “视频”菜单，上传视频（替换原来的输入地址），三次修改
参考文章:https://blog.csdn.net/m0_37885651/article/details/83660206 发现图标失效.做了些修改效果图: 上传返回数据(单个视频上传): da ...
wangEditor 修改 “视频”菜单的实现方式，达到上传视频的功能---完整版
//经测,没能实现我的需求,我经二次修改实现,仅先修改了构造函数 UploadVideo 里面的些许判断,下面链接为我改过的 https://blog.csdn.net/m0_37885651/art ...
java+阿里云中的视频点播实现视频的上传和播放
一,开通阿里云视频点播 1,打开阿里云搜索"视频点播" 2,开通服务查看两种付费方式的区别(了解其他付费项目): https://www.aliyun.com/price/pro ...
iview实现视频文件上传
介绍前端使用iview实现选择文件上传,后端使用laravel写接收上传文件接口,采用前后端分离的架构进行开发.效果图如下(: 前端实现前端使用iview中的upload组件进行实现,upload ...

php js实现录制mp4视频，并上传视频保存

按钮

js实现

php保存

php js实现录制mp4视频，并上传视频保存相关推荐

最新文章

热门文章