前面介绍了通过H5实现在网页内打开摄像头和麦克风,实现截图和图像预览的相关知识。

getUserMedia API及HTML5 调用摄像头和麦克风

一个简单的demo  实现摄像头的调用及视频录制,截图,下载等功能,逐渐完善中。。。。

地址:https://github.com/zhangdexian/videorecorder

页面效果:

但是我们无法将将数据保存到本地甚至上传到我们自己的服务器,本篇主要是针对录像录音的保存做一个简单的介绍和学习。

首先来看一下官方的文档介绍:

构造器 ConstructorSection

MediaRecorder()
Creates a new MediaRecorder object, given a MediaStream to record. Options are available to do things like set the container's MIME type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate.

构造器接受一个MediaStream流对象,可以看到还可以配置MIME type类型及比特率。

属性 PropertiesSection

MediaRecorder.mimeType Read only   // 返回MediaRecorder实例的mimetype类型  只读
 Returns the MIME type that was selected as the recording container for the MediaRecorder object when it was created.
MediaRecorder.state Read only // 返回MediaRecorder当前状态:闲置、录制中和暂停 只读
 Returns the current state of the MediaRecorder object (inactive, recording, or paused.)
MediaRecorder.stream Read only // 返回所录制的流对象 只读
Returns the stream that was passed into the constructor when the MediaRecorder was created.
MediaRecorder.ignoreMutedMedia // 当媒体流静音时是否忽略
Indicates whether the MediaRecorder instance will record input when the input MediaStreamTrack is muted. If this attribute is false, MediaRecorder will record silence for audio and black frames for video. The default is false.
MediaRecorder.videoBitsPerSecond Read only // 返回视频的比特率 只读
Returns the video encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).
MediaRecorder.audioBitsPerSecond Read only // 返回音频的比特率 只读
 Returns the audio encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).

方法 MethodsSection

MediaRecorder.isTypeSupported()     //  返回给定的MIME type是否被当前客户端支持
Returns a Boolean value indicating if the given MIME type is supported by the current user agent .

MediaRecorder.pause() // 暂定录制
Pauses the recording of media.
MediaRecorder.requestData() // 返回录制的二进制数据,调用这个方法后会生成一个新的Blob对象
Requests a Blob containing the saved data received thus far (or since the last time requestData() was called. After calling this method, recording continues, but in a new Blob.
MediaRecorder.resume() // 恢复录制
Resumes recording of media after having been paused.
MediaRecorder.start() // 开始录制
Begins recording media; this method can optionally be passed a timeslice argument with a value in milliseconds. If this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk.
MediaRecorder.stop() // 停止录制
Stops recording, at which point a dataavailable event containing the final Blob of saved data is fired. No more recording occurs.

事件 Event HandlersSection

MediaRecorder.ondataavailable   // 有可用数据流时触发,e.data即时需要的视频数据
Called to handle the dataavailable event, which is periodically triggered each time timeslice milliseconds of media have been recorded (or when the entire media has been recorded, if timeslice wasn't specified). The event, of type BlobEvent, contains the recorded media in its data property. You can then collect and act upon that recorded media data using this event handler.
MediaRecorder.onerror
An EventHandler called to handle the error event, including reporting errors that arise with media recording. These are fatal errors that stop recording. The received event is based on the MediaRecorderErrorEvent interface, whose error property contains a DOMException that describes the actual error that occurred.
MediaRecorder.onpause
An EventHandler called to handle the pause event, which occurs when media recording is paused.
MediaRecorder.onresume
An EventHandler called to handle the resume event, which occurs when media recording resumes after being paused.
MediaRecorder.onstart
An EventHandler called to handle the start event, which occurs when media recording starts.
MediaRecorder.onstop
An EventHandler called to handle the stop event, which occurs when media recording ends, either when the MediaStream ends — or after the MediaRecorder.stop() method is called.

下面是一个简单的例子:

if (navigator.mediaDevices) {
console.log('getUserMedia supported.'); var constraints = { audio: true };
var chunks = []; navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) { var mediaRecorder = new MediaRecorder(stream); visualize(stream); record.onclick = function() {
mediaRecorder.start();
console.log(mediaRecorder.state);
console.log("recorder started");
record.style.background = "red";
record.style.color = "black";
} stop.onclick = function() {
mediaRecorder.stop();
console.log(mediaRecorder.state);
console.log("recorder stopped");
record.style.background = "";
record.style.color = "";
} mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called."); var clipName = prompt('Enter a name for your sound clip'); var clipContainer = document.createElement('article');
var clipLabel = document.createElement('p');
var audio = document.createElement('audio');
var deleteButton = document.createElement('button'); clipContainer.classList.add('clip');
audio.setAttribute('controls', '');
deleteButton.innerHTML = "Delete";
clipLabel.innerHTML = clipName; clipContainer.appendChild(audio);
clipContainer.appendChild(clipLabel);
clipContainer.appendChild(deleteButton);
soundClips.appendChild(clipContainer); audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
chunks = [];
var audioURL = URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped"); deleteButton.onclick = function(e) {
evtTgt = e.target;
evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
}
} mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
})
.catch(function(err) {
console.log('The following error occurred: ' + err);
})
}

