月度归档： 2021年7月

分类
首页

如何实现普通直播和VR一对一或一对多webrtc视频直播

本文需要mxplayer.js sdk

一对多和一对一webrtc视频直播和上一篇文章 区别点在于直播一般使用客户端软件，比如直播摄像机，obs，ffmpeg等等将视频流通过rtsp推送到服务器，然后服务器再分发直播流到客户端，然而一对一或一对多直播则直接使用客户端网页直接当前调用设备摄像头，然后将获取到的视频数据通过webrtc推送至服务器，服务器再做相应的处理，使用mxplayer播放器sdk可以很快速完成一个这样的功能，下面附上一个例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo - webrtc </title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body>
    <div class="container" id="videoPlayer">
        <div id="playCanvas"></div>
    </div>
    <script type='text/javascript' src="../../../lib/mxplayer.js"></script>
    <script type='text/javascript'>
        var addr = 'webrtc://rtc.mxreality.cn:443/live/livestream';
        var player = new Player("playCanvas", window.innerWidth, window.innerHeight, '', function () {
            //url:例如 webrtc://domain:443/live/livestream
            player.player.publishWebRtc(addr);
            //当准备完成开始推送，player.webRtcPublished回调方法将被触发
        });
        player.playBtnClick = function () {

        }
    </script>
</body>

</html>

注意！摄像头权限需要https下才能唤起。

分类
视频直播 首页

如何实现web端毫秒级直播延迟

本文需要mxplayer.js sdk

经过我的多次多场景测试，已经实现通过webrtc技术实现毫秒延迟的h5 直播，其思路就是客户端和服务端建立通信连接，然后服务端分发直播流到个个客户端，具体服务端是如何处理推流、接收、分发、建立webrtc连接的信令服务器的，这些都可以查看srs（simple realtime server）实时高效视频服务器相关的文档，这个比较复杂就不在这里说明了。

服务器搭建完成之后会生成一个webrtc直播地址，通过mxplayer.js 播放器sdk，几行代码就可以实现毫秒级的webrtc直播功能，下面是个例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo - webrtc </title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body>
    <div class="container" id="videoPlayer">
        <div id="playCanvas"></div>
    </div>
    <script type='text/javascript' src="../../../lib/mxplayer.js"></script>
    <script type='text/javascript'>
        var addr = 'rtc.mxreality.cn';
        var player = new Player("playCanvas", window.innerWidth, window.innerHeight, '', function () {
            var url = 'webrtc://' + addr + '/live/livestream';
            player.playWebRtc(url, 'plane', true);
        });
        player.playBtnClick = function () {

        }
    </script>
</body>

</html>

附上运行截图,obs 推流webrtc直播延迟测试截图