RecordRTC实现视频录制和播放

<video id="myVideo" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"controlslist="nofullscreen" width="100%" height="500">
</video>
<canvas id="canvas"></canvas>
<img id="img"></img><script>/*string数据库名称,number版本号不传默认为1*/// console.log(useUserMedia)var myVideo = document.getElementById('myVideo')var canvas = document.getElementById('canvas')var img = document.getElementById('img')navigator.mediaDevices.getUserMedia({video: {width: 1280,height: 720,frameRate: 24},audio: true}).then(async function (stearm) {let recorder = RecordRTC(stearm, {type: 'video',//视频类型mimeType: 'video/mp4',timeSlice: 1000,//该回调函数必须和上面的timeSlice分片时间配合使用ondataavailable: function (blob) {// blob为每一秒的视频片段console.log(blob, '00000000')},// 获取时间片段的时间戳onTimeStamp: function (timestamp) {console.log(timestamp)},bitsPerSecond: 128000,})recorder.startRecording();const sleep = m => new Promise(r => setTimeout(r, m));await sleep(10000);// if (blob) {//     myVideo.src = window.URL.createObjectURL(blob)// }recorder.stopRecording(function (audioURL) {let blob = recorder.getBlob();console.log(blob, '0000000')myVideo.onload = function (e) {console.log('清除掉创建的URL')window.URL.revokeObjectURL(myVideo.src)}myVideo.src = window.URL.createObjectURL(blob)//视频下载 invokeSaveAsDialog（参数1为视频流blob,参数2为视频类型）invokeSaveAsDialog(blob, 'video.mp4');})})</script>

RecordRTC实现视频录制相关推荐

使用 recordRTC 实现web 端音视频录制
相信大家在线上笔试过程中,都曾有经历过必须打开摄像头的过程. 其背后究竟是什么东西发挥了作用呢? 这期请跟随艾米栗的思路.了解一下. 一.webRTC 的历史可阅读: webrtc 官网:https ...
开发ASP.NET MVC 在线录音录像（音视频录制并上传）
开发ASP.NET MVC 在线录音录像(音视频录制并上传) 最近有个在线招聘录音的开发需求,需要在招聘网站上让招聘者上传录音和视频. 找到两个不错的javascript开源,可以在除了IE以外的浏览 ...
html5动画怎么做成gif,一种网页版的调用html5视频录制动画GIF图像的方法与流程...
本发明涉及WEB开发与应用技术领域,特别涉及一种网页版的调用html5视频录制动画GIF图像的方法. 背景技术: GIF 格式指的是图像交换格式(Graphics Interchange Format ...
视频录制，压缩实现源码
实现代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
linux系统插优盘安装xvidcap,linux下的视频录制软件xvidcap
1.xvidcap简介在linux如果我们想要进行视频录制,那么xvidcap是一个不错的选择.Xvidcap 是一个可将屏幕上的操作过程录制下来并保存为视频的小工具.对于需要制作产品演示和教学的朋 ...
android视频录制(调用系统视频录制)
2019独角兽企业重金招聘Python工程师标准>>> 最近客户有一个视频录制的需求,于是,我就整理下可行的方案. 启动系统视频录制的代码: Intent mIntent = new ...
【铜】第174-9篇一对一视频录制（九）一对多学生端删除白板及nginx下配CI
关键词:webm文件在手机端播放, 一对多学生端删除白板, nginx下配CI 一.一对一视频录制 1.1.webm文件在手机端播放 1)在PC上 a.)用谷歌浏览器播放 http://123.57. ...
Android 仿微信小视频录制
Android 仿微信小视频录制 WechatShortVideo和WechatShortVideo文章
android录制视频横向,Android从零开始(26)(设置全屏+横屏、相机拍照、视频录制)(新)...
相机拍照.视频录制相机拍照全屏显示有两种方式: 在androidManifest.xml里面的application标签下设置 android:theme="@android:style/ ...

RecordRTC实现视频录制

RecordRTC实现视频录制和播放

RecordRTC实现视频录制相关推荐

最新文章

热门文章