网页录像录音功能的实现之MediaRecorder的使用的更多相关文章

  1. delphi android 录像(使用了JMediaRecorder,MediaRecorder的使用方法)

    delphi xe系列自带的控件都无法保存录像,经网友帮忙,昨天终于实现了录像功能(但有个问题是录像时无画面显示),程序主要使用了JMediaRecorder,MediaRecorder的使用方法可参 ...

  2. delphi android 录像(使用了JMediaRecorder,MediaRecorder的使用方法可参考网上java的相关说明)

    delphi xe系列自带的控件都无法保存录像,经网友帮忙,昨天终于实现了录像功能(但有个问题是录像时无画面显示),程序主要使用了JMediaRecorder,MediaRecorder的使用方法可参 ...

  3. Android 自带 camera 详解

    在本文中 需要考虑的问题 概述 Manifest声明 使用内置的摄像头应用程序 捕获图像的intent 捕获视频的intent 接收摄像头intent的结果 创建摄像头应用程序 检测摄像头硬件 访问摄 ...

  4. websocket聊天体验(二)

    上一篇说到后续可以支持:最近历史.表情+图片,顺便还实现了简易的音频和视频.暂时没有实现实时语音对讲,有待后续再研究.点开在线聊天页面,即可看到最近历史记录(18条). 聊天的底层数据都是基于txt文 ...

  5. 录像时调用MediaRecorder的start()时发生start failed: -19错误

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  6. Android调用手机摄像头使用MediaRecorder录像并播放

    最近在项目开发中需要调用系统的摄像头录像并播放. 在开发中遇到了两个问题,记录下: (1)开发过程中出现摄像头占用,启动失败,报错.但是我已经在onDestory()中关闭了资源. 报错原因:打开程序 ...

  7. android Camera拍照 及 MediaRecorder录像 预览图像差90度

    Camera拍照: 今天做照相机程序,结果写好了发现出问题了,预览的图像差90度.相关源代码如下: Camera.Parameters params = camera.getParameters(); ...

  8. MediaRecorder录像那些事

    最近在做一个项目需要运用到MediaRecorder的API,之前都没接触过这部分,开始着手弄的时候各种各样的问题,真是让人崩溃呀! 最后通过网上的资料和大神的指点,当然也有自己几天坚持不懈的努力,终 ...

  9. Android App调用MediaRecorder实现录音功能的实例【转】

    本文转载自:http://www.jb51.net/article/82281.htm 这篇文章主要介绍了Android App调用MediaRecorder实现录音功能的实例,MediaRecord ...

随机推荐

  1. fedora 28 , firewalld 防火墙控制,firewall-cmd 管理防火墙规则

    今天,在使用fedora时,需要修改防火墙规则,一时间忘记了命令是什么,这里进行记录一下. 目前 fedora 28/ centos 7 使用 firewalld 作为防火墙软件:下面我就怎么简单管理 ...

  2. [MapReduce_3] MapReduce 程序运行流程解析

    0. 说明 Word Count 程序运行流程解析 &&  MapReduce 程序运行流程解析 1. Word Count 程序运行流程解析 2. MapReduce 程序运行流程图

  3. Lua 与 C 交互值 函数调用(2)

    @(语言) Lua和C 函数间的使用,都是通过栈来交互,并且基于遵守一定的规则,按照这个规则来就可以了. 1. 调用Lua函数 调用Lua方法过程 将被调用的函数入栈: 依次将所有参数入栈: 使用 l ...

  4. ansible-role写法

    一.role目录的创建: cd /etc/ansible/ mkdir -pv roles/{websrvs,dbsrvs}/{tasks,files,templates,meta,handlers, ...

  5. linux 的常用命令---------第十一阶段

    软件管理rpm.yum 在 windows 与 linux 之间 实现小文件传输(仅支持在 X shell 中完成文件传输,虚拟机中不可实现): # yum install  lrzsz  -y    ...

  6. rac添加新节点的步骤与方法(官方步骤与自我测试)

    Extending the Oracle Grid Infrastructure Home to the New NodeNow that the new node has been configur ...

  7. Matlab中要显示数学公式或符号Latex

    \rho 代表  ρ, \sigma  代表 σ \alpha   α \beta    β \gamma   γ \delta   δ \epsilon    ϵ \zeta    ζ \eta   ...

  8. Python threading中lock的使用

    版权声明: https://blog.csdn.net/u012067766/article/details/79733801在多线程中使用lock可以让多个线程在共享资源的时候不会“乱”,例如,创建 ...

  9. 【C语言】结构体占用字节数及存储与空间分配

    我们都知道在数据类型中,char类型占1个字节,short占2个字节,int占4个字节,long占8个字节等等. 在计算结构体大小时需要考虑其内存布局,结构体在内存中存放是按单元存放的,每个单元多大取 ...

  10. 关于TerraBuilder的扩展开发

    熟悉Skyline的朋友,可能会发现,在最新的6.6的产品体系中,TerraBuilder中用于生成三维地形场景的模块,改成了TerrainBuilder. 通常情况下,这款软件模块,我们主要用它来进 ...