前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序-云点播

小程序-云点播

原创
作者头像
用户7418541
修改2020-06-05 09:57:10
4K0
修改2020-06-05 09:57:10
举报
文章被收录于专栏:云点播视频的问题

之前在Web端用 h5connect.js 方式点播视频,现在需要移动到微信小程序中,求大佬解决帮助,急急急.... 谢谢啦!

因为视频服务器存在别人那里,他们就只给我们提供了 h5connect.js 来获取视频
因为视频服务器存在别人那里,他们就只给我们提供了 h5connect.js 来获取视频

按照小程序的开发方式,(播放域名和推送地址随机生成一个id)我们如何根据ID来获取对应的视频地址?

<!--pages/push-config/push-config.wxml-->

<view class="mainUI">

<view class='title' style='padding-top:{{(headerHeight + statusBarHeight)/2 - 12}}px'>

<text>RTMP推流</text>

</view>

<view class='item' style='padding-top:2vh'>

<text class='item-title'>推流获取</text>

<button class="item-button1" bindtap="onScanQR">扫码读取</button>

<button class="item-button1" bindtap="onNewUrlClick">自动生成</button>

</view>

<view class='item'>

<text class='item-title'>推流地址</text>

<input class='item-input' placeholder="rtmp://" focus="{{focusPush}}" bindtap='onPushInputTap' bindinput="onPushInputChange" value="{{pushUrl}}"></input>

<image class='item-image' bindtap="onCopyPushUrl" src='/pages/Resources/copy.png'></image>

</view>

<view class='item'>

<text class='item-title'>播放地址</text>

<input class='item-input' placeholder="http://" focus="{{focusPlay}}" bindtap='onPlayInputTap' bindinput="onPlayInputChange" value="{{playUrl}}"></input>

<image class='item-image' bindtap="onCopyPlayUrl" src='/pages/Resources/copy.png'></image>

</view>

<view class='item'>

<text class='item-title'>画面质量</text>

<radio-group class="radio-group" bindchange="modeRadioChange">

<label class="radio" wx:for="{{modeItems}}" wx:key="" class="{{mode == item.value ? 'bc_blue white': 'blue'}}">

<radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.title}}

</label>

</radio-group>

</view>

<view class='item'>

<text class='item-title'>画面方向</text>

<radio-group class="radio-group" bindchange="orientationRadioChange">

<label class="radio" wx:for="{{orientationItems}}" wx:key="" class="{{orientation == item.value ? 'bc_blue white': 'blue'}}">

<radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.title}}

</label>

</radio-group>

</view>

<view class='item'>

<text class='item-title'>仅推声音</text>

<switch class='item-switch' checked="{{!enableCamera}}" bindchange="switchChange" />

</view>

</view>

<view class='start-box'>

<button class='start' bindtap="startPush" src='/pages/Resources/logo.png'>开始</button>

</view>

<view class='logo-box'>

<image class='logo' src='/pages/Resources/logo.png'></image>

</view>

<cover-image class='close' style="top:{{(headerHeight + statusBarHeight) - 26}}rpx" src="/pages/Resources/back.png" bindtap="onBack"></cover-image>

// pages/push-config/push-config.js

const app = getApp()

Page({

/**

   * 页面的初始数据

   */

  data: {

    modeItems: [

{ value: 'SD', title: 'SD'},

{ value: 'HD', title: 'HD'},

{ value: 'FHD', title: 'FHD'},

    ],

    mode :'SD',

    orientationItems: [

{ value: 'vertical', title: '竖屏推流' },

{ value: 'horizontal', title: '横屏推流' },

    ],

    orientation: 'vertical',

    enableCamera : true,

    focusPush: false,

    focusPlay: false,

    tapTime: '', // 防止两次点击操作间隔太快

    headerHeight: app.globalData.headerHeight,

    statusBarHeight: app.globalData.statusBarHeight,

},

onPushInputTap: function () {

this.setData({

      focusPush: true

})

},

onPushInputChange: function (e) {

this.setData({

      pushUrl: e.detail.value,

})

},

onPlayInputTap: function () {

this.setData({

      focusPlay: true

})

},

onPlayInputChange: function (e) {

this.setData({

      playUrl: e.detail.value,

})

},

modeRadioChange: function (e) {

this.setData({

      mode: e.detail.value

});

},

orientationRadioChange: function (e) {

this.setData({

      orientation: e.detail.value

});

},

switchChange: function (e) {

this.setData({

      enableCamera: !e.detail.value

});

},

onScanQR: function () {

var self = this;

wx.scanCode({

      onlyFromCamera: true,

success: (res) => {

console.log(res);

self.setData({

          pushUrl: res.result,

          playUrl: "",

})

}

})

},

onNewUrlClick: function () {

var self = this;

wx.request({

      url: 'https://lvb.qcloud.com/weapp/utils/get_test_pushurl',

success: (res) => {

var pushUrl = res.data['url_push'];

var rtmpUrl = res.data['url_play_rtmp'];

var flvUrl = res.data['url_play_flv'];

var hlsUrl = res.data['url_play_hls'];

var accUrl = res.data['url_play_acc'];

console.log(pushUrl);

self.setData({

          pushUrl: pushUrl,

          playUrl: flvUrl,

})

wx.showToast({

          title: '获取地址成功',

})

},

fail: (res) => {

console.log(res);

wx.showToast({

          title: '网络或服务器异常',

})

}

})

},

onCopyPushUrl: function () {

wx.setClipboardData({

      data: this.data.pushUrl,

})

},

onCopyPlayUrl: function () {

wx.setClipboardData({

      data: this.data.playUrl,

})

},

startPush : function () {

var self = this;

// 防止两次点击操作间隔太快

var nowTime = new Date();

if (nowTime - this.data.tapTime < 1000) {

return;

}

if (!self.data.pushUrl || self.data.pushUrl.indexOf("rtmp://") != 0) {

wx.showModal({

        title: '提示',

        content: '推流地址不合法,请点击自动生成按钮先获取腾讯云推流地址',

        showCancel: false

});

return;

}

var url = '/pages/live-pusher-demo/push?pushUrl=' + encodeURIComponent(self.data.pushUrl) + '&mode=' + self.data.mode + '&orientation=' + self.data.orientation + '&enableCamera=' + self.data.enableCamera;

console.log(url);

wx.navigateTo({

      url: url

});

self.setData({ 'tapTime': nowTime });

},

/**

   * 生命周期函数--监听页面加载

   */

onLoad: function (options) {

},

/**

   * 生命周期函数--监听页面初次渲染完成

   */

onReady: function () {

},

/**

   * 生命周期函数--监听页面显示

   */

onShow: function () {

},

/**

   * 生命周期函数--监听页面隐藏

   */

onHide: function () {

},

/**

   * 生命周期函数--监听页面卸载

   */

onUnload: function () {

},

/**

   * 页面相关事件处理函数--监听用户下拉动作

   */

onPullDownRefresh: function () {

},

/**

   * 页面上拉触底事件的处理函数

   */

onReachBottom: function () {

},

/**

   * 用户点击右上角分享

   */

onShareAppMessage: function () {

},

onBack: function () {

wx.navigateBack({

      delta: 1

});

}

})

以上是我写的一个案例demo 有不到之处请大家批评指正!!!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档