使用JS实现RTMP协议直播(三)

broadway和libspeex的C代码可以先编译成llvm的中间文件,然后再和自己写的c++代码连接形成最终的js代码。

中间遇到的问题是,如何在C代码和js代码之间进行交互,就是哪些代码写成C,哪些用js实现。

用emscripten绑定两个C++类,NetConnection,NetStream,以实现通讯解码等高密度运算,调用方式基本模仿as。

在调用js系统自带的一些对象的时候,从C端调用会有一些性能影响,尤其是传递大对象的时候,这时候通过阅读speex.js的一些用法发现,C代码的内存使用,emscripten会分配一块ArrayBuffer,在js端可以通过将C端的指针看成是ArrayBuffer的偏移来直接操作内存,这样就可以高效管理内存。需要传递大数据的时候,只需要传递指针(即偏移)到js代码中,js就能获取到内存数据。

使用方法和as十分接近。

    var nc = null;
    var ns = null;
    function test() {
        nc = new NetConnection();
        nc.onNetStatus = function(info) {
            Module.print(info.code);
            if (info.code == "NetConnection.Connect.Success") {
                ns = new NetStream(nc);
                ns.attachCanvas(document.getElementById("canvas"));
                ns.initAudio(50);
            }
        }
        nc.connect("192.168.0.100:1936", "live", "");
    }

ns.initAudio(50);这段代表音频缓冲50帧播放,因为实际测试发现,不缓冲的话声音播放不出来

目前经过压缩整体js在500k左右

转载于:https://my.oschina.net/langhuihui/blog/612144

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现按钮点击使用rtmp协议websocket请求接受视频,你需要按照以下步骤进行操作: 1. 在前端页面添加一个按钮,绑定点击事件。 2. 在点击事件中使用WebSocket对象创建一个WebSocket连接。 3. WebSocket连接建立成功后,使用send方法向服务端发送一个消息,告诉服务端需要使用rtmp协议接收视频。 4. 服务端接收到消息后,使用rtmp协议推送视频流到WebSocket连接中。 5. 前端页面接收到视频流后,使用MediaSource API将视频流添加到HTML5 video元素中进行播放。 下面是一个简单的实现示例: ```javascript // HTML代码 <button id="btn">开始播放</button> <video id="video" controls></video> // JavaScript代码 const btn = document.getElementById('btn'); const video = document.getElementById('video'); const ws = new WebSocket('ws://localhost:8080'); btn.addEventListener('click', () => { ws.onopen = () => { ws.send('use rtmp protocol'); }; ws.onmessage = (event) => { const data = event.data; appendBuffer(data); }; }); function appendBuffer(data) { const sourceBuffer = new MediaSource().addSourceBuffer('video/mp4;codecs="avc1.42E01E, mp4a.40.2"'); sourceBuffer.addEventListener('updateend', () => { if (!sourceBuffer.updating && sourceBuffer.buffered.length > 0) { video.play(); } }); const uint8Array = new Uint8Array(data); const blob = new Blob([uint8Array], { type: 'video/mp4' }); const fileReader = new FileReader(); fileReader.onload = () => { sourceBuffer.appendBuffer(new Uint8Array(fileReader.result)); }; fileReader.readAsArrayBuffer(blob); } ``` 注意,这只是一个简单的实现示例,实际情况可能会更加复杂,你需要根据自己的具体需求进行相应的调整和改进。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值