微信小程序_媒体组件_相机_实时音视频播放/录制

#媒体组件#

>camera相机

        >系统相机

        >使用时需要用户授权scope.camera

        >扫码二维码功能，需升级微信客户端至6.7.3

        >使用wx.createCameraContext()创建

camera相机组件属性

属性	类型	默认值	说明
mode	string	normal	应用模式，只在初始化时有效，不能动态变更 normal：相机模式。 scanCode：扫码模式
device-position	string	back	摄像头朝向
flash	string	auto	闪光灯，值为auto, on, off
frame-size	string	medium	指定期望的相机帧数据尺寸
bindstop	eventhandle		摄像头在非正常终止时触发，如退出后台等情况
binderror	eventhandle		用户不允许使用摄像头时触发
bindinitdone	eventhandle		相机初始化完成时触发
bindscancode	eventhandle		在扫码识别成功时触发，仅在 mode="scanCode" 时生效

        示例代码：

//.wxml

<view>
    <camera device-position="back" flash="off" binderror="error" style="width: 100%; height:300px;"></camera>
    <button type="primary" bindtap="takePhoto">拍照</button>
    <view>预览</view>
    <image mode="widthFix"src="{{src}}"></image>
</view>

//.js

Page({
    takePhoto() {
        const photo = wx.createCameraContext()
        photo.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                src: res.tempImagePath
                })
            }
        })
    },
    error(e) {
        console.log(es.detail)
    }
})

        效果截图：

>live-player实时音视频播放

        >暂只针对特定类目的小程序开放

        >需要先通过类目审核

        >再在小程序管理后台，「开发」-「接口设置」 中自助开通该组件权限。

live-player实时音视频播放组件属性

属性	类型	默认值	说明
src	string		音视频地址。目前仅支持 flv, rtmp 格式
mode	string	live	模式
autoplay	boolean	false	自动播放
muted	boolean	false	是否静音
orientation	string	vertical	画面方向
object-fit	string	contain	填充模式，可选值有 contain，fillCrop
min-cache	number	1	最小缓冲区，单位s（RTC 模式推荐 0.2s）
max-cache	number	3	最大缓冲区，单位s（RTC 模式推荐 0.8s）
bindstatechange	eventhandle		播放状态变化事件，detail = {code}
bindfullscreench ange	eventhandle		全屏变化事件，detail = {direction, fullScreen}
bindnetstatus	eventhandle		网络状态通知，detail = {info}

        示例代码：

//wxml

<live-player src="{{src}}" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />

//.js

Page({
    statechange(e) {
        console.log('live-player code:', e.detail.code)
    },
    error(e) {
        console.error('live-player error:', e.detail.errMsg)
    }
})

>live-pusher实时音视频录制

        >针对特定类目开放

        >需要取得用户授权scope.camera、 scope.record

        >设置方式同live-player

live-pusher实时音视频录制组件属性

属性	类型	默认值	说明
url	string		推流地址。目前仅支持 flv, rtmp 格式
mode	string	RTC	SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话）
autopush	boolean	false	自动推流
muted	boolean	false	是否静音
enable-camera	boolean	true	开启摄像头
auto-focus	boolean	true	自动聚集
orientation	string	vertical	画面方向
beauty	number	0	美颜，取值范围 0-9 ，0 表示关闭
whiteness	number	0	美白，取值范围 0-9 ，0 表示关闭
aspect	string	9:16	宽高比，可选值有 3:4, 9:16
min-bitrate	number	200	最小码率
max-bitrate	number	1000	最大码率
waiting-image	string		进入后台时推流的等待画面
waiting-image-hash	string		等待画面资源的MD5值
background-mute	boolean	false	进入后台时是否静音
bindstatechange	eventhandle		状态变化事件，detail = {code}
bindnetstatus	eventhandle		网络状态通知，detail = {info}
binderror	eventhandle		渲染错误事件，detail = {errMsg, errCode}

        示例代码：

//.wxml

<view>
    <live-pusher url="{{src}}" mode="RTC" autopush bindstatechange="statechangel" style="width: 300px; height: 225px;" />
</view>

//.js

Page({
    statechangel(e) {
        console.log('live-pusher code:', e.detail.code)
    }
})

...持续学习完善中。

---

#学无止境#