HTML5 获得音视频播放
2015-06-30 15:59
671 查看
<span style="font-family: Arial, Helvetica, sans-serif;"><!doctype html></span>
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>GetUserMedia实例</title> </head> <body> <video id="localVideo" autoplay></video> </body> <script type="text/javascript"> //获得控制音视频的浏览器兼容写法 var userMedia = (navigator.getUserMedia||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia||navigator.msGetUserMedia); /* 约束对象可以被设置在getUserMedia()和RTCPeerConnection的addStream方法中,这个约束对象是WebRTC用来指定接受什么样的流的,其中可以定义如下属性: * video: 是否接受视频流 * audio:是否接受音频流 * MinWidth: 视频流的最小宽度 * MaxWidth:视频流的最大宽度 * MinHeight:视频流的最小高度 * MaxHiehgt:视频流的最大高度 * MinAspectRatio:视频流的最小宽高比 * MaxAspectRatio:视频流的最大宽高比 * MinFramerate:视频流的最小帧速率 * MaxFramerate:视频流的最大帧速率 */ userMedia.call(navigator, { video: true, audio: true }, function(stream) { var localVideo = document.getElementById("localVideo"); //window.URL.createObjectURL(stream)来创造能在video中使用src属性播放的Blob URL,注意在video上加入autoplay属性,否则只能捕获到一张图片 localVideo.src = window.URL.createObjectURL(stream); localVideo.onloadedmetadata = function(e) { //流创建完毕后可以通过label属性来获得其唯一的标识, //还可以通过getAudioTracks()和getVideoTracks()方法来获得流的追踪对象数组(如果没有开启某种流,它的追踪对象数组将是一个空数组) console.log("Label: " + stream.label); console.log("AudioTracks" , stream.getAudioTracks()); console.log("VideoTracks" , stream.getVideoTracks()); }; }, function(e) { console.log('Reeeejected!', e); }); </script> </html>
需要部署到服务器访问
需要部署到服务器访问相关文章推荐
- 20个大大节省你时间的HTML5开发工具
- 20个大大节省你时间的HTML5开发工具
- H5基于iScroll实现下拉刷新,上拉加载更多
- HTML5 div css3漂亮的侧边菜单栏
- (一)html5中的新增元素和废除元素
- 今日之学-bug修改
- html5桌面通知,notification的使用,右下角出现通知框
- html5之meta标签viewport应用
- html5学习笔记(2)
- html5学习笔记(1)简介
- 利用html5中的localStorage获取网页被访问的次数
- html5的本地存储localStorage和sessionStorage
- HTML5 data-* 自定义属性
- HTML5图片旋转
- 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧
- 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧
- 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧
- HTML5的data-*自定义属性
- 给你推荐10款优秀的 HTML5 动画工具
- HTML5 history API,创造更好的浏览体验