Atititjs h5调用摄像头视频聊天 拍照功能 相机功能 录像attilax总结

Atititjs h5调用摄像头视频聊天 拍照功能 相机功能  录像attilax总结

 

1.1. 1.1.java调用摄像头就很容易了。。但是js调用摄像头就需要一些支持了 1

1.2. 视频定时截屏监控 1

1.3. 视频功能。略 1

1.4. 拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器，将视频画面画到画布上。 1

1.5. Note 本地file模式ff可以，chrome不行。。 2

1.6. 移动设备使用input file模式拍照 2

1.7. 移动设备也可以使用input 模式录像等 2

1.8. 录制视频 2

1.9. 有成熟的js类库调用摄像头的，raw api太麻烦了 3

 

1.1. 1.1.java调用摄像头就很容易了。。但是js调用摄像头就需要一些支持了

1.2. 视频定时截屏监控

 

1.3. 视频功能。略

 

 

1.4. 拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器，将视频画面画到画布上。

复制代码

代码如下:

// 触发拍照动作
document.getElementById("snap")
.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

 

 

1.5. Note 本地file模式ff可以，chrome不行。。

 

http://localhost:8088/video/takephoto.html

本地file模式ff可以，chrome不行。。

Url模式都可以。。

可以视频麦克风，视频通话。。

 

俩个brow工具只有一个可以访问独占设备，另外一个就黑屏咯。

 

1.6. 移动设备使用input file模式拍照

1.7. 移动设备也可以使用input 模式录像等

 

1.8. 录制视频，也可以通过不断的截图来录像。。

 这个问题的基本思路是使用webrtc的getUserMedia接口获取摄像头，然后使用MediaRecorder接口（https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/record，https://developers.google.com/web/updates/2016/01/mediarecorder，https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder）录制，最后将录制的视频分片上传。

stackoverflow上有类似的问题：http://stackoverflow.com/questions/16571044/how-to-record-webcam-and-audio-using-webrtc-and-a-server-based-peer-connection

GitHub上有类似的库可以参考：https://github.com/streamproc/MediaStreamRecorder

MediaRecorder接口的坑在于各个浏览器的实现不一致：Chrome只能分开录video和audio，Firefox可以video和audio一起录制成webm格式，opera用的chrome内核，所以和chrome的行为一致，剩下的浏览器就不说了。所以你在服务器端是要对录制的视频进行处理的，比如chrome的视频就要合并。服务器端对视频的处理可以用ffmpeg。

如果想在生产上使用，推荐实时猫的私有云服务，提供完备的录制功能和统一的接口。

 

1.9. 手机摄像头作为wifi摄像头，，待测

在PC端连接手机摄像头使用。。通过wifi连接。

1.10. 有成熟的js类库调用摄像头的，raw api太麻烦了

 

参考资料

HTML5——利用navigator+Video调用摄像头进行录像 - 欲买桂花同载酒，终不似，少年游 - 博客频道 - CSDN.NET.html

HTML5 PC、Mobile调用摄像头（navigator.getUserMedia）_HTML5_WEB-ITnose.html

如何html5在浏览器里访问手机后置摄像头？ - HTML5 - 知乎.html

 

 

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher  kok  虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王

简称：： Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴

全名：：Emir Attilax Akbar bin Mahmud bin  attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当  阿尔 拉帕努伊

常用名：艾提拉（艾龙），  EMAIL:1466519819@qq.com

 

 

头衔：uke总部o2o负责人，全球网格化项目创始人，

uke宗教与文化融合事务部部长， uke宗教改革委员会副主席

Emir Uke部落首席大酋长，

uke制度与重大会议委员会委员长，uke保安部首席大队长,uke制度检查委员会副会长，

uke 首席cto  奶牛科技首席cto ， 软件部门总监 技术部副总监  研发部门总监主管  产品部副经理 项目部副经理

uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人，莱恩群岛区连锁负责人，uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人

 Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长

 

uke终身教育学校副校长   Uke医院 与医学院方面的创始人

 uec学院校长， uecip图像处理机器视觉专业系主任   uke文档检索专业系主任

 Uke 户外运动协会理事长  度假村首席大村长  uke交友协会会长

 uke出版社编辑总编

 

转载请注明来源：attilax的专栏  ?http://blog.csdn.net/attilax

--Atiend  v6