yingDev / Web-Rtmp

Play rtmp video stream on the web page...without Flash. (Javascript)

Web-Rtmp

在网页上播放RTMP视频流，通过Websocket。

WARNING ============

这个项目很大程度上只能算可行性验证，不适合作为 library 使用。试验结论是：用 js 解码视频效率已经够低了，rtmp 协议增加了许多额外开销，如果单纯为了播放视频，并不明智。不如用纯粹的 ws 传送 h264 流。

基本原理

• 服务端

  • 使用 websockify wrap 一个 rtmp 服务器地址。 (yingDev的fork 去掉了base64子协议检查)

  ./websockify.py 1999 <rtmp_server>:1935

• 浏览器

  • 使用 node-rtmpapi 解析 RTMP 协议，完成握手和通信。 (yingDev的fork 增加了浏览器支持、修正了几个错误)

  • 提取其中的 H264 视频流

  • 喂给 Broadway 解码

  decoder.decode(frame);

使用

//比如 rtmp://helloworld.com/live/abc ---> app='live', streamName='abc', rtmp_server='helloworld.com'
// ./websockify.py 1999 helloworld.com:1935
var player = new WebRtmpPlayer('ws://127.0.0.1:1999', '<app>', '<streamName>', 'rtmp://<rtmp_server>/<app>');
player.canvas.style['height'] = '100%';
document.getElementById("vidCont").appendChild(player.canvas);

运行

git clone https://github.com/yingDev/Web-Rtmp.git
cd Web-Rtmp
git submodule update --init --recursive
cnpm install

# set your rtmp params in test.js first, then 
webpack -w

# setup test server
./websockify/websockify.py 1999 <rtmp_server>:1935

open index.html

局限

• Broadway:

  The decoder ...does not support weighted prediction for P-frames and CABAC entropy encoding...

参考资料

• Real-Time Messaging Protocol (RTMP) specification
  http://www.adobe.com/devnet/rtmp.html

• FLV and F4V File Format Specification
  http://www.adobe.com/devnet/f4v.html

• h264-live-player
  https://github.com/131/h264-live-player