webRTC(四),Android性能优化面试题集锦
var constraints={
video: true,
audio: true,
}
navigator.mediaDevices.getUserMedia(constraints)
.then(gotMediaStream)
.then(gotDevices)
.catch(handleError)
function gotMediaStream(stream){
videoplay.srcObject=stream;
}
音视频数据采集主要使用getUserMedia方法获取媒体数据,constraints配置采集轨道的参数,video,audio的true表示采集,false表示不采集,然后将数据流通过gotMediaStream方法添加到视频组建上。
- WebRTC_API_适配
添加官方的adapter-latest支持即可
- 获取音视频设备的访问权限
function gotMediaStream(stream){
videoplay.srcObject=stream;
return navigator.mediaDevices.enumerateDevices();
}
function gotDevices(deviceInfos){
deviceInfos.forEach(function(deviceinfo){
var option= document.createElement(‘option’);
option.text=deviceinfo.label;
option.value=deviceinfo.deviceId;
if(deviceinfo.kind===‘audioinput’){
audioSource.appendChild(option);
}else if(deviceinfo.kind===‘audiooutput’){
audioOutput.appendChild(option);
}else if(deviceinfo.kind===‘videoinput’){
videoSource.appendChild(option);
}
})
}
在gotMediaStream方法返回return navigator.mediaDevices.enumerateDevices(),这时gotDevices方法中就可以获取音视频设备
- 视频约束
var constraints={
video: {
width:640,
height:480,
frameRate:30,
//environment:后置摄像头,user:前置摄像头
facingMode:“user”,
deviceId: {exact:deviceId ? deviceId:undefined}
},
视频约束所有的配置都在constraints中进行配置,更多详细可以查看官方api
- 音频约束
var constraints={
video: {
width:640,
height:480,
frameRate:30,
//environment:后置摄像头,user:前置摄像头
facingMode:“user”,
deviceId: {exact:deviceId ? deviceId:undefined}
},
audio: {
//降噪
noiseSuppression:true,
//回音消除
echoCancellation:true
},
}
音频约束和视频约束一样,在constraints中进行配置,更多详细可以查看官方api
- 视屏特效
Filter:
None blur Grayscale Invert sepia
//特效
filtersSelect.onchange = function(){
videoplay.className=filtersSelect.value;
}
设置特效直接设置视频源video的className即可
- 从视频中获取图片
Take snapshot
//从视频中获取图片
var snapshot =document.querySelector(“button#snapshot”);
var picture =document.querySelector(“canvas#picture”);
picture.width=480;
picture.height=640;
//从视频中获取图片
snapshot.οnclick=function(){
picture.className=filtersSelect.value
picture.getContext(‘2d’).drawImage(videoplay,
0,0,
picture.width,
picture.height);
}
从视频中获取图片主要使用的是canvas来绘制的
- MediaStreamAPI及获取视频约束
//获取屏幕约束
var divConstraints = document.querySelector(‘div#constraints’)
function gotMediaStream(stream){
var videoTrack = stream.getVideoTracks()[0];
var videoConstraints = videoTrack.getSettings();
divConstraints.textContent= JSON.stringify(videoConstraints,null,2);
videoplay.srcObject=stream;
return navigator.mediaDevices.enumerateDevices();
}
结果
{ “aspectRatio”: 1.3333333333333333, “deviceId”: “97953df027728ab0acac98c670d59f654a1e7f36f9faf70f2e0fd7a479394fe3”,
“frameRate”: 29.969999313354492, “groupId”: “1b83734781c08e3c51519598002aa1d5acb1bcd73772f5d2db4b976586af3666”,
“height”: 480, “width”: 640, “videoKind”: “color” }
获取视频约束,在gotMediaStream方法中获取视频轨道,信息都在轨道中获取
- 录制音频视屏
//视频录制
btnRecord.οnclick=()=>{
if(btnRecord.textContent===‘Start Record’){
startRecord();
btnRecord.textContent=‘Stop Record’
btnPlay.disabled=true;
btnDownload.disabled=true;
}else{
stopRecord();
btnRecord.textContent=‘Start Record’
btnPlay.disabled=false;
btnDownload.disabled=false;
}
}
function gotMediaStream(stream){
…
window.stream=stream;
…
return navigator.mediaDevices.enumerateDevices();
}
//开始录制
function startRecord(){
buffer=[];
var options={
mimeType: ‘video/webm;codecs=vp8’
}
if(!window.MediaRecorder.isTypeSupported(options.mimeType)){
console.error(’${options.mimeType} is not supported’);
return;
}
try {
mediaRecorder= new window.MediaRecorder(window.stream,options);
} catch (e) {
console.error(‘failed to create MediaRecorder:’,e);
return;
}
mediaRecorder.ondataavailable= handleDataAvailable;
mediaRecorder.start(10);
}
//停止录制
function stopRecord(){
mediaRecorder.stop();
}
- 播放录制视频
btnPlay.οnclick=()=>{
var blob =new Blob(buffer,{type: ‘video/webm’});
recvideo.src=window.URL.createObjectURL(blob);
recvideo.srcObject=null;
recvideo.controls=true;
recvideo.play();
}
- 下载录制视频
btnDownload.οnclick=()=>{
var blob =new Blob(buffer,{type:‘video/webm’});
var url = window.URL.createObjectURL(blob);
var a=document.createElement(‘a’);
a.href=url;
a.style.display=‘none’;
a.download=‘a
aa.webm’;
a.click();
}
- 采集屏面数据
//getDisplayMedia 捕获桌面 ,getUserMedia 捕获摄像头数据
function start(){
//捕获桌面
if (!navigator.mediaDevices||
!navigator.mediaDevices.getDisplayMedia) {
console.log(“getUserMedia is not supported!”)
return;
} else {
//捕获桌面
var constraints1={
video: true,
audio: true,
}
//getDisplayMedia 捕获桌面 ,getUserMedia 捕获摄像头数据
navigator.mediaDevices.getDisplayMedia(constraints1)
.then(gotMediaStream)
.then(gotDevices)
.catch(handleError)
}
}
采集屏幕数据其实和采集音视频信息一直,只是将getUserMedia替换成getDisplayMedia即可.
注意:要使用google浏览器打开Experimental Web Platform features
全部代码
- html
WebRtc capture video and audio
audio input device:
audio output device:
video input device:
Filter:
None blur Grayscale Invert sepia
3px);
}
.grayscale{
-webkit-filter:grayscale(1);
}
.invert{
-webkit-filter:invert(1);
}
.sepia{
-webkit-filter:sepia(1);
}
audio input device:
audio output device:
video input device:
Filter:
None blur Grayscale Invert sepia
webRTC(四),Android性能优化面试题集锦相关推荐
- 史上最全的Android性能优化面试题集锦
前言 很多人面试之前,可能没有在互联网公司工作过或者说工作过但年头较短,不知道互联网公司技术面试都会问哪些问题? 再加上可能自己准备也不充分,去面试没几个回合就被面试官几个问题打蒙了,最后以惨败收场. ...
- Android性能优化面试题集锦,实战篇
接触这一行也有很久了,从开始的实习到带团队,中间接触过很多人,前不久身边刚好有人去面试了阿里,抖音等这些公司还成功的面试上了,现在来分享一下面试前需要准备的知识点 很多人去面试之前,不知道会问到那些知 ...
- Android性能优化面试题集锦,终局之战
导语 你想做安卓开发,怎么系统学习?你只需要看完这一篇就够了!!为什么只看这一篇就够了?现在CSDN.知乎.掘金.GitHub上各路大佬层出不穷,他们深耕Android开发多年,总结出满满的学习干货. ...
- Android性能优化面试题,与性能优化相关面试题 - 与IPC机制相关面试题 - 《Android面试宝典》 - 书栈网 · BookStack...
源码分析相关面试题 Activity相关面试题 与XMPP相关面试题 与性能优化相关面试题 与登录相关面试题 与开发相关面试题 与人事相关面试题 与人事相关面试题现在三四月份,金三银四最好找工作时间, ...
- Android 性能优化之数据库优化(一)
Android性能优化系列汇总已完成,包括: Android 性能优化实例 Android 性能优化之数据库优化(一) Android 性能优化之布局优化 (二) Android 性能优化之Java( ...
- Android 性能优化必知必会
做了这么久性能相关的工作,也接触了不少模块,说实话要做好性能这一块,真心不容易.为什么这么说? 是因为需要接触的知识实在是太多了, Android 是一个整体,牵一发而动全身,不是说只懂一个模块就可以 ...
- Android 性能优化必知必会(2020-5-16)
做了这么久性能相关的工作,也接触了不少模块,说实话要做好性能这一块,真心不容易.为什么这么说? 是因为需要接触的知识实在是太多了, Android 是一个整体,牵一发而动全身,不是说只懂一个模块就可以 ...
- 记录一个android性能优化宝藏级总结
发现一个android性能优化文章宝藏级总结,太赞了,感谢大佬的无私奉献总结,防止丢失,在此记录一下 传送门 复制一些目录,增加一些篇幅{嘻嘻} 优化心得和经验 抖音 Android 性能优化系列:启 ...
- Android 性能优化
为什么80%的码农都做不了架构师?>>> 原文作者:鸿洋 原文地址:点我跳转原文 一般情况下,我们谈性能优化基本上会从以下几个方面: App启动速度优化 UI流畅度优化 内存优 ...
最新文章
- ios11更新提示信任_Odyssey越狱工具体验、Cydia更新
- python内置模块大全 processon
- 《LeetCode力扣练习》第5题 C语言版 (做出来就行,别问我效率。。。。)
- 虚拟化--027 VMware vCenter Server Heartbeat 6.5安装教程
- java集群_JAVA架构师学习:实践ZooKeeper 应用场景与集群管理,辛勤总结
- PPT 下载 | 神策数据张涛:企业服务客户全生命周期运营三步曲客情诊断 解决方案库...
- oracle 动态注册和静态注册
- centos6安装mysql并远程连接_如何开启phpstudy中mysql的远程连接
- 过去15年间,到底是什么真正推动了云计算的革命?
- 计算机网络解释概念,2017年计算机三级网络技术基本概念与名词解释:计算机网络的基本概念...
- 国际千人基因组计划数据库怎么用起来?
- Linux笔记-为操作系统配ntp服务地址(适用达梦操作系统)
- Docker 常用命令,还有谁不会?
- Object Clustering(POJ-3214)
- 华晨集团债务违约65亿 宝马中国:华晨宝马运营不受影响
- Redis下载部署并加入idea应用(详细笔记)
- 全网最详细numpy的argmin与argmax解析(一次性理解np.argmin)
- word wps 出版 常用操作
- TCP/IP协议中分包与重组原理介绍、分片偏移量的计算方法、IPv4报文格式
- CRC校验原理及CRC-8简单校验函数设计
热门文章
- WorkFlow常用的一些情形
- 冰雪覆盖不了的足迹,人间自是有情在
- 分布式事务原理及解决方案
- STM32 ADC输入采集电压
- Vue.Draggable 实现vue拖动组件
- WEB前端课程设计——田径队管理系统
- ubuntu16.04默认python3.5使用pip下载外置模块出现问题的解决方法
- 方舟服务器最多127人,TapTap 9.7分,超127万人预约,《方舟:生存进化》值得期待...
- Python 实现VRay Bitmap的旋转和重复偏移
- Chrome插件开发之添加B站搜索以及萌娘百科菜单