webRTC(四),android应用开发基础课件
//获取屏幕约束
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=‘aaa.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
Start Record
Play
Download
Take snapshot
- js
‘use strict’
var videoplay=document.querySelector(‘video#player’)
var audioSource =document.querySelector(“select#audioSource”);
var audioOutput =document.querySelector(“select#audioOutput”);
var videoSource =document.querySelector(“select#videoSource”);
//特效
var filtersSelect =document.querySelector(“select#filter”);
//从视频中获取图片
var snapshot =document.querySelector(“button#snapshot”);
var picture =document.querySelector(“canvas#picture”);
picture.width=480;
picture.height=640;
//获取屏幕约束
var divConstraints = document.querySelector(‘div#constraints’)
//录制音视频
var recvideo = document.querySelector(‘video#recplayer’)
var btnRecord = document.querySelector(‘button#record’)
var btnPlay = document.querySelector(‘button#recplay’)
var btnDownload = document.querySelector(‘button#download’)
var buffer;
var mediaRecorder;
function gotMediaStream(stream){
var videoTrack = stream.getVideoTracks()[0];
var videoConstraints = videoTrack.getSettings();
divConstraints.textContent= JSON.stringify(videoConstraints,null,2);
window.stream=stream;
videoplay.srcObject=stream;
return navigator.mediaDevices.enumerateDevices();
}
function handleError(err){
console.log(“getUserMedia error:”,err);
}
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);
}
})
}
//getDisplayMedia 捕获桌面 ,getUserMedia 捕获摄像头数据
function start(){
//捕获摄像头数据
if (!navigator.mediaDevices||
!navigator.mediaDevices.getUserMedia) {
//捕获桌面
// if (!navigator.mediaDevices||
// !navigator.mediaDevices.getDisplayMedia) {
console.log(“getUserMedia is not supported!”)
return;
} else {
var deviceId=videoSource.value;
//捕获摄像头数据
var constraints={
video: {
widt
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
h:640,
height:480,
frameRate:30,
//environment:后置摄像头,user:前置摄像头
facingMode:“user”,
deviceId: {exact:deviceId ? deviceId:undefined}
},
audio: {
//降噪
noiseSuppression:true,
//回音消除
echoCancellation:true
},
}
//捕获桌面
var constraints1={
video: true,
audio: true,
}
//getDisplayMedia 捕获桌面 ,getUserMedia 捕获摄像头数据
navigator.mediaDevices.getUserMedia(constraints)
// navigator.mediaDevices.getDisplayMedia(constraints1)
.then(gotMediaStream)
.then(gotDevices)
.catch(handleError)
}
}
start();
videoSource.οnchange=start;
//特效
filtersSelect.onchange = function(){
videoplay.className=filtersSelect.value;
}
//从视频中获取图片
snapshot.οnclick=function(){
picture.className=filtersSelect.value
picture.getContext(‘2d’).drawImage(videoplay,
0,0,
picture.width,
picture.height);
}
//视频录制
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 handleDataAvailable(e){
if(e&&e.data&&e.data.size>0){
buffer.push(e.data)
}
}
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=()=>{
webRTC(四),android应用开发基础课件相关推荐
- android界面数据存储,Android应用开发基础之数据存储和界面展现(二)
Android应用开发基础之数据存储和界面展现(二) 常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRight ...
- Android视频开发基础(二)
Android视频开发基础(二) https://blog.csdn.net/goodlixueyong/article/details/62447452 前一篇文章详细介绍了视频的一些基本概念,这些 ...
- 湖南某科技大学 安卓Android移动开发基础期中考试笔记(持续更新)
湖南某科技大学 安卓Android移动开发基础期中考试笔记 前言 建议大家把第三章的三个实战演练和本笔记的所有代码部分都在AS中手打一遍,手打的意思是看懂之后自己写出来,而不是照着抄.这不90分就到手 ...
- 浅谈Android游戏开发基础和经验
Android游戏开发基础和经验是本文要介绍的内容,主要是来了解并学习Android游戏开发的内容实例,具体关于Android游戏开发内容的详解来看本文. 做一个类似俄罗斯方块的android游戏开发 ...
- android 启动服务同时传递数据,Android Studio开发基础之起动Service,并通过从Activity向Service传递数据...
Android Studio开发基础之启动Service,并通过从Activity向Service传递数据 本实例演示启动Service,并通过从Activity向Service传递数据,新建一个Se ...
- Android视频开发基础
Android视频开发基础 版权声明:本文为[viclee]原创,如需转载请注明出处~ https://blog.csdn.net/goodlixueyong/article/details/6205 ...
- 音视频开发(19)---Android视频开发基础(一)
Android视频开发基础(一) 版权声明:本文为[viclee]原创,如需转载请注明出处~ https://blog.csdn.net/goodlixueyong/article/details/6 ...
- Android App开发基础
Android App开发基础 App的开发特点 (1)App的运行环境 1.使用数据线把手机连到电脑上 2.在电脑上安装手机的驱动程序 3.打开手机的开发者选项并启用USB调试 4.将连接的手机设为 ...
- Android App开发基础篇—数据存储(SQLite数据库)
Android App开发基础篇-数据存储(SQLite数据库) 前言:Android中提供了对SQLite数据库的支持.开发人员可以在应用中创建和操作自己的数据库来存储数据,并对数据进行操作. 一. ...
最新文章
- 一个通俗易懂的HMM例子
- Asp.Net获取客户端信息-学习中
- Hyperledger Fabric 1.2 --- Chaincode Operator 解读和测试(一)
- 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
- 用最简单的方式训练史上最强ResNet-50,性能超过魔改结构的ResNeSt
- Knockoutjs 实践入门 (2) 绑定事件
- 初识python之 APP store排行榜 蜘蛛抓取(一)
- 关于Application.Lock和Lock(obj)
- ElasticSearch可视化工具Dejavu安装使用
- Kubernetes-基本介绍/核心功能/相关术语(一)
- SpringCloud学习笔记024---SpringBoot中使用大部分公用的配置记录
- javascript学习一、js的初步了解
- php webservice 上传大文件,JS和WebService大文件上传代码分享
- wap网站制作教程,android面试试题
- Python利用wakeonlan库 局域网 网络唤醒电脑
- 天正的计算机快捷命令大全,天正建筑快捷键大全:天正建筑cad快捷键命令大全...
- 【内核调度、负载均衡】【find_busiest_queue】
- OPEN3D(python)学习笔记-1.3 法线估计
- ElasticSearch 中的中文分词器以及索引基本操作详解
- 设计张程序员专用壁纸
热门文章
- 贝塞尔矫正2,公式推导
- 【Servlet】浅谈 Servlet 之 保存作用域
- html5图片缩放居中原理,html css 图片缩放等居中显示代码
- Java ConcurrentHashMap多线程下的正确使用
- Nmap中扫描时出现“utf8' codec can't decode byte 0xc0 in position 0: invalid start byte”错误的解决方案
- 基于内容推荐算法的电影推荐系统
- DIV+CSS最常用的网页布局代码11例。
- 揭秘Win7 下WinSXS超大文件夹
- [零刻]EQ12迷你主机设置来电开机自启教程
- 关于iPhone456字体尺寸适配问题