https://github.com/young-cowboy/young-cowboy.github.io
https://www.cnblogs.com/xiaoniuzai/p/7129036.html
==============================================
示例: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"); ......
路漫漫其修远兮,吾将上下而求索。