腾讯webrtc推流拉流

推流：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
</body>
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js"
        charset="utf-8"></script>
<script type="text/javascript">
    var livePusher = new TXLivePusher();
    livePusher.setRenderView('id_local_video');
    // 设置视频质量
    livePusher.setVideoQuality('720p');
    // 设置音频质量
    livePusher.setAudioQuality('standard');
    // 自定义设置帧率
    livePusher.setProperty('setVideoFPS', 25);
    // 打开摄像头
    livePusher.startCamera();
    // 打开麦克风
    livePusher.startMicrophone();
    // livePusher.startPush('webrtc://123.livepush.myqcloud.com/dev/test?txSecret=d4ae3509979f8a9999999999509026a&txTime=60F6EA9F');
    livePusher.setObserver({
        onCaptureFirstVideoFrame: function () {
            livePusher.startPush('webrtc://123.livepush.myqcloud.com/dev/test?txSecret=d4ae3509979f8a9999999999509026a&txTime=60F6EA9F');
        }
    });
</script>
</html>

拉流：

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8"> 
            <title>学习webrtc</title> 
       </head>
       <body>
            <div id="id_test_video" style="width:100%; height:auto;"></div>
            <script src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js" charset="utf-8"></script>;
            <script>
            var player = new TcPlayer('id_test_video', {
                // "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //请替换成实际可用的播放地址
                "m3u8": "http://live.shaohualee.com/dev/test.m3u8",
                "autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "poster" : "http://www.test.com/myimage.jpg",
                "width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
                "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
            });
            </script>
      </body>
 </html>

这个是腾讯webRTC推流拉流最简单的demo，没有之一了。
推流拉流的地址参考上篇：https://shaohualee.com/article/1023

腾讯webrtc推流拉流

微信号：腾讯云折扣返现

技术讨论QQ群： 863102326

作者: catherine

搜索

标签