GaHingZ 发布的文章

video标签下触摸坐标归一化[考虑全屏,转屏,PC/Mobile Web/WebView]


先给出一些基本知识

触摸点位置

clientX / clientY:// 触摸点相对于浏览器窗口viewport的位置  参照点会随着浏览器的滚动而变化
pageX / pageY:// 触摸点相对于页面的位置  参照点不会随着浏览器的滚动而变化
screenX /screenY:// 触摸点相对于屏幕的位置 

所以如果要算鼠标在当前div的相对位置 通过获取var offset = $("#mainScreen").offset();后 当前鼠标的绝对位置要用pageX/Y去拿 否则浏览器页面滚动后会少算一段

触摸事件

PC

onmousemove script  当鼠标指针移动到元素上时触发。
onmouseout  script  当鼠标指针移出元素时触发。
onmouseup 属性在松开鼠标按钮时触发。
提示:相对于 onmouseup 事件的事件次序(限于鼠标左/中键):
onmousedown
onmouseup
onclick
onmouseup 事件的事件次序(限于鼠标右键):
onmousedown
onmouseup
oncontextmenu
onMouseover和onMousemove有什么区别?
区别是进入后onmousemove鼠标每动一下都会执行事件,onmouseover只在鼠标进入时执行一次

Mobile

基本事件如下,其他的都是对这些事件的组合封装

mainScreen.addEventListener("touchmove", touchMove, false);//手指在屏幕上移动时触发[不动但停留太久也会触发]
mainScreen.addEventListener("touchstart", touchStart, false);//手指一触摸屏幕就触发
mainScreen.addEventListener("touchend", touchEnd, false);//手指离开屏幕触发


流媒体直播—WebRTC native 2 browser


关于browser 2 browser的网上文章很多,我就不介绍了。 可以参考我的这篇文章流媒体直播——资料整理、你想要了解的都在这 里面给的链接可以去看看 这边我要讲的是WebRTC编译后的执行文件Web端进行交互。

首先要明确的是,browser 2 browser的应用场景太狭小了:视频通话... 而编译WebRTC我们就可以做更多的事:屏幕共享.. 录播.. 远程教育【切换通话和屏幕】.. 因为视频源我们是可控的,不像Web. 【其实b2b也可以做屏幕共享,不过c2b会比较可控】

编译WebRTC是一件麻烦的事,可以参考上面那篇文章。 这里我直接给出两个可运行程序

下载地址:http://pan.baidu.com/s/1bVpx9O

如果网盘挂了请提醒我( 说的好像是什么不健康的东西是的= =


流媒体直播——资料整理、你想要了解的都在这。


并没有按照某种标准进行分类。 感兴趣的可以将其作为chrome书签=。= 【文末附上Bookmarks Json】

WebRTC

  1. HTML5 视频直播(三) | JerryQu 的小站 从这边开始了解的WebRTC,里面推荐的文章都可以去读读,后面书签可能不会提到。
  2. LingyuCoder/SkyRTC-demo: A simple demo used SkyRTC 别人做的一套WebRTC系统,支持音视频,房间,文件传输,在线聊天,了解WebRTC后其实发现也没有什么技术难点
  3. WebRTC中文网-最权威的RTC实时通信平台 说是权威的中文网,其实里面讲的算是比较简单的东西,而且基本没有native的文章。一般文章都是老外的翻译,有时间可以上去看看,虽然一般是简单的 但是说不定有收获呢。
  4. Getting Started with WebRTC - HTML5 Rocks 看标题就知道了,入门必备,不过是英文的!1.中提到的推荐文章里面有这个
  5. WebRTC Home | WebRTC 官网
  6. BlogGeek.me • The leading authority on WebRTC【老外博客】 有关WebRTC的,资料会比较新。
  7. Media Capture and Streams 讲解一些更具体的API参数以及用法,收益不大,API使用其他文章都可以学到
  8. 最简单的WebRTC示例 - 不急不徐,持之以恒。 - BlogJava demo,作为快速测试
  9. WebRTC模块分析博客 native版,写的不错,做native开发的值得看
  10. WebRTC源码及项目
  11. 接收音视频流的参数设置
  12. qq浏览器对h5的支持程度How well does x5 browser support HTML5?
  13. WebRTC 浏览器端demo包括样式 流记录之类的 备着,以后应该会用到。
  14. WebRTC Mobile 支持程度 可以看下
  15. WebRTC 在WebView的使用,全屏,触摸事件
  16. windows下webrtc的编译 2016 - 张晖 - 博客频道 - CSDN.NET
  17. 开发引导 因为上面推荐的文章可能会不够新,这个应该都是最新的。[其实API基本不会变],所以这个可看可不看 17.1 WebRTC API - Web API 接口 | MDN 17.2 WebRTC - Web 開發者指引 | MDN

    native 2 browser

  18. Is it possible to use WebRTC to streaming video from Server to Client? - Stack Overflow 可以看下讨论
  19. WebRTC Native c++ to web demo 看讨论成功借鉴
  20. WebRTC Native C++ to Browser 还未看代码,因为自己实现了


H5音频直播—探索历程、aurora.js源码解析、音频编码基本原理


上次讲解了H5的视频直播,这次我们要讲的就是H5的音频直播啦.有没有很期待= =

下面是我的探索历程,不感兴趣的可以直接看最后一个方案。

探索历程

注:本文使用的Server都是nodejs,如果不了解的请先看下基础教程 另外ffmpeg是必须的,不仅是用来测试,做流媒体开发的基本都要会用这个


H5视频直播—JSMPEG源码解析、视频压缩编码、MPEG-1标准


jsmpeg是什么?

https://github.com/phoboslab/jsmpeg

一个mpeg-1 video的js解码库

jsmpeg可以用来干什么?

利用ffmpeg采集视频源并推送到node.js服务器 nodejs利用ws模块[基于tcp]将数据包转发到网页,利用该js进行解码,提供canvas渲染 最后的效果就是浏览器能够实时看到视频源的数据

使用方法请参考github 本电脑使用记录

1. cd到对应目录D:\nodejs\projects\live_audio 
2. node stream-server.js ququ 9091 9092
3. ffmpeg -f dshow -i video="Integrated Webcam"  -f mpeg1video -b 500k -r 20 -vf scale=640:360  http://localhost:9091/ququ/640/360

应用场景

基本直播场景都可以用到[注意是基于tcp的] 但是注意!!这个是只有视频 没有音频 PS:关于音频以及利用流媒体协议或封装格式做同步的下篇文章会写到