分类
首页

如何实现普通直播和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下才能唤起。