前端多媒體（7）—— 在瀏覽器中實現rtmp推流

示例：https://young-cowboy.github.io/gallery/rtmp_client/index.html

在國內的直播場景中通常使用，rtmp協議作為推流協議。RTMP是Real Time Messaging Protocol（實時消息傳輸協議）的首字母縮寫，由Adobe公司開發。

想要在瀏覽器中實現rtmp推流，就必須借助flash的幫助。而且HTML5規范里面並沒有針對RTMP的實現。畢竟這個協議標准是Adobe公司制定的。

在網上搜索了一些資料。發現有一個rtmp-streamer的庫 https://github.com/chxj1992/rtmp-streamer 。初略了看了一下庫里面有一個swf文件用來實現RTMP推流。

如下是我使用庫的里swf文件實現的rtmp推流 demo https://young-cowboy.github.io/gallery/rtmp_client/index.html

講解

定義一個object

<object>
  <embed 
  id="rtmp-streamer" 
  src="./RtmpStreamer.swf"
  bgcolor="#000000"
  quality="high"
  width="750"
  height="400"
  allowScriptAccess="sameDomain" 
  type="application/x-shockwave-flash"></embed>
</object>

獲取這個object 對象

this.streamer = document.getElementById('rtmp-streamer');

設置推流地址：

this.streamer.publish(url, name);

這里有2個參數，一個是url，一個是name，比如我們的rtmp地址為

rtmp://xxx-x.alicdn.com/linklive/27xxxxx9_14993xxx90?auth_key=150xx19-0-0-x065bc80exxxx5fe6b813

那么url為

rtmp://xxx-x.alicdn.com/linklive

name為

27xxxxx9_14993xxx90?auth_key=150xx19-0-0-x065bc80exxxx5fe6b813

你可以用如下的辦法進行拆分。

let urls = rtmp.split('/');
let name = urls.pop();
let url = urls.join("/");

this.streamer.publish(url, name);

閱讀源碼

看了一下swf的源碼：https://github.com/chxj1992/rtmp-streamer/blob/master/RtmpStreamer.as 代碼也不多，就200行。

主要的模塊有

import flash.net.NetConnection;
import flash.net.NetStream;
import flash.media.Video;
import flash.media.Camera;
import flash.media.Microphone;

分別獲取了網絡連接，網絡流，視頻攝像頭和麥克風。

設置好了攝像頭和音麥克風的配置后把這兩個對象attach到NetStream

ns = new NetStream(nc);
ns.attachCamera(cam);
ns.attachAudio(mic);

建立流推送以后把攝像流用視頻播放器播放

private function getPlayer():Video {
  vidPlayer = new Video(_screenWidth, _screenHeight);
  vidPlayer.x = _screenX;
  vidPlayer.y = _screenY;

  return vidPlayer;
}

vidPlayer = getPlayer();
vidPlayer.attachCamera(cam);
addChild(vidPlayer);

對於暴露出去的給JavaScript用的方法則用 ExternalInterface 實現

ExternalInterface.addCallback("setScreenSize", setScreenSize);
ExternalInterface.addCallback("setScreenPosition", setScreenPosition);
ExternalInterface.addCallback("setCamMode", setCamMode);
ExternalInterface.addCallback("setCamFrameInterval", setCamFrameInterval);
ExternalInterface.addCallback("setCamQuality", setCamQuality);

ExternalInterface.addCallback("setMicQuality", setMicQuality);
ExternalInterface.addCallback("setMicRate", setMicRate);

ExternalInterface.addCallback("publish", publish);
ExternalInterface.addCallback("play", playVideo);
ExternalInterface.addCallback("disconnect", disconnect);

ExternalInterface.call("setSWFIsReady");
......

路漫漫其修遠兮，吾將上下而求索。