wxml代码

<camera device-position=’{{device}}’ flash=’{{light}}’ ></camera>

<cover-image style=‘height:{{covImg}}%’ class=‘covImg’ src=’{{vidE}}’></cover-image>

<view style=‘text-align: center’>

<canvas style=“width:100px; height:100px; margin:0 auto” canvas-id=“canvasArc” bindtouchstart=‘record’ bindtouchend=‘touchend’></canvas>

<text class=‘Prompt’>长按摄像</text>

</view>

wxss代码

camera {

width: 100%;

height: 70%;

/* margin-top: 50px */

}

.covImg {

position: fixed;

top: 0;

height: 70%

}

js代码

var cxt_arc    //绘图上下文

data:{

vidE:’’

}

/**

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

  */

onLoad: function (options) {

cxt_arc = wx.createCanvasContext(‘canvasArc’);//创建并返回绘图上下文context对象

var that = this

that.canvs()

},

//光环触摸事件

record: function () {

var cech = wx.createCameraContext()   //相机方法api

cech.startRecord ({

})

},1000)

},

//光环触摸结束事件

touchend:function(){

var that = this

var cech = wx.createCameraContext()   //相机方法api

cech.stopRecord ({

success:function(res){

that.setData({

vidE: res.tempThumbPath

})

}

})

},

//光环方法

canvs:function(){

//底部光环绘制

cxt_arc.setLineWidth(20);

cxt_arc.setStrokeStyle(’#d2d2d2’);

cxt_arc.setLineCap(‘round’)

cxt_arc.beginPath();//开始一个新的路径  

cxt_arc.arc(50, 50, 35, 0, 2 * Math.PI);//设置一个原点(106,106)，半径为100的圆的路径到当前路径  

cxt_arc.stroke();//对当前路径进行描边  

cxt_arc.draw();

},

需求,当录制完小视频,需要把apl返回的视频封面覆盖在相机上

用多台安卓真机测试没效果